What problem does it solve? Starting a new product or unifying an inconsistent UI often results in scattered one-off values and generic-looking interfaces. This Skill codifies a brand into a complete token layer and component language so every downstream page looks intentional and consistent. ## Core Features & Use Cases - Token Generation: Builds color ramps with semantic tokens and verified WCAG AA contrast, modular type scales, spacing, radius, elevation, and motion tokens, including dark mode and reduced-motion support. - Component Specifications: Defines variants, states, sizing, and accessibility notes for core components like buttons, inputs, cards, navs, and modals, all expressed in tokens. - Real File Exports: Produces a Tailwind config extension, a tokens.css file with CSS custom properties for light and dark modes, and a design-system.md usage doc with do/don't examples. - Use Case: Given a brand brief describing a warm, editorial personality, generate the full token set and component specs, then hand off to a landing page builder that consumes those tokens. ## Quick Start Generate a complete design system with color tokens, type scale, and component specs from my brand brief, exported as a Tailwind config and CSS variables.
