Design Intelligence — Token Generation & Design System Bootstrapping

This skill helps set up design systems from scratch. Give it your project context (industry, brand, users) and it generates ready-to-use design tokens with Tailwind config snippets and CSS variable files.

When to Use

• Setting up a new project's design system (/spartan:ux system)
• Choosing color palettes for a specific industry/brand
• Generating typography scales
• Creating spacing systems
• Bootstrapping a component inventory

What This Skill Does

1. Takes project context (what, who, industry, personality)
2. Generates a complete design token set
3. Outputs in 3 formats: token reference doc, Tailwind config, CSS variables
4. Creates a component inventory based on the project type

How It Works

Step 1: Gather Context

Ask these questions (skip any the user already answered):

1. What are you building? (dashboard, SaaS, marketplace, mobile app, landing page, etc.)
2. Who uses it? (developers, business users, consumers, admins)
3. What's the personality? Pick 2-3:
   • Clean / Professional / Corporate
   • Bold / Playful / Creative
   • Minimal / Technical / Developer-focused
   • Warm / Friendly / Approachable
   • Premium / Luxury / Refined
   • Data-heavy / Dense / Information-rich
4. Light, dark, or both?
5. Any brand colors already decided? (if yes, use those as the foundation)
6. Reference apps? (apps that have the quality you want)

Step 2: Generate Color Palette

Based on the context, generate a complete palette:

For dark themes:

Background:     #0F172A (slate-900 family)
Surface:        rgba(30, 41, 59, 0.5) (glass effect)
Primary:        [based on personality — blue for professional, green for growth, etc.]
Primary Hover:  [10% darker]
Accent:         [complementary or analogous — use sparingly, max 10-15%]
Text:           #F8FAFC (near white)
Text Secondary: #94A3B8 (slate-400)
Text Muted:     #64748B (slate-500)
Border:         rgba(148, 163, 184, 0.1)
Success:        #22C55E
Warning:        #F59E0B
Error:          #EF4444

For light themes:

Background:     #FFFFFF or #F8FAFC
Surface:        #FFFFFF
Primary:        [based on personality]
Primary Hover:  [10% darker]
Accent:         [complementary]
Text:           #0F172A (near black)
Text Secondary: #475569 (slate-600)
Text Muted:     #64748B (slate-500)
Border:         #E2E8F0 (slate-200)
Success:        #16A34A
Warning:        #D97706
Error:          #DC2626

Color selection by personality:

Personality	Primary range	Accent range
Professional / Corporate	Blue (#2563EB → #1E40AF)	Slate or Amber
Bold / Creative	Purple (#7C3AED), Pink (#EC4899)	Yellow or Cyan
Minimal / Technical	Gray (#374151), Black (#111827)	One bright accent
Warm / Friendly	Orange (#EA580C), Teal (#0D9488)	Amber or Rose
Premium / Luxury	Deep Blue (#1E3A5F), Gold (#B8860B)	Silver or Champagne
Data-heavy	Neutral blue (#3B82F6)	Green for positive, Red for negative

Step 3: Generate Typography Scale

Pick a font pairing based on personality:

Personality	Font recommendation	Why
Professional	DM Sans, Plus Jakarta Sans	Clean geometric, good for UI
Technical	JetBrains Mono (code) + Inter (UI)	Developer-friendly
Creative	Outfit, Space Grotesk	Distinctive but readable
Warm	Nunito, Quicksand	Rounded, friendly feel
Premium	Playfair Display (headings) + Lato (body)	Elegant contrast
Data-heavy	Inter, Roboto Mono (numbers)	Tabular nums, high readability

Type scale (base 16px):

h1: 36px / 700 / 1.2 line-height
h2: 30px / 700 / 1.25
h3: 24px / 600 / 1.3
h4: 20px / 600 / 1.35
h5: 18px / 600 / 1.4
h6: 16px / 600 / 1.4
body: 16px / 400 / 1.6
body-sm: 14px / 400 / 1.5
caption: 12px / 500 / 1.4

Step 4: Generate Spacing & Radius

Spacing scale (8px base):

xs:   4px   (0.25rem)
sm:   8px   (0.5rem)
md:   16px  (1rem)
lg:   24px  (1.5rem)
xl:   32px  (2rem)
2xl:  48px  (3rem)
3xl:  64px  (4rem)

Radius by personality:

Personality	Card	Button	Badge	Input
Professional	8px	6px	4px	6px
Minimal	0-4px	4px	2px	4px
Friendly	12-16px	8px	9999px	8px
Premium	12px	8px	6px	8px

Shadow by personality:

Personality	Style
Professional	Subtle: 0 1px 3px rgba(0,0,0,0.1)
Minimal	None or very subtle borders
Friendly	Soft: 0 4px 12px rgba(0,0,0,0.08)
Premium	Layered: 0 1px 2px rgba(0,0,0,0.06), 0 4px 12px rgba(0,0,0,0.08)
Dark theme	Glow: 0 0 20px rgba(primary, 0.15)

Step 5: Output in 3 Formats

Format 1: Token Reference Doc (.planning/design/system/tokens.md)

Human-readable markdown with all tokens, used by designers and all commands.

Format 2: Tailwind Config Snippet

// Paste into tailwind.config.ts → theme.extend
{
  colors: {
    primary: '[value]',
    'primary-hover': '[value]',
    accent: '[value]',
    background: '[value]',
    surface: '[value]',
    // ... all color tokens
  },
  fontFamily: {
    sans: ['[font]', 'sans-serif'],
  },
  borderRadius: {
    card: '[value]',
    button: '[value]',
  },
  boxShadow: {
    card: '[value]',
  },
}

Format 3: CSS Variables

:root {
  /* Colors */
  --color-primary: [value];
  --color-primary-hover: [value];
  --color-accent: [value];
  --color-bg: [value];
  --color-surface: [value];
  --color-text: [value];
  --color-text-secondary: [value];
  --color-text-muted: [value];
  --color-border: [value];
  --color-success: [value];
  --color-warning: [value];
  --color-error: [value];

  /* Typography */
  --font-family: '[font]', sans-serif;
  --font-size-h1: 36px;
  /* ... full scale */

  /* Spacing */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;

  /* Radius */
  --radius-card: [value];
  --radius-button: [value];
  --radius-badge: [value];

  /* Shadows */
  --shadow-sm: [value];
  --shadow-md: [value];
  --shadow-lg: [value];
}

Step 6: Generate Component Inventory

Based on the project type, list the components needed:

Dashboard / SaaS:

• Sidebar navigation, Top bar, Stat cards, Data tables, Charts, Modals, Forms, Toast notifications, Dropdown menus, Badges, Avatars, Breadcrumbs

Marketplace / E-commerce:

• Product cards, Search bar, Filters, Cart, Checkout form, Reviews, Ratings, Image galleries, Price displays, Category navigation

Mobile app:

• Bottom tab bar, Pull-to-refresh, Swipeable cards, Action sheets, Floating action button, List items, Empty states, Onboarding screens

Landing page:

• Hero section, Feature grid, Testimonials, Pricing table, CTA buttons, Footer, Navigation, Social proof

Save component inventory to .planning/design/system/components.md.

---

Design System Constraint for Code Generation

When generating UI code and design tokens already exist:

Read .planning/design/system/tokens.md or .planning/design-config.md FIRST. Your code MUST use these tokens. Do NOT use Tailwind defaults, generic colors, or made-up spacing.

Think of it like a jazz musician: the chord progression is set (tokens). Your job is to build beautifully within it. Don't change the key.

---

Checklist Before Delivering

• All 3 output formats generated (token doc, Tailwind, CSS variables)
• Colors have enough contrast (4.5:1 for text)
• Typography scale is consistent and readable
• Spacing uses the grid (no arbitrary values)
• Component inventory matches project type
• design-config.md updated (if it existed before)