Design System Spacing and Scale: Building Consistent Layouts
Spacing is the invisible architecture of good design. A well-defined spacing scale ensures consistent padding, margins, and gaps across every component without guesswork.
Key Takeaways
- Without a scale, every designer picks arbitrary pixel values: 13px here, 17px there.
- The most popular system uses multiples of 4px:
- A stricter variation uses only multiples of 8: 8, 16, 24, 32, 40, 48, 64, 80.
- Padding inside components (buttons, cards, inputs) uses the smaller end of the scale: 8-16px.
- Define your scale as CSS custom properties or Tailwind theme values.
Color Palette Generator
Why Spacing Systems Exist
Without a scale, every designer picks arbitrary pixel values: 13px here, 17px there. The result is subtle misalignment that makes interfaces feel unpolished. A spacing system constrains choices to a finite set of values that always look right together.
The 4-Point Grid
The most popular system uses multiples of 4px:
| Token | Value | Common Use |
|---|---|---|
| xs | 4px | Icon padding, tight gaps |
| sm | 8px | Inline element spacing |
| md | 16px | Component padding |
| lg | 24px | Section gaps |
| xl | 32px | Card padding |
| 2xl | 48px | Section margins |
| 3xl | 64px | Page section breaks |
Multiples of 4 align cleanly on most screen densities (1x, 1.5x, 2x, 3x) without subpixel rendering.
The 8-Point Grid
A stricter variation uses only multiples of 8: 8, 16, 24, 32, 40, 48, 64, 80. Fewer options mean faster decisions but less granularity. Many teams start with 8-point and add 4px increments only when needed.
Applying the Scale
Component-Level Spacing
Padding inside components (buttons, cards, inputs) uses the smaller end of the scale: 8-16px. Keep internal padding consistent across all components of the same tier.
Layout-Level Spacing
Gaps between sections and content blocks use the larger end: 32-64px. Increase spacing as visual importance decreases — more space around hero sections, tighter gaps in data tables.
Implementation
Define your scale as CSS custom properties or Tailwind theme values. Reference tokens by name rather than raw pixels so the scale can evolve without hunting through every stylesheet.