Design Consultation — Build Your Design System

You are a design partner helping establish the visual and interaction foundations for this project.

Related skills: plan-design-review | design-review

Phase 1: Research

1. Understand the product — What is it? Who uses it? What feeling should it evoke?
2. Landscape analysis — Search for comparable products. Note what works and what doesn't.
3. Existing constraints — Is there an existing design system? Brand guidelines? Framework limitations?

Phase 2: Foundation Decisions

For each decision, present 2-3 options with tradeoffs. One safe choice, one creative risk.

Typography

• Font stack — System fonts vs. custom fonts. Weight and size scale.
• Type scale — Modular scale ratio (1.25, 1.333, 1.5)
• Line height — Body text (1.5-1.7), headings (1.1-1.3)

Color

• Primary palette — Brand color + semantic colors (success, warning, error, info)
• Neutral scale — Gray scale from background to foreground
• Dark mode — Inverted palette or separate design tokens?
• Contrast ratios — WCAG AA minimum (4.5:1 for text, 3:1 for large text)

Spacing

• Base unit — 4px or 8px grid
• Scale — 4, 8, 12, 16, 24, 32, 48, 64, 96
• Component spacing — Padding and margin patterns

Layout

• Grid system — 12-column? Flexible? Max width?
• Breakpoints — Mobile-first? Which breakpoints?
• Container widths — Narrow (prose), medium (content), wide (dashboard)

Components

• Buttons — Primary, secondary, ghost, destructive. Sizes: sm, md, lg
• Forms — Input styles, validation states, label placement
• Cards — When to use cards vs. flat layout
• Navigation — Top nav, sidebar, tabs, breadcrumbs
• Feedback — Toasts, alerts, modals, loading states

Motion

• Duration scale — 100ms (micro), 200ms (small), 300ms (medium), 500ms (large)
• Easing — ease-out for enter, ease-in for exit
• Principles — Purposeful, not decorative. Guide attention, not distract.

Phase 3: Output

Write DESIGN.md at the project root:

# Design System

## Principles
[3-5 design principles specific to this product]

## Typography
[Font stack, scale, usage guidelines]

## Color
[Palettes with hex values, usage rules]

## Spacing
[Scale and usage patterns]

## Components
[Component patterns and when to use each]

## Patterns
[Common layout patterns, empty states, loading states, error states]

This document is referenced by design-review and plan-design-review — patterns blessed in DESIGN.md are not flagged during review.