design-system

# Design System Token architecture, component specifications, systematic design, slide generation. ## When to Use - Design token creation - Component state definitions - CSS variable systems - Spacing/typography scales - Design-to-code handoff - Tailwind theme configuration - **Slide/presentation generation** ## Token Architecture Load: `references/token-architecture.md` ### Three-Layer Structure ``` Primitive (raw values) ↓ Semantic (purpose aliases) ↓ Component (component-specific) ``` **Example:** ```css /* Primitive */ --color-blue-600: #2563EB; /* Semantic */ --color-primary: var(--color-blue-600); /* Component */ --button-bg: var(--color-primary); ``` ## Quick Start **Generate tokens:** ```bash node scripts/generate-tokens.cjs --config tokens.json -o tokens.css ``` **Validate usage:** ```bash node scripts/validate-tokens.cjs --dir src/ ``` ## References | Topic | File | |-------|------| | Token Architecture | `references/token-architecture.md` | | Primitive Tokens | `references/primitive-tokens.md` | | Semantic Tokens | `references/semantic-tokens.md` | | Component Tokens | `references/component-tokens.md` | | Component Specs | `references/component-specs.md` | | States & Variants | `references/states-and-variants.md` | | Tailwind Integration | `references/tailwind-integration.md` | ## Component Spec Pattern | Property | Default | Hover | Active | Disabled | |----------|---------|-------|--------|----------| | Background | primary | primar...