Spacing Scale Generator

What this generator does

Snaps as well as scales, which is the difference between a spacing scale and a type scale. Type can sit at 25.6px without anybody noticing; padding cannot sit at 13.5px without a soft edge. Every value here is a whole multiple of the increment you set, the multiple is shown, and where snapping has collapsed two steps onto the same value the page says so rather than shipping a scale with a duplicate in it.

How to use this tool

1. Set the smallest space in your system as the base.
2. Pick a ratio and the increment to snap to — 4 or 8 is usual.
3. Choose how many steps you need.
4. Copy the CSS custom properties.

Understanding the controls

Smallest space

The base of the ramp — the tightest gap in your system, usually 2, 4 or 8.

Ratio

The same nine named ratios as the type scale. Spacing scales generally want a larger ratio than type: 1.5 or 2 gives clearly distinguishable steps, while 1.125 gives values that snap onto each other.

Snap to

The grid increment. Every value comes out a whole multiple of this, and the units column shows which multiple — which is what makes the system checkable.

How many steps

Named 3xs through 6xl, so the tokens have names rather than numbers.

Worked examples

Base 4, perfect fifth (1.5), snap to 4

4, 8, 12, 20, 28, 44 — every one a multiple of 4.

The units column

1, 2, 3, 5, 7, 11 — the multiples, so the grid is visible.

Base 4, minor second, snap to 8

Flagged — several steps snap onto the same value.

Exported CSS

--space-3xs through --space-lg, ready to paste.

Common use cases

• Defining the spacing tokens for a design system
• Moving an existing product onto a consistent 4px or 8px grid
• Checking whether current spacing values are on a scale at all
• Producing named tokens rather than a pile of arbitrary pixel values
• Explaining to a team why spacing should come from a scale

How this generator works

Each step is the base multiplied by the ratio raised to that step, computed from the exponent rather than from the previous value. That figure is then divided by the increment, rounded to a whole number of units, and multiplied back — so the emitted value is a whole multiple by construction rather than by luck. Both the exact and snapped values are shown. The result is checked before display: every value divisible by the increment, every unit count matching its value, and the ramp never going backwards.

Randomness and fairness

Nothing here is random. The same base, ratio and increment always give the same scale.

For how randomness is produced across the whole site, see how Generate Random works.

Assumptions this tool makes

• Every spacing value in the system should be a whole multiple of a single grid increment.

Limitations and good to know

• It produces a one-dimensional ramp. Directional spacing, negative space and optical adjustments are judgement calls a scale cannot make.
• Snapping means the scale is only approximately geometric — that is the trade-off, and both columns are shown so the size of it is visible.
• It does not check spacing against a baseline grid for vertical rhythm.
• The scale is not stored between visits, but it is fully determined by the base, ratio and increment — note those three and it is reproducible.

Common mistakes

Using the same ratio as your type scale

Spacing usually needs a larger one. A 1.25 ratio on a 4px grid snaps several early steps together, which the warning will tell you.

Adding a value that is not on the scale

One 13px padding is how a system starts drifting. If a step is genuinely missing, change the ratio rather than adding an exception.

Snapping to 1

That is not a grid. Snap to 4 or 8 — the whole benefit is that everything aligns.

Practical tips

• Name the tokens rather than using raw values, so changing the scale later is one edit.
• Six or seven steps covers almost everything; more usually means two of them are never used.
• Generate the type scale from the same increment family so the two systems agree.

Privacy and your data

The base, ratio and increment you set never leave your browser — there is no text to upload and nothing is stored between visits or written into the page address. Analytics records only that the spacing scale was generated.

Frequently asked questions

Why snap the values at all?

Because half-pixel spacing renders as a soft edge and, worse, makes two supposedly identical gaps look different. Snapping keeps the whole system on one grid, which is most of the visual benefit of having a scale.

Should the spacing scale match the type scale?

They can share a ratio, but they rarely should. Spacing wants larger jumps than type — a 1.125 spacing scale snaps most of its steps together on any sensible grid.

4px or 8px?

8 gives a firmer rhythm and fewer choices; 4 gives more room for small components. Many systems use 8 for layout and allow 4 inside components.