CSS variables generator — colour, spacing, type scale and radius tokens

How to use the CSS variables generator

1. Optionally enter a Prefix, such as ds.
2. List Colours (name: value), one per line, for example primary: #2563eb.
3. Set the Spacing base (px) and the Spacing multiples, such as 0, 1, 2, 3, 4, 6, 8, 12, 16.
4. Set the Base font size (px), the Type scale ratio (1.05–2), Steps above base (up to 8) and Steps below base (up to 2).
5. Add Radii (name: px), choose Units (rem or px) and copy the result.

What it does and when to use it

Design tokens are the named values a design is built from: colours, spacing steps, text sizes and radii. As CSS custom properties, a redesign changes a few lines instead of hundreds of rules, and sizes calculated from a base and a ratio stay consistent.

Use it when you start a stylesheet, or when a project has grown many slightly different paddings and font sizes. If you use Tailwind, the Tailwind config generator puts the same kind of tokens into a v4 @theme block. A clean base for the tokens comes from the CSS reset generator, and the CSS minifier shrinks the final file. MDN explains how custom properties inherit and cascade.

How it works

• Colours are copied as written into --color-<name>. Names are lower-cased, and other characters become hyphens.
• Spacing: each multiple × base gives --space-<multiple>. In rem mode the pixel value is divided by 16; 0 stays 0.
• Type scale: size = base × ratioⁿ, named xs, sm, base, lg, xl, 2xl and upward. Values are rounded to 4 decimal places.
• Radii: plain numbers are treated as pixels and converted; values with a unit, such as 9999px, are kept.

Setting the spacing base or the base font size to 0 leaves that group out.

Worked examples

The default tokens. Four colours, a 4px spacing grid and a 1.25 scale on 16px:

  /* Type scale — 16px × 1.25^n */
  --text-xs: 0.64rem;
  --text-sm: 0.8rem;
  --text-base: 1rem;
  --text-lg: 1.25rem;
  --text-xl: 1.5625rem;

The scale continues to --text-3xl: 2.4414rem;, and spacing runs from --space-0: 0; to --space-16: 4rem;.

A prefixed pixel grid. Prefix ds, units px, no colours, base font size 0, multiples 1, 2, 4. The output holds --ds-space-1: 4px;, --ds-space-2: 8px;, --ds-space-4: 16px; and the three radii, with no type scale.

A bold scale. Ratio 1.5, two steps up and one down, colours, spacing and radii cleared. Only four sizes remain: --text-sm: 0.6667rem;, --text-base: 1rem;, --text-lg: 1.5rem; and --text-xl: 2.25rem;.

Limits and tips

• Colour values are not checked or converted; test them in the browser.
• No dark theme is generated. Copy the colour lines into a prefers-color-scheme: dark block and change the values there.