ONE DESIGN LANGUAGE. EVERY THEME.

Design Tokens & Theme Workbench

Full workspace

Build a reusable design system with typed tokens, light and dark themes, references, component previews, palette and type scales, contrast checks and CSS or JSON exports.

Typed values & referencesLight / dark UI previewCSS · JSON · JavaScript

PROJECT NAME

Open

From an idea to a usable result

Choose Aurora or Tidal to explore two complete light/dark themes. Select a token group or filter the token table.
Edit base values and add theme overrides. Reference another token with an exact {token.path} alias.
Connect tokens to preview roles, inspect the component preview, and generate a shade palette or modular type scale.
Resolve Review issues, compare themes and export CSS variables, nested token JSON, a JavaScript module or the editable project.

What to expect

Up to 500 tokens and 12 themes. Supported scalar types: opaque six-digit hex color, dimension, number, font family, font weight, duration and string. Imports support a documented subset of nested $type/$value tokens or simple CSS declarations; this is not a full token-standard or CSS parser. Contrast checks apply to opaque sRGB pairs, not complete accessibility compliance. Projects: 8 MiB.

Processing happens in your browser. Save a project before closing the page. Optional drafts stay in this browser. Public pages include advertising and optional analytics under our privacy policy.

Using Design Tokens & Theme Workbench

Build a reusable design system with typed tokens, light and dark themes, references, component previews, palette and type scales, contrast checks and CSS or JSON exports.

Choose Aurora or Tidal to explore two complete light/dark themes. Select a token group or filter the token table.
Edit base values and add theme overrides. Reference another token with an exact {token.path} alias.
Connect tokens to preview roles, inspect the component preview, and generate a shade palette or modular type scale.
Resolve Review issues, compare themes and export CSS variables, nested token JSON, a JavaScript module or the editable project.

Example

Choose Aurora or Tidal to explore two complete light/dark themes. Select a token group or filter the token table.

Questions & answers

How do references work across themes?

Use an exact {token.path} reference to another token of the same type. It resolves through the active theme, so an overridden source color updates aliases too.

Can I import existing tokens?

Yes. Import nested objects with supported $type and $value fields, or extract simple CSS variables. Composite values, remote references and complex CSS rules are outside the importer.

Does the contrast result certify my website?

No. It checks selected opaque color pairs using relative luminance. Actual text sizes, states, focus indicators and other accessibility requirements still need review.

Can I export every theme at once?

The CSS export includes a root theme plus selectors for the other theme IDs. The JavaScript export includes resolved theme values. Nested token JSON exports the active theme.