Design Scale Generator
Create deterministic design system scales using exponential functions. Generate spacing scales, typography scales, border radius progressions, or shadow depth scales for design systems and component libraries.
Also known as: design tokens · scale tokens
seeded
Presets
Output
About this tool, tips & examples
What it does
The Design Scale Generator builds design-system scales from an exponential progression: pick a base value and a ratio, and it produces a consistent spacing scale, type scale, border-radius progression, or shadow-depth scale in 2 to 12 steps. It’s the modular-scale calculation every design system needs, exported as tokens instead of scribbled math.
Common use cases
- Type scales — a classic modular scale (base 16, ratio 1.25 or 1.333) for heading and body sizes that relate harmonically.
- Spacing systems — a geometric spacing ramp instead of arbitrary 4/7/13/22px values.
- Radius and shadow ramps — consistent progressions for elevation and rounding across component states.
- Component libraries — export the steps as CSV/JSON and feed them into Tailwind config, CSS variables, or token pipelines.
Settings
- Scale type — spacing, typography, radius, or shadow (presets cover the first three).
- Steps — 2 to 12 values in the scale.
- Base — the starting value the scale grows from (0.1–100).
- Ratio — the multiplier between steps (1–3). Classic type ratios: 1.25 (major third), 1.333 (perfect fourth), 1.618 (golden).
- Seed — kept for reproducible variations where randomness is involved; the exponential math itself is deterministic.
Privacy note
Scales are computed locally in your browser and never uploaded. This is deterministic design math — no personal data involved, nothing secure about it, nothing to leak.
FAQ
What ratio should I use? For type, 1.2–1.333 suits dense UI; 1.414–1.618 suits editorial designs with dramatic headings. For spacing, 1.5 or 2 keeps values distinguishable.
Why an exponential scale instead of fixed increments? Perception is roughly logarithmic — equal ratios look like equal steps, where equal increments feel cramped at the top. That’s why modular scales are the standard.
How do I use the output in CSS? Export JSON or CSV and map the steps to custom properties or your Tailwind theme. For color tokens rather than dimensions, see the Design Token Generator.