What base unit should I use for a spacing scale?

4px and 8px are the most common base units because they keep every value divisible by a small whole number, which aligns cleanly to the pixel grid. An 8-point system is widely used; a 4-point base gives finer control for tight UI.

What is the difference between a geometric and a linear scale?

A geometric scale multiplies each step by the ratio, so gaps grow faster and faster (4, 6, 9, 13...). A linear scale adds the same increment each time for even steps. Geometric scales suit visual rhythm; linear scales suit predictable spacing.

Why are the values rounded to whole pixels?

Sub-pixel spacing values can render inconsistently and cause blurry edges on non-retina displays. Rounding to whole pixels keeps layouts crisp. The rem figures are derived from those rounded pixels assuming a 16px root font size.

Should I use rem or px for spacing?

rem scales with the user's root font size, which improves accessibility when someone increases their browser font setting. Most modern design systems express spacing in rem. The tool gives you both so you can choose.

How many steps do I need?

Most design systems use between 6 and 12 spacing tokens. Too few and you cannot express fine differences; too many and the system loses discipline. Start with 8 and trim any sizes you never reach for.

Spacing Scale Generator

A spacing scale is the small, fixed set of spacing values a design system allows for padding, margin, and gap. Picking values from a defined scale instead of ad hoc numbers is what makes a UI feel rhythmic and consistent. This generator builds that scale from a single base unit and a growth rule, then hands you the code.

How it works

Each step is derived from the base unit and the chosen growth strategy:

geometric:  step(n) = base × ratio^n
linear:     step(n) = base × (1 + (ratio − 1) × n)

For a 4px base with a 1.5 ratio, the geometric scale produces roughly 4, 6, 9, 14, 20, 30, 46, 68. Every value is rounded to the nearest whole pixel for crisp rendering, and the rem equivalent is that pixel value divided by 16 (the default root font size).

Tips and example

Stick to one base unit across the whole product — mixing a 4-point and a 5-point system is the fastest way to lose visual consistency. Geometric scales give a pleasing acceleration for components that nest (card padding much larger than inline gaps), while a linear scale is easier to reason about for tabular or form-heavy layouts. Export to CSS custom properties when you want framework-free tokens, or to the Tailwind config when your team already lives in utility classes such as p-3 and gap-5.