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
- Takes project context (what, who, industry, personality)
- Generates a complete design token set
- Outputs in 3 formats: token reference doc, Tailwind config, CSS variables
- 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):
- What are you building? (dashboard, SaaS, marketplace, mobile app, landing page, etc.)
- Who uses it? (developers, business users, consumers, admins)
- 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
- Light, dark, or both?
- Any brand colors already decided? (if yes, use those as the foundation)
- 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)