On-brand design tokens in seconds
A design token set is the single source of truth for the visual decisions in a design system: which blues, which font sizes, which spacing steps. This tool generates a complete, internally consistent set following the W3C Design Tokens (DTCG) format, so you can prototype a system or seed a tokens pipeline without hand-writing JSON.
How it works
Each token group is built from a single integer seed using a small mulberry32 pseudo-random generator, so output is fully reproducible.
- Color ramps are generated in HSL. A base hue comes from the seed; the accent hue is offset by roughly 150 to 210 degrees so the two stay complementary. Each ramp has 10 lightness steps from
100(light) to1000(dark), converted to hex. - Type scale uses a 1.25 modular ratio on a 16px base:
base * 1.25^(i-2). - Spacing and border-radius use a 4px-based scale.
- Shadows emit a structured DTCG shadow object with color, offset, blur, and spread.
Each leaf token is an object such as:
{ "$value": "#2f6fed", "$type": "color" }What the DTCG format means
The W3C Design Tokens Community Group (DTCG) draft format defines a standard JSON shape for tokens so that tooling from different vendors can read the same file. Each token looks like this:
{
"color": {
"primary": {
"500": { "$value": "#2f6fed", "$type": "color" }
}
}
}The $value field holds the actual value; $type tells tooling how to interpret it (color, dimension, shadow, etc.). Token transformers like Style Dictionary read this shape and output CSS variables, Sass maps, iOS Swift constants, Android XML, or any other format your platform needs.
Using the seed for reproducibility
The seed is an integer that fully determines the generated set. Two important uses:
- Brand consistency across sessions: Note the seed when you find a palette you like. Entering the same seed on any device or browser will reproduce the identical token set.
- Testing a token pipeline: Use a fixed seed to produce a known, stable input for integration tests of your Style Dictionary config or design-token build step.
Token groups and their intended roles
| Group | Tokens | Use in a component |
|---|---|---|
| Color primary | 10 lightness steps (100–1000) | Button background, link text, focus ring |
| Color accent | 10 lightness steps | Badges, callouts, illustration accents |
| Typography | 7 size steps, weight, line-height | Heading and body text |
| Spacing | 8 steps on a 4px base | Padding, margin, gap |
| Border-radius | 4 steps | Cards, buttons, avatars |
| Shadow | 3 elevation levels | Cards, modals, tooltips |
Tips
- Use the same seed across runs to keep a brand consistent between mockups.
- The output is a draft DTCG document, so it transforms cleanly with tools like Style Dictionary into CSS variables or platform formats.
- Always check the rendered ramp for contrast before shipping; the generator aims for harmony, not WCAG guarantees.
- The 1.25 modular scale for typography is a popular choice for small-to-medium product UIs. If you need a more dramatic scale for a marketing site, consider scaling the base values up after export.