koaliatools · 8pt grid
← back
tools · system · updated August 20, 2026
frame 00 · the tool

8pt grid system

spacing is the single easiest thing to get consistently right and the most common thing to get quietly wrong. the 8pt grid removes the decision: every gap, pad and margin is a multiple of 8, so “how much space here?” becomes “which step?”

9
the rampbase 8px · 9 steps
  • 3xs4px ·0.5×
  • 2xs8px ·1×
  • xs12px ·1.5×
  • sm16px ·2×
  • md24px ·3×
  • lg32px ·4×
  • xl48px ·6×
  • 2xl64px ·8×
  • 3xl80px ·10×
30px
off gridnearest are 24px and 32px — snap to 32px.
8pt ramp · css
/* 8pt spacing ramp — generated with koalia.design/tools/8pt-grid */
:root {
  --space-3xs: 4px;
  --space-2xs: 8px;
  --space-xs: 12px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 32px;
  --space-xl: 48px;
  --space-2xl: 64px;
  --space-3xl: 80px;
}
frame 01 · the why

why 8, specifically

8 divides cleanly at every common display density. at 1× it is 8 physical pixels, at 1.5× it is 12, at 2× it is 16, at 3× it is 24 — all whole numbers. a 5pt grid gives you 7.5 physical pixels at 1.5×, and the browser rounds it, and your careful spacing drifts by half a pixel in a direction you don't control.

the second reason is arithmetic you do in your head. multiples of 8 are easy to hold — 8, 16, 24, 32, 48, 64 — so a team converges on the same values without checking a document. that consistency is the actual product; the number 8 is just a convenient carrier.

4pt as the half-step. pure 8 is too coarse inside small components — the gap between an icon and its label, the pad on a compact chip. most systems run an 8pt grid with 4pt available below sm. that's what the base unit toggle above is for.

frame 02 · in practice

how to actually apply it

  • spacing, not everything. the grid governs margin, padding and gap. it does not govern font sizes (use a type scale), border widths (1px is 1px), or icon sizes (16/20/24 are their own convention).
  • space is a property of the parent. put the gap on the container, not as a margin on the child. a component that carries its own outer margin can't be reused anywhere the spacing differs.
  • bigger gaps for bigger relationships. 8px between a label and its input, 24px between two fields, 48px between two sections. if two things are the same distance apart, you're claiming they're equally related.
  • optical alignment beats the grid. a circular icon or a piece of punctuation often needs a pixel or two off-grid to look centred. trust your eye — the grid is there to remove arbitrary decisions, not deliberate ones.
  • text is the honest exception. line-height rarely lands on 8, and forcing it produces awkward leading. let text set its own vertical rhythm and align the blocks around it.
frame 03 · the argument

when not to use it

the 8pt grid is a convention for interface work, and it earns its keep on teams and on systems that have to stay coherent for years. it is not a law of visual design.

editorial layout, poster design and anything typographically driven usually wants a baseline grid derived from the leading of the body text instead — where the unit is whatever line-height you set, not 8. forcing an 8pt grid onto a text-first layout produces spacing that fights the type.

the honest version: pick a unit, write it down, and hold the team to it. 8 is the best default because the arithmetic is kind and every other tool already assumes it.

koalia · the bootcamp

tools are the easy half

these are references — they tell you what the rules are, not when to break them. that judgement is what the eight weeks are for.
apply for KO-2

more tools