Design Token System Generator

The problem

Manually building a design system foundation is repetitive and error-prone. Developers often struggle to extract consistent tokens from legacy CSS or translate brand colors into accessible, multi-mode palettes.

What it does

• Generates 11-stop OKLCH color palettes from as little as one hex code.
• Creates WCAG AA compliant dark mode scopes automatically.
• Produces production-ready CSS variables, Tailwind configs (v3/v4), and W3C-standard JSON.
• Scans existing projects to map hardcoded values to a semantic token system.
• Calculates typography scales, spacing units, and border-radius systems based on configurable ratios.

Frameworks & tools

Tailwind CSS v3 and v4, Style Dictionary, Figma Tokens, and any project using CSS Custom Properties.

Why this beats prompting it yourself

Standard prompts often fail at complex color math like OKLCH lightness anchoring or WCAG contrast validation. This skill uses a multi-step normalization process to ensure every generated token is technically valid and accessible, preventing the "hallucinated color" problem common in basic chats.

Use cases

• Bootstrapping a new frontend project from a single brand color.
• Refactoring a legacy CSS codebase into a modern, themeable design system.
• Generating a dark mode theme for an existing application.
• Standardizing design handoffs using the W3C DTCG JSON format.

Known limitations

Does not support CSS color functions like color-mix or relative references to Tailwind classes as input values.