Spacing System
A consistent scale of spacing values derived from a single base unit, applied throughout a UI.
Plain English
A spacing system means you never invent spacing values — you pick from a predefined scale. The most common is an 8-point grid: every spacing value is a multiple of 8 (8, 16, 24, 32, 48, 64px). Sub-values of 4px exist for tight UI work. Because everything snaps to the grid, the layout looks ordered even if the designer never consciously aligned anything — the math does it automatically.
Technical
An 8pt grid system defines spacing as multiples of 8px (with 4px for half-steps). In Tailwind this maps to the 4-point spacing scale (1 unit = 4px): p-2=8px, p-4=16px, p-6=24px, p-8=32px. Design tokens expose these as CSS custom properties. The system constrains layout decisions, reduces decision fatigue, and ensures visual rhythm. Figma's auto-layout and Tailwind's spacing utilities both enforce grid-aligned spacing natively.
Live Demo
--space-14px
tight
--space-28px
compact
--space-312px
--space-416px
base
--space-624px
comfortable
--space-832px
generous
--space-1248px
section gap
A spacing system uses multiples of a base unit (4px or 8px).
Usage
✓ Good usage
Define 6 spacing tokens (4/8/16/24/32/48) and use only those values everywhere. Random values like 11px, 17px, or 22px should not exist in the codebase.
✗ Bad usage
Using arbitrary spacing values (7px, 13px, 22px) at different places produces a subtly unaligned layout that looks "off" even when no single element is obviously wrong.
Recommended values
- 4px — micro gaps (icon-to-label, badge internal padding)
- 8px — tight component spacing (input icon offset, inline gaps)
- 16px — standard component padding, list item gaps
- 24px — card padding, section-internal spacing
- 32px — between components within a section
- 48–64px — between major page sections
- 96px+ — hero and page-level vertical breathing room
Common mistakes
- Having a spacing system in Figma but not enforcing it in code — use design tokens / Tailwind utility classes only.
- Using pixels instead of the token/utility — makes the system impossible to audit or change globally.
- Mixing 8pt and 10pt grids in the same product.
AI Prompt Example
Copy this into Claude, Cursor, Bolt, or v0.
Use an 8pt spacing system throughout: 4px for micro gaps, 8px for tight spacing, 16px for component padding, 24px for card padding, 32px between components, 48px between sections.