What token groups are generated?

The theme includes color tokens (primary, hover, accent, surface, text, border), a six-step spacing scale, a six-step typography scale plus line heights, three radius sizes, and three shadow depths. Together they cover the core of a small design system.

How are the neutral colors derived?

Surface, text, and border colors reuse your primary hue at very low saturation. This subtle tint keeps the whole interface feeling cohesive rather than mixing a colored primary with a flatly grey neutral palette.

What does the type scale ratio do?

The ratio sets how each font step grows relative to the previous one. A major third of 1.25 multiplies each size by 1.25 going up and divides going down from the base, producing a harmonious modular scale.

Where should I paste the output?

Place the :root block near the top of your global stylesheet. Every selector can then reference the variables with var(--color-primary), var(--space-md), var(--text-lg), and so on.

Can I add a dark mode later?

Yes. Duplicate the :root block inside a selector such as [data-theme='dark'] or a prefers-color-scheme media query and adjust the lightness of the surface and text tokens. The variable names stay the same so your components need no changes.

CSS Variable Theme Generator

The CSS Variable Theme Generator builds a complete set of design tokens from a single primary color and a chosen type scale, then emits them as a :root block of CSS custom properties. It is a fast way to bootstrap a coherent theme without hand-writing dozens of variables.

How it works

Colors start from your primary’s HSL value. The accent is its complementary hue (180 degrees away), while surface, text, and border tokens reuse the primary hue at low saturation so neutrals share the same undertone. Typography is a modular scale around your base size:

accent       = hslToHex((hue + 180) mod 360, sat, light)
surface/text = same hue, low saturation, fixed light/dark lightness
text-step(i) = base × ratio^(i − 1)   // "base" step = your base size
spacing      = 0.25, 0.5, 1, 1.5, 2, 3 rem  (xs ... 2xl)

Radius and shadow tokens are sensible fixed defaults you can tune after pasting.

Tips and notes

Pick a saturated primary in the 40 to 55 percent lightness band so the derived hover (8 percent darker) and the tinted neutrals stay readable. The font sizes are emitted in rem relative to a 16px root, so they scale with the user’s browser settings. To support dark mode, copy the block into a prefers-color-scheme: dark query and flip the surface and text lightness — the token names remain stable, so no component markup needs to change.