Design Systems

Spacing & Layout

The grid, spacing scale, and layout principles that create consistent, readable, and structured interfaces.

#spacing#layout#grid#padding#margin#whitespace#density#columns

What is it?

Spacing and layout define the spatial relationships between elements in an interface. Spacing refers to the padding, margin, and gap values between elements. Layout refers to the grid system, column structure, and breakpoints that organize content across viewport sizes. Together they create visual rhythm, hierarchy, and breathing room.

Why it matters

Spacing is the most commonly under-designed aspect of a design system. Inconsistent spacing creates visual noise that users perceive as "unprofessional" without being able to articulate why. A consistent spacing system creates visual harmony automatically — when developers use the tokens, the design is inherently consistent.

Best Practices

Base spacing unit: 4px. All spacing values are multiples of 4 (4, 8, 12, 16, 24, 32, 48, 64, 96).
Named spacing tokens: --space-1 (4px), --space-2 (8px), --space-3 (12px), --space-4 (16px), etc.
Component internal spacing (padding): tighter than inter-component spacing (margin between components).
Section spacing: 48px–96px between major sections. This creates visual separation between content groups.
Grid: 12-column grid for maximum flexibility. Common gutters: 16px on mobile, 24px on tablet, 32px on desktop.
Density variants: compact (--space-1 / --space-2), comfortable (--space-2 / --space-4), spacious (--space-4 / --space-6).
Container max-width: 1280px for wide layouts, 960px for content-focused layouts.
Responsive spacing: spacing values should reduce on mobile (not just columns).
Whitespace is hierarchy: isolated elements appear more important. Use whitespace intentionally, not just to fill gaps.
Consistent padding inside interactive components: buttons, inputs, cards should use the same internal spacing.

Common Mistakes

Arbitrary spacing values (13px, 23px) — not based on any system.
No consistent internal component padding — buttons and inputs have different internal spacing.
Insufficient spacing between interactive elements on mobile (Fitts's Law violation).
Section spacing the same as component spacing — no visual hierarchy.
No responsive spacing — desktop 48px margins on a 320px mobile viewport.
Hard-coding spacing values instead of using tokens.

Checklist

4px base unit established

Named spacing tokens cover all common values (4–96px)

12-column grid defined with appropriate gutters per breakpoint

Container max-width defined

Responsive spacing reduces on mobile

Component internal padding is consistent across similar components

Section spacing is significantly larger than component spacing

Spacing tokens used throughout (no hard-coded values)

Interactive elements have sufficient spacing for touch targets on mobile

Research & Theory

4px Baseline Grid

The 4px base unit aligns with the native pixel density of most screens and is evenly divisible into common spacings. 8px (2×) is the most common base increment used by Material Design and Apple's HIG.

Why it's relevant

Using 4px or 8px as a base ensures that spacing values are visually harmonious and align to screen pixel grids.

Real-World Examples

Material Design (Google)

8dp baseline grid. All spacing in multiples of 8 (with 4dp for dense situations). Documented with examples across all component types.

Linear

Extremely consistent spacing throughout. Component padding is tight for density, inter-component spacing is generous for clarity. The rhythm is immediately apparent.

Tailwind CSS

The most widely-adopted spacing scale in web development. 4px base, named 1–96. Even teams not using Tailwind often adopt this scale as their token system.