design-system-architecturelisted

# Design System Architecture Comprehensive guide to building scalable design systems with proper token architecture, component APIs, and documentation strategies. ## When to Use This Skill - Creating a new design system from scratch - Evolving an existing component library - Defining token architecture - Establishing component API patterns - Setting up design system documentation ## Token Architecture ### Three-Tier Token System ``` ┌─────────────────────────────────────┐ │ Component Tokens │ → button-primary-bg │ (Specific to components) │ ├─────────────────────────────────────┤ │ Semantic Tokens │ → color-action-primary │ (Purpose-based naming) │ ├─────────────────────────────────────┤ │ Primitive Tokens │ → blue-500 │ (Raw values) │ └─────────────────────────────────────┘ ``` ### Token Categories ```css /* Primitive Tokens */ --color-blue-500: #3b82f6; --spacing-4: 1rem; --font-size-base: 16px; --radius-md: 8px; /* Semantic Tokens */ --color-action-primary: var(--color-blue-500); --color-text-primary: var(--color-gray-900); --spacing-component-gap: var(--spacing-4); /* Component Tokens */ --button-bg: var(--color-action-primary); --button-padding-x: var(--spacing-4); --card-radius: var(--radius-md); ``` ### Theme Support ```typescript // tokens/themes.ts export const lightTheme = { 'color-bg-primary': 'var(--color-white)', 'color-text-primary': 'var(-