CSS Variables Generator

What Are Design Tokens?

Design tokens are the single source of truth for your design decisions — color palettes, type scales, spacing rhythms, and corner radii. By storing them as CSS custom properties in a :root block, you make every value accessible throughout your entire stylesheet. Changing a token in one place cascades to every component that uses it.

Example: the Default Tokens

With the default prefix and the pre-filled rows, the tool writes one :root block, group by group:

:root {
  --primary: #3b82f6;
  --secondary: #6366f1;
  --bg: #ffffff;
  --text: #111827;
  --font-sans: Inter, system-ui, sans-serif;
  --font-mono: "Fira Code", monospace;
  --font-size-base: 16px;
  --font-size-lg: 18px;
  --space-1: 4px;
  --space-2: 8px;
  --space-4: 16px;
  --space-8: 32px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-full: 9999px;
}

Use them with var(), for example .card { padding: var(—space-4); border-radius: var(—radius-md); }. A selector such as :root matches the html element and has the specificity of one class, so a later .theme-dark rule on the same element can override the tokens.

Example: a Namespaced Set

Set the prefix to —ds, keep three rows and let one token refer to another:

:root {
  --ds-primary: #3b82f6;
  --ds-radius-md: 8px;
  --ds-space-4: calc(var(--ds-space-2) * 2);
}

The tool copies values as typed, so var() and calc() work in the value field. Here —ds-space-2 is not defined in the block, so —ds-space-4 has no usable value until you add that row. For a dark theme, copy the color rows into a second block by hand, such as @media (prefers-color-scheme: dark) { :root { —bg: #111827; —text: #f9fafb; } }.

If you type the prefix as brand and a name as primary color, the tool repairs both, because a custom property name must start with — and cannot contain a space:

:root {
  --brand-primary-color: #3b82f6;
  --brand-text: #111827;
}

Limits and Gotchas

• Little validation. A prefix typed without — gets it (brand becomes —brand-), and spaces inside a name become hyphens (primary color becomes —primary-color), because a custom property name must start with — and cannot contain spaces. Values are copied as typed, and two rows with the same name both appear; the later one wins.
• Names are case-sensitive. var(—Primary) does not read —primary. In Chrome, color: var(—Primary, rgb(1, 2, 3)) fell back to the fallback color.
• Fallbacks only cover missing tokens. With —gap: red, the declaration padding: var(—gap, 8px) computed to 0px, not 8px: the fallback is used only when the variable is undefined, and an unusable value makes the declaration invalid at computed-value time (CSS Custom Properties Level 1 §3.1). With an undefined variable the same line gave 8px.
• One :root block. There is no output for themes, media queries, @property registrations, JSON or Sass maps, and the four groups are fixed (rows can be added to each).
• The color swatch follows hex values in the text field (3 or 6 digits). Values such as rgb() or oklch() are copied correctly but the swatch does not update.

Custom properties and var() work in Chrome 49, Firefox 31, Safari 9.1 and Edge 15 and later (MDN browser compat data). To produce a full shade scale for one color token, use the color shades generator; for fluid sizes, paste a value from the CSS clamp calculator.

Token Groups

• Colors — brand palette, background, text, and state colors with a color picker.
• Typography — font family stacks and base/scale font sizes.
• Spacing — a consistent spacing scale (4 px, 8 px, 16 px, etc.).
• Border Radius — corner radius values from subtle to pill-shaped.