The 8pt Grid.
Not a rule. A decision-making system.

Before the grid, there was chaos

Open a design file made by someone who doesn't know about the 8pt grid. You'll see padding values like 13px, 17px, 22px. Gaps of 11px. Margins of 19px. Nothing is obviously wrong, but something feels off. The design looks slightly cramped in one place, slightly too spaced in another.

This isn't a talent problem. It's a system problem. Without a consistent spatial framework, every spacing decision is made from scratch — and human beings are terrible at making the same arbitrary decision the same way twice.

The 8pt grid solves this by giving you a simple constraint: every spacing value must be a multiple of 8. That's it. 8, 16, 24, 32, 40, 48, 64, 80, 96. Every padding, every gap, every margin, every size.

Why 8? Why not 5 or 10?

This is the question everyone asks. The answer has two parts: screen physics and human proportion.

Most screens — phones, tablets, laptops — have display resolutions that scale in multiples of 2. The common scaling factors are 1×, 1.5×, 2×, 3×. A value of 8 divides cleanly into all of these. That means your design renders crisp at every resolution without fractional pixel values blurring your edges. A value of 5 or 10 doesn't divide as cleanly.

The human proportion argument is subtler. Our visual system perceives space in relative terms, not absolute ones. The difference between 8px and 16px (doubling) is perceived as meaningful. The difference between 13px and 14px is not. By working in multiples of 8, you create spacing relationships that the eye can actually sense and respond to.

Your complete spacing scale

Here's the full token set you'll use for 95% of all spacing decisions. Each token has a specific semantic role — which is what separates a designer who uses the grid from one who truly understands it.

The before/after you need to see

Here are two versions of the same card. One is designed without the grid. One uses it. The content is identical. The difference is only in the spacing values.

The second card feels more settled, more intentional. Not dramatically different — which is exactly the point. Good spacing is invisible. Bad spacing creates a nagging feeling that something is off without being able to name it.

Try it — the spacing playground

Here's an interactive version. Toggle between grid-valid and grid-invalid spacing and feel the difference yourself.

Setting up the grid in Figma

Here's exactly how to configure your Figma file so the grid does the work for you.

Step 1: Set your nudge values

In Figma, go to Preferences → Nudge Amount. Set "Small nudge" to 1px and "Big nudge" to 8px. Now pressing Shift + arrow moves elements exactly one grid unit. This is the single most important Figma setting for a grid-conscious designer.

Step 2: Add a layout grid

Select your frame and add a grid under the Design panel. Set type to "Grid", size to 8, and opacity to around 10%. You'll now see a soft grid that makes misalignment obvious at a glance.

/* Your 8pt spacing scale as CSS custom properties */
:root {
  --space-1: 4px;   /* micro — icon gaps, badge padding */
  --space-2: 8px;   /* xs — button padding, tag spacing */
  --space-3: 16px;  /* sm — card padding, list gaps */
  --space-4: 24px;  /* md — between related elements */
  --space-5: 32px;  /* lg — sub-section spacing */
  --space-6: 48px;  /* xl — between sections */
  --space-7: 64px;  /* 2xl — major section padding */
  --space-8: 96px;  /* 3xl — hero, full-page breathing room */
}

When 4px is fine (and when to break the grid)

The 8pt grid has one common extension: a 4px half-unit for very tight, micro-spacing situations. Think of the gap between an icon and its label, the vertical padding inside a chip tag, or the space between a label and its input field. These situations call for precision tighter than 8px.

Using 4px here is not breaking the grid — it's a sanctioned subdivision. The rule is: only use 4px for micro-spacing within components, never for the gaps between them.

As for breaking the grid entirely — the honest answer is almost never. In eight years of product design across consumer apps, enterprise tools and startup products, I have encountered maybe five situations that genuinely required an off-grid value. Every other time, a designer who thought they needed 13px actually just needed to reconsider whether the spacing should be 8px or 16px.

The real benefit nobody talks about

We've talked about visual consistency. But the 8pt grid has a benefit that's arguably more important in a professional context: it makes design decisions defensible.

When a developer asks "why is this padding 16px?", the answer "because it's two grid units, which is our standard card inner padding" is a professional answer. It references a system. It's repeatable. It can be encoded into a design token.

When the answer is "it just looked right to me" — that's a guess. Guesses erode trust. Systems build it.

This is the same reason surgeons follow checklists and pilots run pre-flight procedures. Not because they don't trust their expertise — but because systems prevent the kinds of errors that happen when you rely purely on intuition, every single time.