Why 4px, Not 8px
The 8px grid has been the industry standard for a decade. It works fine for most layouts. But we found ourselves constantly reaching for half-values: 4px padding here, 12px gap there. An 8px grid forces you into 8, 16, 24 - missing the values between that often produce tighter, more refined layouts.
A 4px grid gives us every value 8px has (they're all multiples of 4) plus the intermediate values we actually need: 4, 12, 20, 28. More control without more complexity.
The Spacing Scale
Our full spacing scale is: 4, 8, 12, 16, 24, 32, 48, 64, 96, 128. Each value has a semantic name: space-1 through space-10. Component-level tokens map to these semantics: card-padding: space-5 (24px), button-gap: space-2 (8px).
This scale covers everything from icon padding (4px) to section spacing (128px). No magic numbers, no exceptions, no arguments about whether something should be 15px or 16px.
Typography on the Grid
Every line-height in our system is a multiple of 4px. Body text at 16px has a line-height of 24px. Headings at 32px use 40px line-height. This creates a consistent vertical rhythm that you can feel even if you can't articulate why the page looks "right."
The Figma Enforcement Setup
We use Figma's auto-layout with grid values baked into every frame. Component padding, gap, and margin are set to our token values. Designers can't accidentally use 15px because the auto-layout options snap to our scale. It's guardrails by design, not discipline.
Our Figma library includes a "spacing checker" component - an invisible overlay that highlights any element not sitting on the 4px grid. Run it before handoff and you'll catch drift before developers see it.
Developer Handoff
Because every spacing value maps to a named token, developers never see raw pixel values. They see space-4 or card-padding in the spec. If the grid base ever changes (unlikely, but possible), we update the primitive tokens and everything cascades. No find-and-replace across codebases.