Skip to content
Contrast checkerOpen the editor

Create your design tokens.Export them to Figma, your favourite AI design tool, or as CSS in minutes.

Start from a finished design rather than an empty palette. 14 of them, each built against a real reference. Tune what you want, watch it land on a full page of real components, and leave with a token file every tool in your stack already reads, plus a WCAG audit of every pairing you just made.

Create your tokensSee what you get
TokenStyles, live editor

Why this one

The only token generator that ships a WCAG audit.

Every export includes a contrast report: each default pairing measured against WCAG 2.1, in both light and dark, with the ratio and the grade. Translucent surfaces are composited over the page first, so the numbers are what actually renders rather than what the hex codes suggest.

It is not a badge. It is a dated document you can hand to a client, attach to a procurement pack, or keep as the record that the foundations were checked before anything got built on them.

Try the measurement on your own colours — the same engine, free, no account.

  • Every one of the 14 themes passes WCAG AA on its default state, and most clear AAA
  • Measured in both modes, so a dark counterpart cannot quietly fail
  • Alpha is composited before measuring, which catches the failures a hex-only checker misses
  • Re-run it any time you change a colour, before you ship rather than after

What you control

Everything a system needs before the components

Colour, type, spacing and shape, the layer every component sits on, and the one that has to be right before anything else can be. Decided here in one pass instead of accumulated a screen at a time.

Start from a real design, not a blank page

14 starting points, each built against a different reference and deliberately unlike the others, an editorial serif, an acid-lime industrial, a soft consumer brand, a restrained luxury mark. Half light, half dark.

  • Every theme’s default state meets WCAG AA, most clear AAA
  • Each ships a matching light or dark counterpart
  • Change anything, the theme is a starting point, not a lock-in

A type scale, not a font dropdown

Six named styles, headline through footnote, each with its own size, weight, line height and letter spacing. Set them once and every heading on the preview updates as you drag.

  • Pair a display and a body face from the full Google Fonts range
  • Per-style leading and tracking, not one global multiplier
  • Editable sample copy so you judge it on real sentences

Spacing that stays on a grid, buttons that stay a set

One base unit drives a named spacing ramp, and everything, section rhythm, card padding, component gaps, the column grid, is a multiple of it. Primary and secondary buttons are tuned as a matched pair, fill included.

  • Base unit, section rhythm, container and card padding, grid gutters
  • Corner radius, border weight, shadows and surface effects
  • Component tokens for inputs, cards, badges and nav
  • Primary and secondary buttons tuned independently, fill and stroke as well as shape

One token set, 10 formats

The same values, written the way each tool expects to read them. Import the Figma file straight into Variables, drop the CSS into a project, or hand the token file to an AI tool as the source of truth for styling.

Design tokensCSSTailwind v4Tailwind v3Figma VariablesTokens Studioshadcn/uiStyle DictionaryContrast reportAI brief

Where this stops

The first version of a system, not the last

TokenStyles gets a coherent token layer out of your head and into a file. It doesn’t version it, branch it, sync it to Git or keep a team of designers and engineers in step, that’s what design-system platforms are for, and when you need one you’ll know. Until then, paying a monthly subscription to manage a system you haven’t built yet is the wrong end of the problem.

The file you export is plain text on your machine. It keeps working whether or not this site does, and nothing here has to be renewed.

How it works

Three steps. One sitting. Easy.

Pick a theme

Choose a starting point that already looks finished. The full page preview renders it immediately, nav, hero, cards, tables, forms, the lot.

Make it yours

Adjust palette, type, spacing, buttons and effects. Every change lands in the preview as you make it, with contrast checked as you go.

Download the tokens

Look at any format before you buy, then download all 10 in one zip. You don’t have to know yet which one you’ll need.

Pricing

$19 for each set of design tokens.

The editor is free to use. You pay once, when you download, and every purchase includes all 10 formats. Design-system platforms start around $200 a month and expect you to arrive with a system already built, this is what you buy before you need one of those.

$19per export
  • Design tokens, CSS, Tailwind v4, Tailwind v3, Figma Variables, Tokens Studio, shadcn/ui, Style Dictionary, Contrast report, AI brief
  • Yours to use commercially, on any number of projects.
  • No subscription. No seats. No renewal.
  • No account required.
Create your tokens

Questions

Before you start

Does TokenStyles check accessibility?
Yes. Every export includes a WCAG 2.1 contrast report measuring each default pairing in both light and dark modes, with the ratio and the AA/AAA grade. Translucent surfaces are composited over the page colour before measuring, so the figures reflect what actually renders. All themes pass WCAG AA on their default state and most clear AAA.
What file do I get from TokenStyles?
All 10 formats, in a single zip: Design tokens, CSS, Tailwind v4, Tailwind v3, Figma Variables, Tokens Studio, shadcn/ui, Style Dictionary, Contrast report, AI brief. The same design, written the way each tool expects to read it, so you do not have to know up front which one you will need.
Can I use the export with Figma or an AI coding tool?
Yes. The Figma Variables export imports straight into Figma, and the W3C design tokens and CSS exports are plain text files you can hand to Cursor, Claude, or any AI tool as the source of truth for a project’s styling.
How much does TokenStyles cost?
Using the editor is free, themes, palette, type scale, spacing and effects, for as long as you like. You pay $19 once when you export, and that download includes every format. There is no subscription, no seats and no renewal.
How is TokenStyles different from a design system platform?
Design system platforms manage a system you already have, versioning, branching, Git sync, keeping a team of designers and engineers aligned, and are priced as monthly subscriptions per seat. TokenStyles does the step before that: producing the first coherent token layer, from designed starting points, as a one-off purchase. It is where a system begins rather than where it is maintained.
Do I need an account to use TokenStyles?
No. Open the editor and start designing, your work is saved in your own browser, not in an account. It is sent to our server only when you preview or download an export, so the file can be generated, and is not kept afterwards.

Your token layer is ten minutes away

Open the editor, start from a theme close to what you want, and export a file you can hand to a designer, a developer, or an AI.

Open TokenStyles