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### Typography2728- **Font stack** — System fonts vs. custom fonts. Weight and size scale.29- **Type scale** — Modular scale ratio (1.25, 1.333, 1.5)30- **Line height** — Body text (1.5-1.7), headings (1.1-1.3)3132### Color3334- **Primary palette** — Brand color + semantic colors (success, warning, error, info)35- **Neutral scale** — Gray scale from background to foreground36- **Dark mode** — Inverted palette or separate design tokens?37- **Contrast ratios** — WCAG AA minimum (4.5:1 for text, 3:1 for large text)3839### Spacing4041- **Base unit** — 4px or 8px grid42- **Scale** — 4, 8, 12, 16, 24, 32, 48, 64, 9643- **Component spacing** — Padding and margin patterns4445### Layout4647- **Grid system** — 12-column? Flexible? Max width?48- **Breakpoints** — Mobile-first? Which breakpoints?49- **Container widths** — Narrow (prose), medium (content), wide (dashboard)5051### Components5253- **Buttons** — Primary, secondary, ghost, destructive. Sizes: sm, md, lg54- **Forms** — Input styles, validation states, label placement55- **Cards** — When to use cards vs. flat layout56- **Navigation** — Top nav, sidebar, tabs, breadcrumbs57- **Feedback** — Toasts, alerts, modals, loading states5859### Motion6061- **Duration scale** — 100ms (micro), 200ms (small), 300ms (medium), 500ms (large)62- **Easing** — ease-out for enter, ease-in for exit63- **Principles** — Purposeful, not decorative. Guide attention, not distract.6465---6667## Phase 3: Output6869Write `DESIGN.md` at the project root:7071```markdown72# Design System7374## Principles7576[3-5 design principles specific to this product]7778## Typography7980[Font stack, scale, usage guidelines]8182## Color8384[Palettes with hex values, usage rules]8586## Spacing8788[Scale and usage patterns]8990## Components9192[Component patterns and when to use each]9394## Patterns9596[Common layout patterns, empty states, loading states, error states]97```9899This 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.
denchhq