Lesson 3 of 30

Spacing Systems & the Grid

Q: A designer hands you a mockup where the gaps between elements are 13px, 22px, and 30px in different places. How do you respond, and what would you actually build?

A strong answer covers: Recognize these as one-off values that don't relate to each other, rather than accepting them as-is; Propose mapping them onto a base spacing unit (e.g. 8px or 4px) and a small set of reusable steps; Explain that the payoff is consistency and reuse across the product, not pixel-perfect device alignment.

Whitespace picked one gap at a time is invisible chaos — nobody notices 13px vs 16px directly, but everyone feels the inconsistency. A spacing scale is the fix, the same instinct as a type scale applied to gaps instead of sizes.

11 min read

Check your understanding

Every option explains itself — why the right one is right, and why each wrong one is wrong. Miss one and it comes back later on a spaced-repetition schedule.

Question 1 of 3

A heading has more margin above it than below it, even though visually that might seem asymmetric. Why is this a deliberate, common convention rather than a mistake?

It groups the heading with the content below it, making the section boundary read clearlyIt's a rendering quirk of most browsers' default heading margins that nobody bothers to fixIt compensates for the heading's larger font-size needing more visual balance

Stuck? Ask the AI tutor

Hints without spoilers, and a plain explanation of why a wrong answer was wrong — answered only from this lesson. Free account, no card.

Interview questions on Spacing Systems & the Grid

What interviewers actually ask about this, and what a strong answer has to cover.

A designer hands you a mockup where the gaps between elements are 13px, 22px, and 30px in different places. How do you respond, and what would you actually build?

A strong answer covers

Recognize these as one-off values that don't relate to each other, rather than accepting them as-is
Propose mapping them onto a base spacing unit (e.g. 8px or 4px) and a small set of reusable steps
Explain that the payoff is consistency and reuse across the product, not pixel-perfect device alignment

Likely follow-ups

Why give a heading more margin above it than below it, instead of equal spacing on both sides?
Does a data-dense dashboard and a marketing landing page have to use the exact same spacing values, or can they both validly use the same scale differently?

Practice these with the AI interviewer →

The plain-language idea

Whitespace is not "the space left over" — it's an active part of the design, doing the same job proximity does in the next lesson: showing which things belong together and which don't. But left to arbitrary pixel values, spacing drifts the same way font sizes do: margin: 13px here, gap: 22px there, each individually reasonable, none of it relating to the rest.

The fix is the same idea as a type scale, applied to space: pick one base unit — 8px is the most common convention (some teams use 4px for finer control) — and only ever use multiples of it: 8, 16, 24, 32, 48, 64. This is often called an "8-point grid." Every padding, margin, and gap in the product becomes one of a small, known set of values, the same way every font-size does.

See it in a real thing: this app's own spacing tokens

--p-space-1: 0.25rem;  /* 4px  */
--p-space-2: 0.5rem;   /* 8px  */
--p-space-3: 0.75rem;  /* 12px */
--p-space-4: 1rem;     /* 16px */
--p-space-5: 1.5rem;   /* 24px */
--p-space-6: 2rem;     /* 32px */
--p-space-7: 3rem;     /* 48px */
--p-space-8: 4rem;     /* 64px */

Spacing scale: a small set of reusable valuesStep 1 of 3

Arbitrary spacing: 13px here, 22px there, 7px somewhere else — every gap is a one-off decision.

This is a base-4 scale (Praxis's own, one finer-grained step below the more common 8px convention) — the exact base matters less than the discipline: every one of those eight values shows up dozens of times across this product's components. None of them shows up as a one-off padding: 13px anywhere, because there's no --p-space step for 13.

What people usually miss

Watch out

Consistent spacing between more space above a heading than below it is a specific, deliberate convention, not a coincidence — more space above a new section signals "new group starts here" more clearly than equal space on both sides would, which is why this platform's own lesson prose (.mdx-article h2) uses a larger top margin than bottom margin.
A base-4 or base-8 grid isn't about pixel-perfect device alignment. The old argument ("8px divides evenly into common screen widths") barely applies on modern high-DPI, fluid-width screens. The real payoff is the same one type scales have: a small, memorable, reusable set of values instead of infinite arbitrary ones.
Density is a deliberate choice per surface, not a global constant. A data-dense dashboard and a marketing landing page can validly use different points on the same scale as their default rhythm — the scale doesn't mandate one universal gap size everywhere, just that whatever gap is chosen comes from the set.
Spacing tokens should compose with the type scale, not fight it. A heading's own line-height already creates visual space above and below its text — stacking a spacing-scale margin on top of that without accounting for it is how "technically consistent" spacing still ends up looking uneven.

Why this matters in interviews

A design review question like "why is the spacing here inconsistent?" is really asking whether a candidate can name the system that's missing, not just the specific pixel that looks off. "Introduce a spacing scale and audit every arbitrary value against it" is a stronger, more senior answer than fixing the one gap that was pointed out.