Mastering the 8pt Grid: The Secret to Pixel-Perfect UIMastering the 8pt Grid: The Secret to Pixel-Perfect UI

For the first couple of years of my career, I spaced things by feel. Twelve pixels here because it looked right. Fifteen there because twelve looked tight. Nineteen under a heading because I nudged it with the arrow keys until my eyes stopped complaining. Every screen looked fine on its own. Put them side by side, and something always felt slightly off, like a song where the drummer is half a beat late.

The 8pt grid fixed that. Not because it’s magic, but because it took a thousand tiny decisions off my plate and replaced them with one: everything is a multiple of 8.

Why 8, and not 5 or 10?

Most popular screen sizes divide cleanly by 8, and so do the scaling factors devices use (1x, 1.5x, 2x, 3x). An 8pt value at 1.5x is a whole 12px, so you avoid the blurry half-pixels you get from odd numbers. It’s also big enough to make differences visible. Going from 8 to 16 is a real step; going from 10 to 12 is a shrug.

Google’s Material Design and most mature design systems I’ve worked with use an 8-based scale for exactly this reason. You’re not adopting a fad; you’re joining a default.

See the difference

Here’s the same card twice. The first uses the kind of spacing I used to eyeball. The second snaps everything to 8. Toggle the grid overlay and watch the second one lock into place.

Neither card is ugly. But the 8pt version has a rhythm your eye picks up even if you can’t name it. That’s the whole game: consistency people feel, not see.

The rules I actually follow

1. Spacing is always a multiple of 8: 8, 16, 24, 32, 40, 48, 64, 80. If I need something smaller for tight components like chips and icon padding, I allow 4 as a half-step. Nothing else.
2. Component heights snap too. Buttons at 40 or 48, inputs at 48, list rows at 56 or 64. That also keeps touch targets above the 44px minimum without thinking about it.
3. Line heights are multiples of 4. A 16px body with a 24px line height, an 18px lead with 28. Type doesn’t sit on the grid perfectly, so I let the line box do the work.
4. Inner spacing is smaller than outer spacing. Things that belong together get 8 or 16; groups get 24 or 32; sections get 64 and up. Proximity does half your hierarchy for free.

Turn it into tokens

A grid in your head is a suggestion. A grid in your design tokens is a system. I name spacing by step, not by pixel, so nobody is tempted to type a random number:

:root {
  --space-1: 4px;   /* half-step, use sparingly */
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;
  --space-7: 64px;
}

In Figma, the same scale lives as spacing variables, and Auto Layout gaps pull from them. When the engineer’s CSS and my Figma file share the same names, handoff conversations get noticeably shorter.

“But it feels restrictive”

I hear this a lot from designers I mentor. It does feel restrictive, for about a week. Then you notice you’ve stopped agonising over 14 versus 15, and you’re spending that energy on things that matter, like whether the flow makes sense. Constraints don’t limit good design; they clear the table for it.