design-system-architecturelisted

# Design System Architecture ## Purpose Design a token-based design system architecture, including primitive, semantic, and component token hierarchy, theming strategy (dark/light mode), and cross-platform implementation plan. ## Scope Constraints Reads existing styling code, configuration files, and design documentation for analysis. Does not modify source files or push changes. Does not create or update Figma libraries or Storybook instances directly. ## Inputs - Existing styling approach (Tailwind, CSS modules, styled-components, etc.) - Target platforms (web, iOS, Android, cross-platform) - Brand guidelines or existing color palette - Current component inventory - Theming requirements (dark mode, high contrast, brand variations) ## Input Sanitization No user-provided values are used in commands or file paths. All inputs are treated as read-only analysis targets. ## Procedure ### Progress Checklist - [ ] Step 1: Audit current state - [ ] Step 2: Define primitive tokens - [ ] Step 3: Define semantic tokens - [ ] Step 4: Define component tokens - [ ] Step 5: Design theme architecture - [ ] Step 6: Cross-platform strategy ### Step 1: Audit Current State Review the existing styling approach: - How are colors, spacing, and typography defined today? - Are there hardcoded values scattered across components? - Is there an existing design system or component library? - What CSS methodology is used (utility-first, BEM, CSS-in-JS)? ### Step 2: Define Primitive Tokens Es