Spacing systems that scale past the first screen

Spacing is invisible when it's right and disastrous when it's wrong. A 4px shift between elements that should be aligned is the kind of thing the user doesn't notice consciously but feels as cheap.

Pick a base unit and stick to it

The two real options are 4px and 8px.

• 4px base. Steps of 4, 8, 12, 16, 20, 24, 32, 40, 48. Finer control, more values to remember.
• 8px base. Steps of 8, 16, 24, 32, 48, 64. Coarser, more disciplined, what most large design systems use.

I default to 4px because it gives you 12px and 20px without going to half-steps. Tailwind's default scale is 4-based and it works. The cost is more values to choose from, which becomes the next problem.

Limit the scale

Even on a 4px base, don't actually use every value. Pick 6–8 spacing values for your product and use only those: 4, 8, 12, 16, 24, 32, 48, 64. Throwing 20 and 28 into the mix produces inconsistency without expressiveness.

The two spacing axes

Spacing isn't a single thing. There's spacing *inside* components (padding) and spacing *between* components (gap, margin). They need separate scales, or at least separate intentions.

• Inside components: 8, 12, 16, 24. Padding inside cards, buttons, inputs.
• Between components: 16, 24, 32, 48. Gap between cards, sections, layout regions.
• Between sections: 48, 64, 96. Vertical rhythm between top-level page regions.

The grouping principle

Related elements should be closer than unrelated elements. This is the Gestalt law of proximity, and it's the single most useful rule in spacing.

A label and its input should be 4–8px apart. The next field group should be 16–24px below. A new section should be 32–48px below. Spacing communicates hierarchy; if everything is 16px apart, nothing groups.

Responsive spacing

Don't keep the same spacing on mobile that you use on desktop. Section gaps that read as elegant at 64px on desktop feel oppressive at 64px on a 375px-wide phone. Halve large spacing values at the mobile breakpoint.

Build one

The directory's design foundations collection includes spacing tokens and tuned prompts. Pair with typography, type and spacing are tied; a 14px body needs 1.5 leading and 16px margins to feel right, change one and the others wobble.