Design Tokens

What it does

This skill generates design tokens, including type scales, color palettes, spacing systems, and dark mode derivations, using mathematical formulas rather than subjective guesswork. It ensures WCAG contrast checking for accessibility, creates systematic spacing grids, and produces production-ready CSS custom properties or Tailwind configurations in JSON format. The goal is to create a consistent and accessible design system based on defined ratios and principles.

When to use it

• Setting up a new project's design system.
• Requesting type scales, color palettes, or spacing systems.
• Needing WCAG-compliant color combinations.
• Generating dark mode colors from an existing light palette.
• Building a Tailwind configuration or CSS custom properties.
• When you ask for "design tokens" or "theme setup".

Key capabilities

• Generates type scales based on defined ratios (Minor Second, Major Second, Minor Third, etc.).
• Creates color palettes with WCAG AA contrast checking.
• Derives dark mode colors from light palettes.
• Produces systematic spacing grids.
• Outputs design tokens as CSS custom properties, Tailwind config, or JSON tokens.

Example prompts

• "Generate a type scale using a Major Second ratio."
• "Create a color palette with WCAG AA contrast for a primary brand color of #007bff."
• "Give me a spacing system based on a base unit of 8px and a Minor Third ratio."

Tips & gotchas

• The skill relies on mathematical formulas and ratios; understand these principles to effectively use it.
• Output is designed for production environments, so consider how the generated tokens will be integrated into your project's build process.
• Ratios influence the visual hierarchy; choose them carefully based on desired aesthetic.