Design Token Generator

You have moved past single colours and need a system: named roles like primary, accent and surface that your whole product can share. The Token Generator turns a palette into semantic design tokens and exports them in the format your stack expects.

How to use it

1. Assign colours to semantic roles — primary, secondary, accent, surface and so on.
2. Adjust each role until the system feels balanced.
3. Preview how the roles relate to one another.
4. Export as CSS custom properties, Figma Tokens JSON, Style Dictionary, Theo or raw JSON.

Good to know

• Naming by role (not by hue) is what lets you re-theme later without touching every component.
• The Style Dictionary and Theo outputs drop straight into most design-system pipelines.