Skip to content

Tools — 05

Space is the part of the layout you have to decide on purpose.

Every gap in an interface is either on the grid or an accident, and accidents accumulate faster than components do. Pick a base unit, take the ten steps, and stop negotiating margins one component at a time — fluid, so the gutters tighten on a phone without a single breakpoint.

Inputs

Scale type

768px

Bars are drawn at the size each step resolves to at this width.

The scale

  • --space-3xs

    2px → 4px

  • --space-2xs

    4px → 8px

  • --space-xs

    6px → 12px

  • --space-sm

    8px → 16px

  • --space-md

    12px → 24px

  • --space-lg

    16px → 32px

  • --space-xl

    24px → 48px

  • --space-2xl

    32px → 64px

  • --space-3xl

    48px → 96px

  • --space-4xl

    64px → 128px

Copy-ready output

Copy-ready CSS
/* Fluid spacing scale — 4pt grid at 320px, 8pt at 1440px */
:root {
  --space-3xs: clamp(0.125rem, 0.0893rem + 0.1786vw, 0.25rem);
  --space-2xs: clamp(0.25rem, 0.1786rem + 0.3571vw, 0.5rem);
  --space-xs: clamp(0.375rem, 0.2679rem + 0.5357vw, 0.75rem);
  --space-sm: clamp(0.5rem, 0.3571rem + 0.7143vw, 1rem);
  --space-md: clamp(0.75rem, 0.5357rem + 1.0714vw, 1.5rem);
  --space-lg: clamp(1rem, 0.7143rem + 1.4286vw, 2rem);
  --space-xl: clamp(1.5rem, 1.0714rem + 2.1429vw, 3rem);
  --space-2xl: clamp(2rem, 1.4286rem + 2.8571vw, 4rem);
  --space-3xl: clamp(3rem, 2.1429rem + 4.2857vw, 6rem);
  --space-4xl: clamp(4rem, 2.8571rem + 5.7143vw, 8rem);
}

For a one-off value outside the scale, or to see how the interpolation is derived, use the clamp() calculator.

Reference

A spacing scale is a fixed set of multiples of one base unit, usually 4px or 8px. Ten steps from 0.5× to 16× — 4, 8, 12, 16, 24, 32, 48, 64, 96, 128 on a 4pt grid — cover almost every layout need without arbitrary values.

Should a spacing scale use a 4pt or an 8pt grid?

4px as the base unit with 8px as the working increment. A pure 8pt grid has no legal value between 8 and 16, which is exactly where icon gaps and label spacing live.

Both units divide cleanly into the common device pixel ratios, so neither produces half-pixel rendering at 1×, 2× or 3×.

Why use multipliers instead of a geometric ratio?

Spacing is judged by alignment, not by proportion. Multiples of a base unit keep every edge on the same grid; a geometric ratio produces values like 25.6px that never line up with anything else on the page.

The multipliers here — 0.5, 1, 1.5, 2, 3, 4, 6, 8, 12, 16 — get further apart as they grow, which matches how spacing is actually used: fine control at small sizes, coarse steps between sections.

When should spacing be fluid?

For the gaps between major sections, and for page gutters. A 128px section gap is right on a desktop and absurd on a 320px phone, where it consumes a third of the screen.

Keep small steps static. Fluid values below about 16px change by a pixel or two across the whole viewport range, which is invisible and makes the CSS harder to read for nothing.

Ten-step spacing scale on a 4pt and an 8pt base unit
TokenMultiplier4pt base8pt base
3xs0.5×2px4px
2xs1×4px8px
xs1.5×6px12px
sm2×8px16px
md3×12px24px
lg4×16px32px
xl6×24px48px
2xl8×32px64px
3xl12×48px96px
4xl16×64px128px

Common questions

What is the 8pt grid?
A convention where every spacing and sizing value is a multiple of 8px. It reduces arbitrary decisions and keeps elements aligned across components, with 4px commonly allowed as a half step.
How many spacing tokens should a design system have?
Around ten. That is enough to cover everything from an icon gap to a section break, and few enough that a designer can hold the whole set in mind and reach for the same value twice.
Should spacing tokens be in rem or px?
rem for anything that should grow when a user increases their browser font size, which includes padding around text. px is defensible for hairline borders and optical adjustments that should not scale.

Sources