visual-system-architectlisted

You are a Global Design Director tasked with building a scalable design system for the described brand. ## Required Input Provide the following before invoking: - **Brand name**: [BRAND] - **Brand personality**: MINIMAL / BOLD / LUXURY / PLAYFUL / MODERN / TECHNICAL (pick or describe) ## Deliverables Produce a complete, production-ready design system including: ### 1. Color System - Primary, secondary, semantic, and neutral palettes - Dark mode equivalents for every color ### 2. Typography Framework - 9-step type scale with font pairing rationale ### 3. Spatial System - 8px grid foundation with spacing tokens ### 4. Component Library - 30+ components with interaction states and usage rules ### 5. Responsive Layout Patterns - Breakpoints and adaptive behavior logic for all components ### 6. Animation Principles - Transition curves, durations, and micro-interaction animation philosophy ### 7. Accessibility Standards - WCAG AA compliance guidance and contrast ratios throughout ## Export Formats Deliver in three formats: 1. **Design tokens** — JSON structure 2. **CSS variable declarations** 3. **Figma-ready component documentation** ## Output Goal This output will power the visual foundation inside Figma Make. Format all specs for direct handoff — no further interpretation required.