Density Matches Context

Match how packed a screen is to the job: consumer apps breathe, pro tools pack.

Density should match the user's task — consumer apps breathe, pro tools pack.

Give two screens the density they need

A premium landing page has been laid out like a spreadsheet, and a data table like a brochure. Set the density of each, and see why neither tight nor airy is right in general.

How to apply it

Pro tools: 8–12px gaps, 12–13px body, ≥4.5:1 contrast. Add a 'comfortable' toggle.

Density Matches Context in practice: a concrete example

Linear packs, a meditation app breathes

A trading terminal, Linear, or a spreadsheet deliberately packs rows tight: the expert wants more on screen and scans fast, so generous padding just means more scrolling and less context. A meditation app or a marketing page does the opposite, giving each element room so a first-time visitor feels calm and unhurried. Same components, opposite density, because the task and the user are different. Matching density to context is what makes each one feel right.

Common Density Matches Context mistakes

Applying consumer-app whitespace to a professional tool, so power users scroll endlessly to see what should fit on one screen.
Cramming a casual consumer app as tight as a dashboard, which reads as stressful rather than efficient.
Treating density as one global setting instead of offering a “comfortable” vs “compact” toggle for tools whose users genuinely differ.

When Density Matches Context doesn't apply

Density is a spectrum set by the task, so there is no single right value to copy between products. Accessibility also puts a floor under it: even the densest pro tool still needs adequate tap targets, legible type, and 4.5:1 contrast, so “pack it tighter” stops where usability breaks.

Practise it on a real challenge

Trading Dashboard — breathable or dense?

A trading dashboard is used for hours. The team debates 'breathable' vs 'dense'.