Skip to content
UX Atlas
Plate FND·015 · UI foundationGrid C2 · Rev. 2026-08-14

Whitespace

Empty space is a design element that groups, emphasises and sets pace, not leftover area.

UI foundationCraft conventionFoundational

Definition

Whitespace, or negative space, is the unmarked area in a composition. Macro whitespace separates major regions; micro whitespace operates inside components, between a label and a field or between lines of text.

Craft convention. True because the industry converged on it. Breaking it costs familiarity, not correctness.

On this plate
  1. 1Definition
  2. 2What whitespace does
  3. 3Space by job, not by taste
  4. 4In practice
  5. 5Local chart
  6. 6Continue from here

Reach for this when

  • Any layout that feels cramped or confusing.
  • Establishing spacing tokens.
  • Balancing density against clarity in professional tools.

Common mistakes

  • Uniform spacing that carries no grouping information.
  • Space so generous that related things separate.
  • Applying marketing-page spacing to a data-dense tool.
  • Adding space uniformly, which increases page length without improving grouping.
CompactComfortableSpacious
The same content at three spacing densities. Grouping information comes from the ratio between inner and outer space, not from the absolute values.

What whitespace does

  • Groups, through proximity, which is its most important job.
  • Emphasises, because an isolated element reads as important.
  • Sets reading pace, since line height and paragraph spacing control how fast text can be scanned.
  • Signals quality, which is the aesthetic-usability effect at work and part of why premium products are typically more generous with space.
  • Reduces perceived complexity without removing anything.

Space by job, not by taste

JobWhere the space goes
Group related thingsLess space inside the group than around it
Separate sectionsSpace larger than any gap within a section
Give weight to one elementSpace around it, rather than size on it
Make dense data readableSpace between rows, not around the table
Slow the reader downWider margins and a narrower measure

In practice

  1. i.

    Increasing space to reduce perceived complexity

    Dense forms

    A form that users described as overwhelming was unchanged in content and only re-spaced into groups. Perceived difficulty dropped without a single field being removed.

  2. ii.

    Padding on the wrong side of the wall

    Where space is felt

    A section with generous outer margins and cramped internal spacing reads as crowded, because the space the reader experiences is the space between elements, not the space around the block.

Local chart

FND·015 · Region II · Grid C2

This entry and the entries it is stated to connect with. Each line is labelled with what the connection means.

Aesthetic and Minimalist DesignHEUR·008 · PRINCIPLES BEHIND THISAesthetic-Usability EffectLAW·011 · PRINCIPLES BEHIND THISLaw of PrägnanzLAW·017 · PRINCIPLES BEHIND THISOccam's RazorPRIN·001 · PRINCIPLES BEHIND THISWhitespaceTERM·055 · SHORT DEFINITIONBalanceFND·011 · RELATED CONCEPTBorders and DividersFND·047 · RELATED CONCEPTCommon RegionFND·006 · RELATED CONCEPTCompositionFND·014 · RELATED CONCEPTDensityFND·016 · RELATED CONCEPTEmphasisFND·018 · RELATED CONCEPTLine HeightFND·034 · RELATED CONCEPT

Continue from here

Each link says what the connection is, so you can tell a principle from an alternative from a thing people mix this up with.

Applies when you are designing

A DashboardA FormA Pricing PageA Search ExperienceAn Ecommerce ExperienceAn Onboarding Flow

Principles behind this

The reasoning this solution is an application of.

Short definition

The one-paragraph version, for when that is all you need.

Related concept

Connected closely enough to change how you apply this.