Design System

SKILL — Design System

Pixel's comprehensive design system architecture. Every design must conform to these tokens, components, and patterns.

Design Tokens

Colors

Semantic Colors

Neutral Scale

See the brand-systems skill for brand-specific color values.

Typography

Spacing (4px Grid)

All spacing values must be multiples of 4px.

Border Radius

Shadows

Note: In dark themes, shadows are less effective. Use border + background contrast instead.

Breakpoints

Components

Buttons

Variants

Sizes

States (Required for ALL buttons)

• Default — Resting state
• Hover — Cursor over (desktop only)
• Active/Pressed — Being clicked/tapped
• Focus — Keyboard focus ring (2px offset, brand color)
• Disabled — Reduced opacity (0.5), no pointer events
• Loading — Spinner replaces text, maintains button width

Inputs

Types

• Text input (single line)
• Textarea (multi-line)
• Select / dropdown
• Checkbox
• Radio
• Toggle / switch
• Date picker
• File upload

States (Required for ALL inputs)

• Default — Empty, resting
• Focused — Active border, label animation
• Filled — Contains value
• Error — Red border, error message below
• Disabled — Reduced opacity, no interaction
• Read-only — Visible value, no interaction

Rules

• Always include labels (never placeholder-only)
• Error messages appear below the input, not in tooltips
• Group related inputs with clear sections
• Min height for touch: 44px

Cards

Anatomy

• Container (background, border, radius, optional shadow)
• Header (optional — title, subtitle, action)
• Content (primary card content)
• Footer (optional — actions, metadata)

Rules

• Consistent padding: 16px minimum, 24px recommended
• Cards in a grid must be equal height (use flexbox/grid)
• Clickable cards need hover state and cursor pointer
• Don't nest cards inside cards

Navigation

Web

• Top navigation bar for primary navigation
• Sidebar for complex applications (dashboards)
• Breadcrumbs for deep hierarchies
• Tabs for same-page content switching

Mobile

• Bottom tab bar for primary navigation (max 5 items)
• Stack navigation for drill-down flows
• Modal for focused tasks
• Bottom sheet for contextual actions
• NEVER use hamburger menus

Feedback

Data Display

Patterns

Form Patterns

• Single column forms for simplicity
• Progressive disclosure for complex forms
• Inline validation on blur
• Submit button at bottom-right (web) or full-width (mobile)
• Clear vs. cancel — "Cancel" returns, "Clear" resets

Search Patterns

• Search input with icon
• Instant results (debounced)
• Recent searches
• Empty state for no results
• Filter chips for refinement

Authentication Patterns

• Email + password (primary)
• Social login buttons (secondary)
• Magic link (optional)
• Password requirements shown during creation
• Error messages must not leak user existence

Design System Rules

1. Every component must use design tokens — No hardcoded colors, sizes, or spacing
2. Every interactive element must have all states defined — No missing hover, focus, disabled
3. Every screen must handle all edge states — See edge-state-design skill
4. Typography must follow the type scale — No arbitrary font sizes
5. Spacing must follow the 4px grid — No arbitrary pixel values
6. Colors must meet WCAG AA contrast — Minimum 4.5:1 for text, 3:1 for large text
7. Touch targets must be 44px minimum — On both web and mobile
8. Animations must respect prefers-reduced-motion — Always provide static fallback
9. Components must be consistent across screens — Same component, same behavior everywhere
10. Dark theme is the default — All our brands use dark themes. Design dark-first.

Dark Theme Specifics

• Use elevated surface colors instead of shadows for depth
• Reduce image brightness/saturation slightly
• Ensure sufficient contrast between surface layers
• Primary colors may need lightened variants for dark backgrounds
• Avoid pure white (#FFFFFF) text — use off-white (#E5E7EB or similar)
• Avoid pure black (#000000) backgrounds — use near-black with slight color