Design System Generator

Transform product artifacts into design systems that feel so natural users think “of course, how else would it be?”

Philosophy

Great design systems don’t impose arbitrary aesthetics. They reveal what was always latent in the product’s purpose. The goal is not to decorate but to crystallize the product’s soul into visual and interaction patterns.

Before generating specifications, understand three things:

1. Who feels what? The target audience’s emotional state before, during, and after using the product
2. What’s the core tension? Every product resolves a tension. The design system should embody that resolution
3. What must feel inevitable? The final system should feel like the only possible answer

Input Requirements

Gather from the user:

• Product description or PRD
• Target audience profile (demographics, psychographics, context of use)
• User flow or key screens/wireframes
• Brand constraints if any (existing logos, colors, fonts)
• Competitive context (optional but helpful)

If missing critical inputs, ask. Don’t hallucinate audience or product details.

Output Structure

Generate a design system document with these sections:

1. Emotional Foundation (Mandatory First Step)

Before any visual decisions, establish:

AUDIENCE EMOTIONAL MAPPING
--------------------------
Before product: [emotional state - frustration, confusion, desire, etc.]
During product: [transformation happening]
After product: [desired emotional outcome]

CORE TENSION: [what problem/desire the product resolves]
DESIGN PROMISE: [one sentence: what the design must communicate]

Example:

AUDIENCE: Busy professionals tracking personal goals
Before: Overwhelmed, scattered, guilty about unfulfilled intentions
During: Clarity emerging, small wins accumulating
After: Empowered, in control, proud of progress

CORE TENSION: Ambition vs. time scarcity
DESIGN PROMISE: Progress should feel effortless and inevitable

2. Design Tokens

Typography

Select fonts that embody the emotional foundation. Reference references/typography-psychology.md for font-emotion mappings.

TYPOGRAPHY SYSTEM
-----------------
Display: [Font name] - [why it fits the emotional promise]
  - Weights: [specified weights]
  - Use: Headlines, hero text, celebration moments

Body: [Font name] - [why it fits]
  - Weights: [specified weights]  
  - Use: Reading text, descriptions, content

Mono (if needed): [Font name]
  - Use: Data, code, technical content

SCALE (base 16px):
- xs: 12px / 0.75rem
- sm: 14px / 0.875rem
- base: 16px / 1rem
- lg: 18px / 1.125rem
- xl: 20px / 1.25rem
- 2xl: 24px / 1.5rem
- 3xl: 30px / 1.875rem
- 4xl: 36px / 2.25rem
- 5xl: 48px / 3rem

LINE HEIGHT:
- Tight: 1.25 (headlines)
- Normal: 1.5 (body)
- Relaxed: 1.75 (long-form)

Color System

Colors must serve the emotional journey, not arbitrary aesthetics.

COLOR SYSTEM
------------
PRIMARY: [hex] - [emotional purpose: action, trust, energy]
SECONDARY: [hex] - [supporting role]
ACCENT: [hex] - [celebration, highlight, delight moments]

SEMANTIC:
- Success: [hex] - for completion, wins, positive feedback
- Warning: [hex] - attention needed, caution
- Error: [hex] - problems, blockers
- Info: [hex] - neutral information

NEUTRALS (light mode):
- Background: [hex]
- Surface: [hex]
- Border: [hex]
- Text Primary: [hex]
- Text Secondary: [hex]
- Text Muted: [hex]

NEUTRALS (dark mode):
[same structure with dark values]

COLOR USAGE RULES:
- Primary used sparingly for key actions only
- Accent reserved for celebration/delight moments
- Never use more than 3 colors in a single view

Spacing & Layout

SPACING SCALE (base 4px):
- 0: 0
- 1: 4px / 0.25rem
- 2: 8px / 0.5rem
- 3: 12px / 0.75rem
- 4: 16px / 1rem
- 5: 20px / 1.25rem
- 6: 24px / 1.5rem
- 8: 32px / 2rem
- 10: 40px / 2.5rem
- 12: 48px / 3rem
- 16: 64px / 4rem
- 20: 80px / 5rem
- 24: 96px / 6rem

CONTAINER:
- Max width: [based on content type]
- Padding: responsive scale

GRID:
- Columns: [number]
- Gutter: [spacing token]
- Margin: [spacing token]

3. Component Patterns

Buttons

BUTTON HIERARCHY
----------------
1. PRIMARY ACTION (one per screen max)
   - Background: primary color
   - Text: high contrast
   - Use: The ONE thing you want users to do

2. SECONDARY ACTION
   - Background: transparent or surface
   - Border: subtle
   - Use: Alternative valid paths

3. TERTIARY/GHOST
   - Background: transparent
   - Text: muted
   - Use: Dismissive actions, back, cancel

BUTTON STATES:
- Default: [specifications]
- Hover: [subtle elevation or color shift]
- Active/Pressed: [slight depression]
- Disabled: [reduced opacity, no pointer]
- Loading: [spinner or skeleton]

BUTTON SIZES:
- sm: height 32px, px-3, text-sm
- md: height 40px, px-4, text-base
- lg: height 48px, px-6, text-lg

BORDER RADIUS: [tokens matching brand personality]
- Sharp (0-2px): Professional, serious
- Soft (4-8px): Friendly, approachable  
- Round (12-16px): Playful, casual
- Pill (full): Modern, app-like

Call-to-Action Patterns

CTA HIERARCHY
-------------
Primary CTA: [verb + benefit, max 3 words]
- Position: Right-aligned or centered, never hidden
- Visual weight: Highest on page
- Emotional trigger: [what feeling drives the click]

Supporting CTA: [alternative action]
- Position: Near primary, lower visual weight
- Purpose: Catch hesitant users

MICROCOPY RULES:
- Use active verbs: Start, Get, Try, Create (not Submit, Click Here)
- Include benefit when possible: "Start free trial" not "Sign up"
- Match user's mental model and language

Form Elements

INPUT FIELDS
------------
- Height: 40-48px
- Padding: 12-16px horizontal
- Border: 1px neutral, focus state with primary
- Border radius: match button radius
- Label: above field, not placeholder-only
- Helper text: below field, muted color
- Error state: border color + error text below

VALIDATION:
- Inline validation on blur
- Success states for completed fields
- Error messages: specific and actionable

4. Motion & Interaction

MOTION PRINCIPLES
-----------------
Purpose: Guide attention, provide feedback, create delight
Never: Delay users, distract from content, add without purpose

TIMING TOKENS:
- Instant: 0ms (state changes)
- Fast: 100-150ms (micro-interactions, hovers)
- Normal: 200-300ms (transitions, reveals)
- Slow: 400-500ms (page transitions, celebrations)

EASING:
- ease-out: entering elements (decelerate in)
- ease-in: exiting elements (accelerate out)
- ease-in-out: moving elements

INTERACTION FEEDBACK:
- Button press: scale(0.98) + slight darken
- Success: brief pulse or checkmark animation
- Error: subtle shake
- Loading: skeleton or spinner, never frozen UI

5. Accessibility Baseline

CONTRAST REQUIREMENTS:
- Body text: 4.5:1 minimum
- Large text (18px+): 3:1 minimum
- UI components: 3:1 minimum

INTERACTIVE TARGETS:
- Minimum: 44x44px touch targets
- Spacing between targets: 8px minimum

FOCUS STATES:
- Visible focus ring on all interactive elements
- 2px offset, primary or high-contrast color
- Never remove focus outline without replacement

Process

1. Extract the emotional foundation from product docs
2. Map user journey to design mood shifts
3. Select typography that embodies the brand voice
4. Build color system around emotional moments
5. Define spacing that creates appropriate density
6. Specify components with clear hierarchy
7. Add motion that feels natural, not decorative
8. Verify accessibility baseline

References

• references/typography-psychology.md – Font personality mappings
• references/color-emotion.md – Color psychology and usage patterns
• references/component-patterns.md – Common UI pattern specifications

Anti-Patterns

Avoid these design system mistakes:

• Token soup: Too many options create decision paralysis. Constrain choices.
• Aesthetic without purpose: Every decision should trace back to user emotion
• Ignoring context: A fitness app and a banking app need different energy even if targeting similar demographics
• Over-specification: Leave room for contextual judgment. Don’t specify every pixel.
• Trend-chasing: Glassmorphism and gradients aren’t personality. What’s the actual emotional intent?