Space

Whitespace

Whitespace is not wasted room; it is the space that lets content breathe and separate.

Also heard as: negative space, breathing room

Definition

Whitespace is the intentional empty space around and between elements that gives structure, pacing, and focus to the layout.

Good whitespace makes dense information usable. Bad whitespace either starves the layout or leaves important groups floating without support.

Whitespace supports hierarchy and grouping without calling attention to itself.

Too little space feels cramped; too much misplaced space makes the actual content look lost.

Open up the hero and card gutters so the important blocks can breathe without centering everything into a tiny column.
Increase section spacing more than internal card spacing so the page reads in clear chunks.

Compressing everything until labels, actions, and support text blur together.
Creating huge empty gutters while keeping the content itself cramped and under-scaled.

Research more when long-form reading, dense data views, or responsive breakpoints make spacing tradeoffs materially different across devices.

Constrain page width so content stays readable and focused.

Divide space into columns so layouts align and scale cleanly.

Arrange elements in one direction with consistent spacing rhythm.

1.1 First Principles

1.2 Components

1.3 Composition