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. 1. Identify brand color and style

- Brand primary color (hex format) - Style preference: modern | classic | INLINECODE2

1. 2. Generate tokens using script

CODEBLOCK0

1. 3. 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. 4. Export in target format

CODEBLOCK1

1. 5. 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. 1. Define component hierarchy

- Atoms: Button, Input, Icon, Label, Badge - Molecules: FormField, SearchBar, Card, ListItem - Organisms: Header, Footer, DataTable, Modal - Templates: DashboardLayout, AuthLayout

1. 2. 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. 3. Define variant patterns

Size variants:
CODEBLOCK2

Color variants:
CODEBLOCK3

1. 4. Document component API

- Props interface with types - Variant options - State handling (hover, active, focus, disabled) - Accessibility requirements

1. 5. Reference: See INLINECODE3

---

Workflow 3: Responsive Design

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

Steps:

1. 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. 2. Calculate fluid typography

Formula: INLINECODE4

CODEBLOCK4

Pre-calculated scales:
CODEBLOCK5

1. 3. 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. 4. Reference: See INLINECODE5

---

Workflow 4: Developer Handoff

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

Steps:

1. 1. Export tokens in required formats

CODEBLOCK6

1. 2. Prepare framework integration

React + CSS Variables:
CODEBLOCK7

Tailwind Config:
CODEBLOCK8

styled-components:
CODEBLOCK9

1. 3. Sync with Figma

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

1. 4. Handoff checklist

- [ ] Token files added to project - [ ] Build pipeline configured - [ ] Theme/CSS variables imported - [ ] Component library aligned - [ ] Documentation generated

1. 5. Reference: See INLINECODE6

---

Tool Reference

designtokengenerator.py

Generates complete design token system from brand color.

Argument	Values	Default	Description
brand_color	Hex color	#0066CC	Primary brand color
style

modern, classic, playful | modern | Design style preset |
| format | json, css, scss, summary | json | Output format |

Examples:

CODEBLOCK10

Output Categories:

Category	Description	Key Values
colors	Color palettes	primary, secondary, neutral, semantic, surface
typography

Font system | fontFamily, fontSize, fontWeight, lineHeight |
| spacing | 8pt grid | 0-64 scale, semantic (xs-3xl) |
| sizing | Component sizes | container, button, input, icon |
| borders | Border values | radius (per style), width |
| shadows | Shadow styles | none through 2xl, inner |
| animation | Motion tokens | duration, easing, keyframes |
| breakpoints | Responsive | xs, sm, md, lg, xl, 2xl |
| z-index | Layer system | base through notification |

---

Quick Reference Tables

Color Scale Generation

Step	Brightness	Saturation	Use Case
50	95% fixed	30%	Subtle backgrounds
100

95% fixed | 38% | Light backgrounds | | 200 | 95% fixed | 46% | Hover states | | 300 | 95% fixed | 54% | Borders | | 400 | 95% fixed | 62% | Disabled states | | 500 | Original | 70% | Base/default color | | 600 | Original × 0.8 | 78% | Hover (dark) | | 700 | Original × 0.6 | 86% | Active states | | 800 | Original × 0.4 | 94% | Text | | 900 | Original × 0.2 | 100% | Headings |

Typography Scale (1.25x Ratio)

Size	Value	Calculation
xs	10px	16 ÷ 1.25²
sm

13px | 16 ÷ 1.25¹ | | base | 16px | Base | | lg | 20px | 16 × 1.25¹ | | xl | 25px | 16 × 1.25² | | 2xl | 31px | 16 × 1.25³ | | 3xl | 39px | 16 × 1.25⁴ | | 4xl | 49px | 16 × 1.25⁵ | | 5xl | 61px | 16 × 1.25⁶ |

WCAG Contrast Requirements

Level	Normal Text	Large Text
AA	4.5:1	3:1
AAA

7:1 | 4.5:1 |

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

Style Presets

Aspect	Modern	Classic	Playful
Font Sans	Inter	Helvetica	Poppins
Font Mono

Fira Code | Courier | Source Code Pro | | Radius Default | 8px | 4px | 16px | | Shadows | Layered, subtle | Single layer | Soft, pronounced |

---

Knowledge Base

Detailed reference guides in references/:

File	Content
INLINECODE8	Color algorithms, HSV space, WCAG contrast, type scales
INLINECODE9

Atomic design, naming conventions, props patterns |
| responsive-calculations.md | Breakpoints, fluid typography, grid systems |
| developer-handoff.md | Export formats, framework setup, Figma sync |

---

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