designsystemlisted

# Design System — Design System Architecture ## Activate When - User invokes `/godmode:designsystem` - User says "design system," "design tokens," "theme architecture," "Figma to code" - Creating a shared component library or establishing token architecture - Building theme support (light/dark, multi-brand) or Figma-to-code pipeline - Versioning/distributing a design system package or auditing for consistency ## Workflow ### Step 1: Assess Current State ``` DESIGN SYSTEM ASSESSMENT: Project: <name> Framework: <React/Vue/Angular/Svelte/Web Components> Existing system: <none/partial/mature> Token coverage: Colors/Spacing/Typography/Shadows/Borders/Motion — <defined/partial/none> each Theme support: <none/light-dark/multi-brand> Component count: <N> Storybook: <yes/no> Figma integration: <yes/no> Maturity: NONE | STARTER | GROWING | MATURE ``` ### Step 2: Token Architecture Three-tier architecture is mandatory: ``` TIER 1: PRIMITIVES (raw values) --primitive-blue-500: #3b82f6; TIER 2: SEMANTIC (meaning) --color-primary: var(--primitive-blue-500); TIER 3: COMPONENT (specific) --button-bg: var(--color-primary); ``` **Colors:** Neutral scale (50-950), brand scale, feedback (red/green/amber). Semantic: bg, surface, text-primary/secondary/tertiary, primary/hover/active, error/success/warning, border/border-strong/border-focus. **Spacing:** 4px base unit scale: 0, px, 0.5, 1, 1.5, 2, 3, 4, 5, 6, 8, 10, 12, 16, 20, 24 (in rem). **Typography:** Font fam