Why an 8-pixel base structures the whole layout
Eight pixels. That is the unit that separates an interface which breathes from a layout patched margin by margin. An 8-point spacing system sets one rule: every distance between two elements is a multiple of eight. Margins stop being negotiated pixel by pixel, components align on their own, and the handoff from design to code loses its guesswork. Here is how to build one, step by step, with no jargon.
The choice of eight is not arbitrary. A base of eight divides cleanly into four and two without ever producing a decimal, and that stays true on double-density displays (the familiar Retina screens) where one logical point covers two physical pixels. A rhythm of 4, 8, 16, 24, 32 therefore renders crisply at every common resolution.
The second benefit is mental. When each spacing is a multiple of eight, a designer no longer weighs 13 against 14 or 15 pixels: the question simply disappears. That constraint cuts the number of decisions per screen and makes inconsistencies obvious at a glance. A stray 18-pixel gap jumps out among multiples of eight, while it would hide unnoticed in a mess of freehand margins.
Step 1: Build your spacing scale
A scale is not an endless list of multiples. It narrows to a handful of named values that the whole team reuses. In practice, six to eight steps cover the overwhelming majority of needs, from the micro-spacing inside a button to the wide breathing room between page sections.
Here is a proven starting scale, with the typical use of each step:
| Step | Value | Common use |
|---|---|---|
| xs | 4 px | Gap between an icon and its label |
| sm | 8 px | Inner padding of a chip, space between close fields |
| md | 16 px | Standard padding of a card or a button |
| lg | 24 px | Space between two blocks of a form |
| xl | 32 px | Separation between content groups |
| 2xl | 48 px | Top and bottom margin of a section |
| 3xl | 64 px | Breathing room between major page sections |
Three principles guide this scale. First, it is finite: if a need fits no step, that is usually a sign to rethink the layout rather than add a value. Second, the steps spread apart as they climb (the gap from 32 to 48 is wider than from 8 to 16), which mirrors how the eye reads distance. Third, each step carries a name, not just a number, so you reason in intent ("a medium space") instead of pixels.
To understand why this visual rhythm calms the eye, the principles of proximity and grouping from the perception laws we unpack in our UX writing give the theoretical footing: two close elements read as related, two distant ones as separate. The spacing scale is simply the numbered translation of that grammar.
Step 2: Turn the scale into reusable CSS tokens
A scale that lives only in a design file starts to drift the moment the first line of code is written. The decisive move is to materialise it as variables, called tokens, that the CSS and the mockup share word for word.
In modern CSS, that fits into a few custom properties declared once:
--space-xs: 4px;--space-sm: 8px;--space-md: 16px;--space-lg: 24px;--space-xl: 32px;--space-2xl: 48px;--space-3xl: 64px;
A CSS custom property centralises the value and propagates any change across every component in a single edit. Deciding tomorrow that the standard padding moves from 16 to 20 pixels then takes one change, not a hunt for hard-coded values across thirty files. The reference documentation on CSS custom properties at MDN details the syntax and the cascade behaviour of these variables.
Two hygiene rules keep the tokens durable. Name by intent and rank (space-md, space-lg) rather than by value (space-16): the day 16 becomes 20, the name still fits. And banish any spacing value written in plain sight inside components: a stray margin: 12px escapes the system and reopens the door to chaos. That discipline of shared tokens is exactly what a serious studio sets up during a bespoke website design build, because it spreads the maintenance cost thin over time.
Step 3: When to drop to 4 points, and when to stop
The question that comes up most concerns the half-step. Should you allow 4 pixels when the promise was "everything in multiples of eight"? Yes, but within a strict boundary, and that is where the decision framework really earns its keep.
The 4-pixel half-step is justified for micro-adjustments inside a dense component, never for spacing between components. Concretely, it serves three cases:
- The icon-to-text gap in a button or a chip, where 8 pixels already read as too wide a separation.
- Compact components such as tags, badges and tight form fields, where every pixel of height counts.
- Optical adjustment of an element that looks off despite mathematically correct values, for instance to offset the visual trim of a typeface.
Below 4 pixels, stop. Dropping to 2 or 3 pixels reintroduces the very arbitrariness the system meant to remove, for a visual gain the eye never registers at normal reading distance. The rule fits in one sentence: the step of eight governs the layout, the step of four corrects the detail, nothing below. That same logic of a numbered threshold, which settles an otherwise subjective call, also guides the implementation side during careful web development, where every spacing value has to stay traceable in the system.
Step 4: Audit an existing mockup or codebase
The theory is simple; the real work begins on an interface already built, riddled with inherited margins. Here is a four-pass audit, from the most profitable to the most refined.
First pass, hunt the intruders. Search for every spacing value that is not a multiple of four: a padding: 15px, a margin: 22px, a gap: 13px. Each one is a candidate for the nearest step on the scale. This single pass often fixes the bulk of visible inconsistencies.
Second pass, normalise toward the token. Replace each hard-coded value with the matching variable. A margin: 16px becomes margin: var(--space-md). The goal is not only the look: it is to make the next global change instant.
Third pass, vertical consistency. Check that elements of the same nature share the same spacing: every card in a grid, every section heading, every form group. A card at 24 pixels next to one at 32 pixels betrays a copy-paste left half-finished.
Fourth pass, breathing room between sections. This is where perceived reading comfort is decided. Make sure large blocks are separated by the high steps (48 or 64 pixels) and not a timid 16 that flattens the structure. A good spacing hierarchy is felt before it is read, and it weighs on the perceived quality of a site as much as colour or type, the kind of craft you notice when comparing the leading web design agencies we rank.
The essentials to keep on hand
An 8-point spacing system is not one more aesthetic constraint: it is a decision tool that removes needless choices and steadies the path from mockup to code. Keep these markers within reach:
- A base of eight pixels: every distance is a multiple of eight, clean at all screen densities.
- A finite, named scale: six to eight steps (4, 8, 16, 24, 32, 48, 64), each with a clear use.
- Shared tokens: one CSS variable per step, no hard-coded values, a single point of change.
- A 4-pixel half-step: reserved for internal micro-adjustments; nothing below it.
- A four-pass audit: flush out the intruders, normalise toward the tokens, check consistency, tend the breathing room between sections.
Adopt the method on a single screen first, measure the gain in sharpness, then extend it to the rest of the product. A disciplined spacing system is one of those invisible foundations that make an interface look considered without anyone being able to say quite why.