Chrome Extension Design System. Developer Guide

Design System for Chrome Extensions

Overview {#overview} Building consistent, professional UI for Chrome extensions requires understanding the unique constraints and patterns of extension surfaces. This guide covers design principles for creating extensions that feel native to Chrome.

Popup Constraints {#popup-constraints} Chrome imposes specific constraints on popup dimensions:

Maximum size: 800px width × 600px height
Minimum size: 25px width × 25px height
Default size: determined automatically by content dimensions
Content is automatically sized to fit within constraints

Design Language {#design-language} Match Chrome’s native appearance for a cohesive experience:

Typography {#typography} Use system font stack for native feel across platforms:

:root {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, 
    Helvetica, Arial, sans-serif;
  font-size: 13px;
  line-height: 1.5;
}

Colors {#colors} Follow Chrome’s color palette for UI elements:

:root {
  --google-blue: #1a73e8;
  --google-red: #ea4335;
  --google-green: #34a853;
  --google-yellow: #fbbc04;
  --text-primary: #202124;
  --text-secondary: #5f6368;
  --background: #ffffff;
  --border: #dadce0;
}

Spacing {#spacing} Use 8px grid system: 4px, 8px, 12px, 16px, 24px, 32px for consistent spacing.

Dark Mode Support {#dark-mode-support} Support both light and dark themes using CSS media queries:

:root {
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --text-primary: #e8eaed;
    --text-secondary: #9aa0a6;
    --background: #292a2d;
    --border: #5f6368;
  }
}

Layout Patterns {#layout-patterns}

Fixed Header + Scrollable Content {#fixed-header-scrollable-content}

.popup-container {
  display: flex;
  flex-direction: column;
  height: 600px;
  max-height: 600px;
}

.popup-header {
  flex-shrink: 0;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
}

.popup-content {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
}

.popup-footer {
  flex-shrink: 0;
  padding: 12px 16px;
  border-top: 1px solid var(--border);
}

Bottom Action Bar {#bottom-action-bar} Place primary actions in a fixed footer for easy thumb access on mobile and consistent UX.

Icon Design {#icon-design} Create icons at multiple sizes for toolbar and Chrome Web Store:

16×16px. toolbar (1x)
32×32px. toolbar (2x)
48×48px. extension management
128×128px. Chrome Web Store listing

Design for both light and dark browser themes using transparent backgrounds or inverted variants.

Popup vs Side Panel vs Options Page {#popup-vs-side-panel-vs-options-page}

Surface	Use Case
Popup	Quick actions, status view, immediate feedback (max 800×600)
Side Panel	Persistent tools, reading/viewing content, multi-step workflows
Options Page	Full settings, complex configuration, extensive forms

Responsive Design {#responsive-design} Design within popup constraints using flexbox and percentage widths. Test at minimum (25×25) and default sizes.

CSS Custom Properties {#css-custom-properties} Define comprehensive theming system:

:root {
  --color-primary: #1a73e8;
  --color-success: #34a853;
  --color-error: #ea4335;
  --color-warning: #fbbc04;
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --transition-fast: 150ms ease;
}

Animation {#animation} Keep animations subtle and purposeful:

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

Accessibility {#accessibility} Follow WCAG 2.1 AA guidelines:

Keyboard navigation for all interactive elements
ARIA labels for icons and custom controls
Focus management on popup open/close
Minimum 4.5:1 contrast ratio for text

Common UI Components {#common-ui-components}

Toggle switches for boolean settings
Search bars with clear button
Settings forms with labeled inputs
Scrollable lists with virtual scrolling for large datasets

Cross-References {#cross-references}

Accessibility Guide. Full accessibility requirements
Popup Patterns. Implementation patterns
Options Page. Settings page design

Part of the Chrome Extension Guide by theluckystrike. Built at zovo.one.

Turn Your Extension Into a Business Ready to monetize? The Extension Monetization Playbook covers freemium models, Stripe integration, subscription architecture, and growth strategies for Chrome extension developers.