Lukehle Visual hierarchy
A data page fails in one of two ways: everything looks equally important, or the important thing is somewhere the eye does not go. Both are hierarchy problems, and both are decided before any styling.
Rank before you lay out
Write the ranking down first, in words:
1. Is runway a problem? -> the headline figure
2. What changed this month? -> the bridge
3. Where is the growth coming from? -> the cohort view
4. Everything else -> table, below the fold
Then the layout is mostly determined: rank 1 gets size and position, rank 4 gets neither. Skipping this step is how you end up with twelve equal tiles.
One page, one primary question. If a page has two primary questions it is two pages, or one page with a clear split. A page that answers everything answers nothing quickly.
What actually creates hierarchy
In rough order of strength. Reach for the cheapest one that works:
| Device | Strength | Cost |
|---|---|---|
| Position (top-left in LTR reading order) | Strongest | Free |
| Size | Very strong | Free |
| Whitespace around an element | Strong, and underused | Space |
| Weight (600 vs 400) | Moderate | Free |
| Colour / accent | Moderate, and easily overspent | Cheapens fast |
| Borders and boxes | Weak, adds noise | Visual debt |
Whitespace is the most underrated of these. Isolating a figure makes it read as important without adding a single pixel of decoration. Boxing it does the opposite: a border says "this is a category", not "this matters".
Rule of thumb: if three things are emphasized, nothing is. Emphasize one per view.
Grouping: proximity beats borders
Related things are near each other; unrelated things are apart. Get spacing right and most borders, cards, and dividers become unnecessary.
The failure mode to look for: equal spacing everywhere. If the gap between a label and its value equals the gap between two unrelated sections, the reader has to parse structure that should have been obvious.
Gap within a group → 4-8px
Gap between groups → 16-24px
Gap between sections → 40-64px
Those three tiers, applied consistently, do more for legibility than any amount of styling.
The spacing scale
Pick a scale and never deviate. Arbitrary values are the single clearest sign of an unconsidered layout.
--space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
--space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;
If a spacing need falls between two steps, you almost always want one of the two, not the midpoint.
See design-tokens.
Alignment
- One left edge. Text, headings, and labels share a starting x. A page with four different left edges reads as unstable regardless of anything else.
- Numbers right-align, always, with tabular figures so digits stack (
data-typography). - Optical over mathematical. A large heading may need a slight negative offset to look aligned with body text below it.
- Avoid centring anything with more than one line, and avoid centring in a wide container at all.
Density for a professional audience
A finance audience reads dense information for a living. Consumer-scale whitespace wastes their time and forces scrolling to compare figures that belong side by side.
Density is fine. Undifferentiated density is not. The rule is grouping, not spacing: dense information organized into clear groups reads faster than sparse information with no structure.
The test:
- Main question answerable in under 5 seconds
- A specific supporting figure findable in under 15 seconds
If either fails, the fix is usually ranking or grouping — rarely more whitespace.
Layout patterns that work
Report / board page
┌──────────────────────────────────────────────┐
│ Title + as-of │ provenance visible immediately
├──────────────────────────────────────────────┤
│ HEADLINE FIGURE supporting supporting │ rank 1 gets size
│ with its verdict figure figure │
├──────────────────────────────────────────────┤
│ Primary chart (the "what changed") │ rank 2, full width
├───────────────────────┬──────────────────────┤
│ Secondary chart │ Secondary chart │ rank 3, equal pair
├───────────────────────┴──────────────────────┤
│ Detail table │ rank 4, scrolls in its own container
└──────────────────────────────────────────────┘
Comparison view
Small multiples beat one crowded chart. Same scale on every panel — different scales per panel is a misread waiting to happen. Sort panels by magnitude, not alphabetically.
Explorer / app
Controls in a consistent place (top bar or left rail, not both). The data region owns the remaining space and is the only thing that changes on interaction. Never let filter controls occupy more visual weight than the results.
Responsive
Reflow by rank, not by source order: rank 1 stays at the top, side-by-side pairs stack, the table scrolls in its own container. Never scale a whole chart down uniformly — axis labels become unreadable long before the chart does. Reduce the number of ticks instead, or switch to a compact variant.
Per artifact-architecture, wide content scrolls inside its own overflow-x: auto container; the
page body never scrolls horizontally.
The subtraction pass
Before shipping, remove every element that does not change a reader's understanding. Borders, icons, gradients, redundant labels, decorative rules, a legend for a single series, an axis title that repeats the tick format.
What survives that pass is the design.
Related skills
design-tokens— the scales this depends ondata-typography— hierarchy within numbers and labelsui-antipatterns— the failure modes of this skillchart-annotation— hierarchy inside a chartartifact-theming— making hierarchy survive both themes