UI Design System

Generate design tokens, create color palettes, calculate typography scales, build component systems, and prepare developer handoff documentation.

Table of Contents

• Trigger Terms
• Workflows
• Workflow 1: Generate Design Tokens
• Workflow 2: Create Component System
• Workflow 3: Responsive Design
• Workflow 4: Developer Handoff
• Tool Reference
• Quick Reference Tables
• Knowledge Base

Trigger Terms

Use this skill when you need to:

• "generate design tokens"
• "create color palette"
• "build typography scale"
• "calculate spacing system"
• "create design system"
• "generate CSS variables"
• "export SCSS tokens"
• "set up component architecture"
• "document component library"
• "calculate responsive breakpoints"
• "prepare developer handoff"
• "convert brand color to palette"
• "check WCAG contrast"
• "build 8pt grid system"

Workflows

Workflow 1: Generate Design Tokens

Situation: You have a brand color and need a complete design token system.

Steps:

1. Identify brand color and style
• Brand primary color (hex format)
• Style preference: modern | classic | playful

1. Generate tokens using script

```bash

python scripts/design_token_generator.py "#0066CC" modern json

```

1. Review generated categories
• Colors: primary, secondary, neutral, semantic, surface
• Typography: fontFamily, fontSize, fontWeight, lineHeight
• Spacing: 8pt grid-based scale (0-64)
• Borders: radius, width
• Shadows: none through 2xl
• Animation: duration, easing
• Breakpoints: xs through 2xl

1. Export in target format

```bash

# CSS custom properties

python scripts/design_token_generator.py "#0066CC" modern css > design-tokens.css

# SCSS variables

python scripts/design_token_generator.py "#0066CC" modern scss > _design-tokens.scss

# JSON for Figma/tooling

python scripts/design_token_generator.py "#0066CC" modern json > design-tokens.json

```

1. Validate accessibility
• Check color contrast meets WCAG AA (4.5:1 normal, 3:1 large text)
• Verify semantic colors have contrast colors defined

Workflow 2: Create Component System

Situation: You need to structure a component library using design tokens.

Steps:

1. Define component hierarchy
• Atoms: Button, Input, Icon, Label, Badge
• Molecules: FormField, SearchBar, Card, ListItem
• Organisms: Header, Footer, DataTable, Modal
• Templates: DashboardLayout, AuthLayout

1. Map tokens to components

| Component | Tokens Used |

|-----------|-------------|

| Button | colors, sizing, borders, shadows, typography |

| Input | colors, sizing, borders, spacing |

| Card | colors, borders, shadows, spacing |

| Modal | colors, shadows, spacing, z-index, animation |

1. Define variant patterns

Size variants:

```

sm: height 32px, paddingX 12px, fontSize 14px

md: height 40px, paddingX 16px, fontSize 16px

lg: height 48px, paddingX 20px, fontSize 18px

```

Color variants:

```

primary: background primary-500, text white

secondary: background neutral-100, text neutral-900

ghost: background transparent, text neutral-700

```

1. Document component API
• Props interface with types
• Variant options
• State handling (hover, active, focus, disabled)
• Accessibility requirements

1. Reference: See references/component-architecture.md

Workflow 3: Responsive Design

Situation: You need breakpoints, fluid typography, or responsive spacing.

Steps:

1. Define breakpoints

| Name | Width | Target |

|------|-------|--------|

| xs | 0 | Small phones |

| sm | 480px | Large phones |

| md | 640px | Tablets |

| lg | 768px | Small laptops |

| xl | 1024px | Desktops |

| 2xl | 1280px | Large screens |

1. Calculate fluid typography

Formula: clamp(min, preferred, max)

```css

/ 16px to 24px between 320px and 1200px viewport /

font-size: clamp(1rem, 0.5rem + 2vw, 1.5rem);

```

Pre-calculated scales:

```css

--fluid-h1: clamp(2rem, 1rem + 3.6vw, 4rem);

--fluid-h2: clamp(1.75rem, 1rem + 2.3vw, 3rem);

--fluid-h3: clamp(1.5rem, 1rem + 1.4vw, 2.25rem);

--fluid-body: clamp(1rem, 0.95rem + 0.2vw, 1.125rem);

```

1. Set up responsive spacing

| Token | Mobile | Tablet | Desktop |

|-------|--------|--------|---------|

| --space-md | 12px | 16px | 16px |

| --space-lg | 16px | 24px | 32px |

| --space-xl | 24px | 32px | 48px |

| --space-section | 48px | 80px | 120px |

1. Reference: See references/responsive-calculations.md

Workflow 4: Developer Handoff

Situation: You need to hand off design tokens to development team.

Steps:

1. Export tokens in required formats

```bash

# For CSS projects

python scripts/design_token_generator.py "#0066CC" modern css

# For SCSS projects

python scripts/design_token_generator.py "#0066CC" modern scss

# For JavaScript/TypeScript

python scripts/design_token_generator.py "#0066CC" modern json

```

1. Prepare framework integration

React + CSS Variables:

```tsx

import './design-tokens.css';

Click

```

Tailwind Config:

```javascript

const tokens = require('./design-tokens.json');

module.exports = {

theme: {

colors: tokens.colors,

fontFamily: tokens.typography.fontFamily

}

};

```

styled-components:

```typescript

import tokens from './design-tokens.json';

const Button = styled.button`

background: ${tokens.colors.primary['500']};

padding: ${tokens.spacing['2']} ${tokens.spacing['4']};

`;

```

1. Sync with Figma
• Install Tokens Studio plugin
• Import design-tokens.json
• Tokens sync automatically with Figma styles

1. Handoff checklist
• [ ] Token files added to project
• [ ] Build pipeline configured
• [ ] Theme/CSS variables imported
• [ ] Component library aligned
• [ ] Documentation generated

1. Reference: See references/developer-handoff.md

Tool Reference

design_token_generator.py

Generates complete design token system from brand color.

Examples:

# Generate JSON tokens (default)
python scripts/design_token_generator.py "#0066CC"

# Classic style with CSS output
python scripts/design_token_generator.py "#8B4513" classic css

# Playful style summary view
python scripts/design_token_generator.py "#FF6B6B" playful summary

Output Categories:

Quick Reference Tables

Color Scale Generation

Typography Scale (1.25x Ratio)

WCAG Contrast Requirements

Large text: ≥18pt regular or ≥14pt bold

Style Presets

Knowledge Base

Detailed reference guides in references/:

Validation Checklist

Token Generation

• [ ] Brand color provided in hex format
• [ ] Style matches project requirements
• [ ] All token categories generated
• [ ] Semantic colors include contrast values

Component System

• [ ] All sizes implemented (sm, md, lg)
• [ ] All variants implemented (primary, secondary, ghost)
• [ ] All states working (hover, active, focus, disabled)
• [ ] Uses only design tokens (no hardcoded values)

Accessibility

• [ ] Color contrast meets WCAG AA
• [ ] Focus indicators visible
• [ ] Touch targets ≥ 44×44px
• [ ] Semantic HTML elements used

Developer Handoff

• [ ] Tokens exported in required format
• [ ] Framework integration documented
• [ ] Design tool synced
• [ ] Component documentation complete