Design Token Generator

What Design Tokens Are

Design tokens are the named values a brand is built from: colours, font sizes, line heights and spacing. Instead of a developer typing #2e7d5b in forty places, the code uses --color-brand-600, and the value lives in one file. Change the token and every button, link and badge follows.

Tokens are what turn a brand guideline from a PDF into something a website or an app can actually use. They also stop drift. When every colour on a site has to come from a named list, nobody can quietly introduce a fourth blue.

What This Generator Builds

Colour Ramps

From your brand colour the tool builds two ramps of eleven steps each, named 50 to 950: a brand ramp and a neutral ramp. You choose the method:

• OKLCH (the default). OKLCH is a colour space where equal changes in lightness look equal to the eye. The tool sets fixed lightness targets for each step, keeps your hue, tapers chroma toward the lightest and darkest steps, and pulls any colour outside the sRGB range back inside it by reducing chroma until it fits.
• HSL. The familiar hue, saturation and lightness model, stepped on lightness. It is simpler but less even: yellows tend to look too light and blues too dark at the same HSL lightness.

In both methods your exact brand colour replaces the step closest to it in lightness, so the ramp always contains the colour on your logo. The neutral ramp is either tinted with your brand hue, cool, true grey or warm.

A Job For Every Step

Each colour step gets a job based on its WCAG 2.x contrast ratio against white: 7:1 or more is Text, 4.5:1 or more is Muted text, 3:1 or more is Border (input outlines, icons, focus rings, under WCAG 1.4.11), and anything lower is Fill. Your brand step is marked Brand. From those jobs the tool picks six role tokens: body text, secondary text, interface borders, surface, brand fill and link colour. Role tokens are what components should use, because they let you swap a step later without touching a component.

Type Scale

A modular scale multiplies the base size by a fixed ratio for each step up and divides by it for each step down. With a 16px base and a 1.25 ratio, the steps run 12.8, 16, 20, 25, 31.25 and so on. Sizes are given in px and in rem, with rem assuming the browser default 16px root so the scale respects a reader who has enlarged their text.

Line heights follow a simple rule, set by each size relative to the base: body and smaller sizes get 1.5, up to one and a half times the base gets 1.4, up to double gets 1.3, up to triple gets 1.2, and display sizes above that get 1.1. Large headings at 1.5 look loose and disconnected; small text at 1.1 is hard to read.

Spacing Scale

Spacing is a base unit multiplied by a fixed sequence: 1, 2, 3, 4, 5, 6, 8, 10, 12, 16 and up. Token names are the multiplier, so with a 4px base space-4 is 16px. The gaps widen as the steps grow, because the difference between 4px and 8px matters, and the difference between 64px and 68px does not.

The Three Output Formats

• CSS custom properties on :root, ready to paste into any stylesheet, WordPress theme or Elementor custom CSS.
• JSON in the W3C Design Tokens Community Group format, with $value, $type and $description on every token and role tokens written as aliases such as {color.neutral.900}. It uses string values for colours and dimensions, which is what most token tools read today. Later revisions of the specification describe some values as objects, so check what your pipeline expects.
• Tailwind as a theme.extend object for Tailwind v3. Tailwind v4 is configured in CSS, so on v4 paste the CSS variables into an @theme block instead.

Mistakes To Avoid

• Using the brand colour for small text because it is the brand colour. Check its job. If it says Fill or Border, links and labels need a darker step.
• Naming tokens by appearance in components. A button should use --color-brand or --color-link, not --color-brand-600, so a rebrand is a token change and not a code search.
• Too many type steps. Most sites need six to eight sizes. Every extra step is a decision a designer has to make on every page.
• Ignoring dark mode. Jobs here assume a white page. On a dark theme the ramp runs the other way; test the pairs with the Contrast And Ramp Checker.

The Agency Angle

A token file is the most useful thing a brand project can hand to a developer, and most brand projects never deliver one. Wise Media ships tokens with every identity it builds, so the website, the app and the social templates all read from the same source. Generate a starting set here, adjust it by eye, and treat it as the first page of the brand system rather than an afterthought.