What problem does it solve? Creating a consistent design system from scratch requires manually deriving color scales, type scales, spacing grids, and shadow values, which is slow and error-prone. This Skill automates token generation so designers and developers share a single source of truth. ## Core Features & Use Cases - Design Token Generation: Produces complete color palettes (primary, secondary, neutral, semantic), modular typography scales, 8pt spacing grids, borders, shadows, animations, breakpoints, and z-index scales from a single brand color. - Multiple Export Formats: Exports tokens as JSON, CSS custom properties, or SCSS for direct integration into codebases. - Style Variants: Supports modern, classic, and playful styles that adjust fonts, border radii, and shadows. - Use Case: A designer starting a new product runs the generator with the brand color #0066CC in modern style, then hands the exported CSS variables to developers for immediate use in the component library. ## Quick Start Run the design token generator script with your brand color, a style such as modern, and an output format such as css to produce a complete token set.
