Introduction
Open any polished product — Stripe, Linear, Notion. Now open a random Dribbble shot from a junior designer. You probably felt the difference before you could name it. The colors might both be fine. The fonts might both be decent. But one feels tight, and one feels like everything is floating slightly off from where it should be.
Nine times out of ten, the culprit is spacing.
Spacing is the one design decision that beginners make with their gut and professionals make with a system. And the most battle-tested system in UI design isn't some secret framework — it's the 8-point grid.
What Is the 8-Point Grid?
The concept is simple: every spacing value in your design must be a multiple of 8.
That means you work with 8, 16, 24, 32, 40, 48, 64, 80, 96px — and nothing else. No 13px padding. No 22px margins. No arbitrary "it looked right" values.
Why 8? Because most screen resolutions divide cleanly by 8, which means your layouts render crisp on every device — Retina screens, 1080p monitors, mobile displays. There's no subpixel rendering weirdness, no blurry edges. Everything snaps to a clean grid.
Some teams use a 4-point variant (4, 8, 12, 16, 20, 24...) for tighter components like dense data tables or compact mobile UIs. This is valid. The principle is the same — you pick a base unit and never deviate.
Why Arbitrary Spacing Looks Amateur
Here's what actually happens when you don't use a spacing system:
You start fresh, feeling confident. You eyeball the padding on a card — looks like maybe 18px feels right. On the next component you use 20px because the content is slightly bigger. The button gets 12px vertical padding because it "felt balanced." By the time you've designed 15 screens, you have 23 different spacing values and nothing is harmonically related to anything else.
Users won't be able to articulate this, but they feel it. The interface reads as slightly off, slightly chaotic. Trust erodes in ways that are invisible but real.
The 8-point grid eliminates this by making the decision once. Every padding, margin, gap, and offset uses the same vocabulary.
How to Apply It in Practice
In Figma, set your grid to 8px columns and use the nudge shortcuts. Change your Big Nudge setting (Shift + Arrow) from the default 10px to 8px. Now every time you nudge an element, you're snapping to the grid automatically.
In CSS, map your spacing to custom properties:
- --space-1: 8px;
- --space-2: 16px;
- --space-3: 24px;
- --space-4: 32px;
- --space-5: 48px;
- --space-6: 64px;
- --space-7: 96px;
Then use these everywhere — padding, margin, gap. Never write a raw number in your stylesheet unless it's a multiple of 8.
The rule of thumb for deciding which value to use:
- Related elements (label + input, icon + text) ? 8px
- Within a component (card padding) ? 16–24px
- Between components on the same section ? 32–48px
- Between major page sections ? 64–96px
The larger the visual separation you're creating, the larger the spacing value you pull from the scale.
The Typography Exception
Spacing between a heading and its subheading doesn't always snap perfectly to 8px — and that's okay. Line-height, cap height, and optical spacing all factor in. The rule is that spacing around text elements should follow the grid. Spacing within a text block is driven by line-height, which has its own rules.
The mistake beginners make is trying to apply 8-point to everything including font sizes and line-heights. Keep font sizes on their own scale. The 8-point grid governs spatial relationships between elements, not the elements themselves.
Why Senior Designers Won't Stop Talking About This
When you use a consistent spacing system, three things happen:
1. Your designs become easier to hand off. Developers stop asking "what's the padding on this?" because everything follows a pattern they can predict and implement in code.
2. Your design system scales without chaos. New components added by anyone on the team automatically feel consistent because the spacing vocabulary is shared.
3. Revisions get faster. Instead of re-eyeballing every spacing decision when something shifts, you're just picking the next value on the scale.
The invisible grid isn't visible to users. That's the point. When spacing is working correctly, it disappears. The content breathes, the hierarchy is clear, and the interface feels inevitable — like it couldn't have been designed any other way.
Start Today
If you're working on an existing project, don't rip everything apart. Just make one decision: from this screen forward, every new spacing value is a multiple of 8. Over time, your designs will converge toward consistency naturally.
If you're starting a new project, set the constraint before you design the first pixel. Add it to your Figma grid settings, add it to your CSS variables file, and add it to whatever design brief you give developers.
The difference between a UI that looks designed and one that merely looks assembled usually isn't the colors or the fonts. It's whether someone bothered to put an invisible structure underneath everything else.
The 8-point grid is that structure.
