Spacing System with the 8pt Grid: A Complete Guide for Consistent Design

For years I designed interfaces by eyeballing spacing values. A 13px margin here, 22px of padding there, a 17px gap further down. Everything looked fine in the moment, but something never quite fit. The design felt inconsistent without me knowing exactly why.

Take a look at this comparison:

On the left, values I chose without a system. On the right, multiples of 8. The difference is subtle but real: the second one has rhythm.

The 8-point grid is exactly that — a simple rule that says: all your spacing should be multiples of 8. That means: 8, 16, 24, 32, 40, 48, 64. It sounds like an arbitrary constraint, but it eliminates hundreds of micro-decisions that slow down the design process.

Why 8 specifically? Because it divides perfectly by 2 and 4 (useful when you need intermediate values), because retina screens multiply everything by 2 (even values scale better), and because Google and Apple already validated this approach in Material Design and the Human Interface Guidelines.

But the most practical reason is another one: when you limit your options, you design faster. You no longer wonder whether to use 14px or 17px. The answer is 16px. Always.

The card on the left uses values that "look right" — 18px and 22px of padding, 12px of gap. The one on the right uses the grid: 16px and 24px of padding, 16px of gap. Visually they're almost identical, but the second one is infinitely easier to maintain because anyone on the team knows exactly what values to expect.

In my projects I use this mental scale: 8px to space closely related elements (an icon and its text), 16px inside components (a button's padding), 24px between groups of elements, 32-48px between sections, and 64px or more to separate large content blocks. I don't memorize numbers — I memorize intentions.

What should not follow the grid is text. Font sizes like 14px, 18px, or 20px are perfectly fine. Line-height is calculated for readability, not to fit into a grid. What should follow the grid is the spacing around the text.

If you use Tailwind, you already have this covered — the spacing scale uses multiples of 4, so just use the even values (p-2 = 8px, p-4 = 16px, p-6 = 24px). If you prefer CSS custom properties:

:root {
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-6: 48px;
  --space-8: 64px;
}

Try the interactive tool. Move the sliders and watch how elements automatically align to the grid:

The mistake I see constantly is not using incorrect values — it's not documenting the system. I've worked on teams where each designer had their own mental scale, and the result was interfaces that felt inconsistent even though each individual screen "looked fine." Document which values to use and when to use them. "8px between related elements, 24px between groups" is more useful than a list of numbers.

If you've never used a spacing system, start by limiting yourself to 8, 16, 24, 32, and 48px on your next project. If you need something smaller, use 4px but think twice. If something "looks off," you probably need more spacing, not less.

After a few weeks you'll struggle to remember how you worked without this.