Design System Generator
Generate color, spacing, and type-scale design tokens from a base color, font size, and ratio.
Written by Golam Rabbani, Founder & Lead Engineer
How to use this design system generator
- Pick a base primary color with the color picker or paste a hex.
- Set the base font size in pixels (typically 14–18).
- Choose a modular type-scale ratio: 1.125 (Major Second), 1.2, 1.25, 1.333, 1.414, 1.5, or 1.618 (Golden).
- Press Generate tokens to compute color, spacing, and type scales in one pass.
- Use Copy CSS vars to copy a :root { ... } block ready to drop into a stylesheet.
About this design system generator
The design system generator turns three inputs — a brand color, a base font size, and a modular ratio — into a small but coherent set of tokens. The color scale converts the base hex to HSL and rebuilds eleven steps (50–950) at fixed lightness values for a Tailwind-style ramp on the same hue and saturation. The spacing scale multiplies the base font size by the standard fractional and integer steps (0.25, 0.5, 0.75, 1, 1.5, 2, 3, 4, 6, 8). The type scale walks the modular ratio in both directions from base — base × r⁻², r⁻¹, r⁰, r¹, r², r³, r⁴, r⁵ — labelled xs through 3xl.
Worked example: base #3b82f6, base font 16px, ratio 1.25 produces primary-500 ≈ #3b82f6, --space-4: 1rem (16px), --text-base: 1rem (16px), --text-lg: 1.25rem (20px), --text-xl: 1.563rem (25px). Copy the CSS vars block and you have a starter token set you can refine.
All math runs in the browser — no API call, no font loading.
FAQ
- What tokens does the design system generator produce?
- An eleven-step primary color scale (50–950), ten spacing tokens, and an eight-step type scale (xs, sm, base, md, lg, xl, 2xl, 3xl). All three are emitted as CSS custom properties.
- Why a modular ratio for type and a fixed multiplier table for spacing?
- Type benefits from geometric progression so each step feels distinct at any base. Spacing reads more cleanly on a fixed fractional/integer table because designers pattern-match on familiar values like 4, 8, 16, 24, 32.
- Can I edit the lightness ramp for the color scale?
- Not yet from the UI — the ramp uses fixed lightness values (96, 90, 80, 70, 60, 50, 42, 34, 26, 18, 10) that match the Tailwind-style 50–950 convention. Edit COLOR_STEPS in the component to customise.
- Do the spacing tokens output in rem or px?
- Both. The CSS variable value is rem (relative to the document root), and the inline comment shows the px equivalent at the chosen base.
- Is this a full theme, or just tokens?
- Just tokens — colors, spacing, type. A full theme would also include radius, elevation, motion, and component variants, which this tool intentionally leaves to your own design.