Builds a primitive → semantic → component design-token system with Figma variables and code (CSS custom properties / JSON) synced from day one — tier architecture, naming grammar, theming and dark-mode structure, and the canonical token files. Use when starting the styles for a new product or site, when asked to 'set up design tokens', 'create CSS variables', 'tokenize this', 'add dark mode', 'theme this', 'sync Figma variables with code', or 'name these tokens' — and whenever hex codes, px values, or font sizes are being hardcoded into components and need a system. Produces the canonical token files that apply-personal-brand and every UI-building skill consume.
