What problem does it solve? Starting a new frontend project without a consistent visual system leads to hardcoded colors, inconsistent spacing, and painful dark mode retrofits. This Skill generates a complete design token foundation before any components are built. ## Core Features & Use Cases - Full Token Generation: Produces semantic color, spacing, typography, layout, motion, and breakpoint tokens as CSS custom properties, Tailwind config extensions, or CSS-in-JS theme files. - Dual Theme Support: Always generates both light and dark mode palettes using [data-theme="dark"] selectors and prefers-color-scheme media queries, with intentional dark values rather than simple inversion. - Existing System Awareness: Scans the codebase for existing tokens, Tailwind configs, and theme providers, then extends gaps instead of replacing working systems. - Use Case: Before building components for a new app, ask for tokens based on a design philosophy like Dieter Rams, and receive a tokens.css or updated tailwind.config.js that every subsequent component references. ## Quick Start Set up design tokens for this project based on a Scandinavian aesthetic with light and dark mode support.
