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
- Understand the product — What is it? Who uses it? What feeling should it evoke?
- Landscape analysis — Search for comparable products. Note what works and what doesn't.
- 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.
1---2name: design-consultation3description: Build a complete design system from scratch. Research the landscape, propose safe choices AND creative risks, generate DESIGN.md. Use when creating a new design system or establishing design foundations for a project.4---56# Design Consultation — Build Your Design System78You are a design partner helping establish the visual and interaction foundations for this project.910**Related skills:** [plan-design-review](../plan-design-review/SKILL.md) | [design-review](../design-review/SKILL.md)1112---1314## Phase 1: Research15161. **Understand the product** — What is it? Who uses it? What feeling should it evoke?172. **Landscape analysis** — Search for comparable products. Note what works and what doesn't.183. **Existing constraints** — Is there an existing design system? Brand guidelines? Framework limitations?1920---2122## Phase 2: Foundation Decisions2324For each decision, present 2-3 options with tradeoffs. One safe choice, one creative risk.2526### Typography27- **Font stack** — System fonts vs. custom fonts. Weight and size scale.28- **Type scale** — Modular scale ratio (1.25, 1.333, 1.5)29- **Line height** — Body text (1.5-1.7), headings (1.1-1.3)3031### Color32- **Primary palette** — Brand color + semantic colors (success, warning, error, info)33- **Neutral scale** — Gray scale from background to foreground34- **Dark mode** — Inverted palette or separate design tokens?35- **Contrast ratios** — WCAG AA minimum (4.5:1 for text, 3:1 for large text)3637### Spacing38- **Base unit** — 4px or 8px grid39- **Scale** — 4, 8, 12, 16, 24, 32, 48, 64, 9640- **Component spacing** — Padding and margin patterns4142### Layout43- **Grid system** — 12-column? Flexible? Max width?44- **Breakpoints** — Mobile-first? Which breakpoints?45- **Container widths** — Narrow (prose), medium (content), wide (dashboard)4647### Components48- **Buttons** — Primary, secondary, ghost, destructive. Sizes: sm, md, lg49- **Forms** — Input styles, validation states, label placement50- **Cards** — When to use cards vs. flat layout51- **Navigation** — Top nav, sidebar, tabs, breadcrumbs52- **Feedback** — Toasts, alerts, modals, loading states5354### Motion55- **Duration scale** — 100ms (micro), 200ms (small), 300ms (medium), 500ms (large)56- **Easing** — ease-out for enter, ease-in for exit57- **Principles** — Purposeful, not decorative. Guide attention, not distract.5859---6061## Phase 3: Output6263Write `DESIGN.md` at the project root:6465```markdown66# Design System6768## Principles69[3-5 design principles specific to this product]7071## Typography72[Font stack, scale, usage guidelines]7374## Color75[Palettes with hex values, usage rules]7677## Spacing78[Scale and usage patterns]7980## Components81[Component patterns and when to use each]8283## Patterns84[Common layout patterns, empty states, loading states, error states]85```8687This document is referenced by [design-review](../design-review/SKILL.md) and [plan-design-review](../plan-design-review/SKILL.md) — patterns blessed in DESIGN.md are not flagged during review.
aspectrr