Chrome Extension Design System — Developer Guide

4 min read

Design System for Chrome Extensions

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.

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

Match Chrome’s native appearance for a cohesive experience:

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

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

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

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

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

Place primary actions in a fixed footer for easy thumb access on mobile and consistent UX.

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.

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

Design within popup constraints using flexbox and percentage widths. Test at minimum (25×25) and default sizes.

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

Keep animations subtle and purposeful:

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

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

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

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

CSS Injection
Dark Mode -e —

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.

← Previous chrome-extension-deployment-strategies Next → chrome-extension-dev-tools