Ui Design System

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

2. Generate tokens using script

   bash

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

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

4. Export in target format

   bash

   # CSS custom propertiespython scripts/design_token_generator.py "#0066CC" modern css > design-tokens.css
   # SCSS variablespython scripts/design_token_generator.py "#0066CC" modern scss > _design-tokens.scss
   # JSON for Figma/toolingpython scripts/design_token_generator.py "#0066CC" modern json > design-tokens.json

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

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

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

3. Define variant patterns

   Size variants:

   sm: height 32px, paddingX 12px, fontSize 14pxmd: height 40px, paddingX 16px, fontSize 16pxlg: height 48px, paddingX 20px, fontSize 18px

   Color variants:

   primary: background primary-500, text whitesecondary: background neutral-100, text neutral-900ghost: background transparent, text neutral-700

4. Document component API

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

5. 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

2. 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);

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

4. 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 projectspython scripts/design_token_generator.py "#0066CC" modern css
   # For SCSS projectspython scripts/design_token_generator.py "#0066CC" modern scss
   # For JavaScript/TypeScriptpython scripts/design_token_generator.py "#0066CC" modern json

2. Prepare framework integration

   React + CSS Variables:

   tsx

   import './design-tokens.css';
   <button className="btn btn-primary">Click</button>

   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']};`;

3. Sync with Figma

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

4. Handoff checklist

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

5. 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 outputpython scripts/design_token_generator.py "#8B4513" classic css
# Playful style summary viewpython 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