What is the 8pt grid?

A spacing convention where every distance and size in an interface is a multiple of 8 pixels. It works because 8 divides cleanly, survives common screen density scaling (1×, 1.5×, 2×) with whole pixels, and gives teams one short menu of values to coordinate around.

Should I use a 4pt or 8pt grid?

Usually both, as layers — 8-multiples for layout-level spacing between components and sections, 4-multiples for fine inner spacing like icon padding and label gaps. Data-dense products lean harder on the 4pt layer.

Do all values have to be multiples of 8?

No. One-pixel borders, optical corrections, and text baselines are legitimate exceptions — the grid is a decision-reducer, not a law. What matters is that exceptions are visible choices, not drift.

Is the 8pt grid the same as a baseline grid?

No — the 8pt grid quantizes space (how far apart things sit), a baseline grid quantizes text rhythm (which lines text sits on). They combine well when the baseline is derived as half the body size, so both share one quantum.

How do spacing values become tokens?

Each step on the scale gets a name (space-1…space-8, or xs–3xl) and exports to CSS custom properties, Tailwind, or Figma Variables — so design files and code read the same finite set of distances.

Spacing Systems & the 8pt Grid: The Practical Guide

Q: How many spacing steps does a system need?

Around 6 to 10 covers many products. More steps usually signals that the scale is linear (8, 16, 24, 32…) — a non-linear scale, dense at the small end and sparse at the large end, does the same job with fewer values.

A spacing system is a short, ordered menu of allowed distances — instead of choosing every margin and gap individually, you choose from six to ten values that the whole team shares. The 8-point grid is the best-known version of the idea; a spacing scale is its stronger, non-linear form. This hub collects our guides on both; the quickest way in is to see a spacing scale generated live.

Why quantized spacing works

The value isn’t pixel mysticism — it’s decision economics and coherence. When every distance comes from one short menu, screens built by different people in different months still look related, and “should this gap be 12 or 14?” stops being a discussion. The eye rewards it too: fewer distinct spacing relationships means less visual noise to reconcile.

What Is the 8-Point Grid? unpacks the best-known menu and why 8 in particular survived: it divides cleanly and lands on whole pixels at the common density scalings. When components need finer inner distances — icon padding, label gaps — a half-step layer takes over; 4pt vs 8pt Grid covers when each layer applies and how the two coexist without turning into “any multiple of 4 goes”.

The grid is the special case; the scale is the idea

Multiples of 8 form a linear menu, and linear steps are wrong at both ends — small gaps need fine distinctions, large gaps don’t. A spacing scale drawn from a formula (the same base-and-ratio progression that can drive a type scale) gives you non-linear steps: 8, 11, 16, 23, 32, 45, 64. Dense where precision matters, sparse where it doesn’t, every step accounted for by one rule.

How many steps that menu should hold is its own decision — How Many Spacing Steps Does a System Need? makes the case for six to ten, and What Is a Spacing Scale? builds the non-linear version from scratch. The shared formula is also what Scale Composer is built around: one base and ratio generate the type sizes, the spacing steps, and the grid dimensions together, so changing one number retunes all three at once.

Text rhythm is spacing too

Half the vertical distances on a page live inside text — line heights, paragraph gaps, heading margins. Deriving a baseline unit of half the body size (8px on 16px body) puts text rhythm and layout spacing on the same quantum, which is the practical way to get the “everything aligns” feeling without fighting CSS line-box mechanics. Baseline Grid vs 8pt Grid draws the line between the two kinds of rhythm, and Vertical Spacing Between Text Blocks applies the shared quantum to paragraph gaps and heading margins — the distances most likely to drift when they are set per element.

Where spacing meets the rest of the system

Steps only govern anything once they are named and shipped. Spacing Tokens covers naming and step counts, and the design tokens hub covers how those names travel from one source file into CSS, Tailwind and Figma. In layout, the same scale sets the distances between columns — Gutters and Gaps connects it to the column system described in the layout grid hub. Two guides cover the ergonomic floor no scale may undercut: Touch Targets on why 44px matters, and Density Modes on serving compact and spacious interfaces from the same set of tokens.

Guides in this hub

4pt vs 8pt Grid: When to Use Which
4pt vs 8pt grid is a layering question, not a choice: 8px multiples for layout spacing, 4px multiples for fine inner spacing and type. Learn where each fits.
Baseline Grid vs 8pt Grid: The Difference
A baseline grid quantizes text rhythm; an 8pt grid quantizes space. Learn how they differ, how they share one 8px quantum, and what holds up on the web.
Border Radius Scales
A border radius scale is a short menu of corner values shared by every component — plus the nested-corner rule (inner = outer minus gap) most guides skip.
Compact, Comfortable, Spacious: Density Modes
UI density modes — compact, comfortable, spacious — are one layout resolved against different spacing steps. How alias remapping works, with table-row math.
Gutters and Gaps: Spacing Between Columns
A grid gutter is the space between columns — gap in CSS. How wide gutters should be, how they relate to margins and columns, with worked breakpoint math.
How Many Spacing Steps Does a System Need?
How many spacing values does a system need? Six to ten, budgeted by zone — micro, middle, macro — and an audit showing why your CSS probably has forty.
Icon Sizes on the Grid (16, 20, 24)
Standard icon sizes — 16, 20, 24, 32 — are bounding boxes on the 4px grid. Learn why equal icon sizes can look different and how to pair icons with text.
Keeping Figma and Code Spacing in Sync
Figma spacing tokens drift from code when each side keeps its own list. Export one scale as Figma Variables and CSS so design and code read one source.
Margin vs Padding: System Rules
Margin vs padding: padding is space inside the border, margin outside — and the system rule that matters more: components own padding, layouts own the gaps.
Spacing Tokens: Naming and Steps
Spacing tokens turn a spacing scale into a shared vocabulary. Compare numeric and t-shirt naming, add semantic aliases, and export to CSS, Tailwind, and Figma.
Touch Targets: Why 44px Matters
Touch target size explained: Apple says 44pt, Material 48dp, WCAG 2.2 requires 24px. See how padding turns a 24px icon into a 48px target, and why gaps count.
Vertical Spacing Between Text Blocks
How much spacing between paragraphs and headings? Baseline multiples, asymmetric heading margins, tighter lists — a worked text stack from one scale.
What Is a Spacing Scale?
A spacing scale is a short, ordered set of allowed distances. Learn why good scales are non-linear, how three numbers generate one, and how many steps you need.
What Is the 8-Point Grid?
The 8-point grid makes every space and size in a UI a multiple of 8px. Learn why 8 works, when to use 4pt half-steps, and how it grows into a spacing scale.

Try it against real columns

Spacing gets concrete when layout enters: open the grid view — 4 columns on mobile, 8 on tablet, 12 on desktop — and step the gutters and margins through the scale with the arrow keys. Watching a gutter move step by step shows what a spacing system is for faster than any definition.