Start from a finished design rather than an empty palette. 14 of them, each built against a real reference and checked for contrast. 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.
No account. No install. Your work saves in your browser.
What you control
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.
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.
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.
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.
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.
Where this stops
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
Choose a starting point that already looks finished. The full page preview renders it immediately — nav, hero, cards, tables, forms, the lot.
Adjust palette, type, spacing, buttons and effects. Every change lands in the preview as you make it, with contrast checked as you go.
Preview the exact file first, then copy it or download it in whichever format your next tool reads.
Pricing
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.
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.