# Visual Hierarchy > Layout, spacing, grouping, and scanning order for data-dense pages - deciding what is most important and making the page say so, at densities a professional audience actually wants. Covers the rank-then-lay-out method, grouping by proximity, alignment discipline, the spacing scale, and layout patterns for dashboards, reports, and comparison views. Trigger on "layout", "hierarchy", "too cluttered", "where do I put this", "dashboard layout", "spacing", "grid", "it all looks the same", "make it scannable". - Skill: `lukehle/visual-hierarchy` (Agent Skill) - Install (CLI): `npx skillmds@latest add lukehle/visual-hierarchy` - Raw SKILL.md: https://api.skillmd.com/api/skills/lukehle/visual-hierarchy/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Coding & Dev Tools - Author: Lukehle (https://skillmd.com/u/lukehle) - Updated: 2026-09-17 - Page: https://skillmd.com/skills/lukehle/visual-hierarchy --- # 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. ```css --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 on - `data-typography` — hierarchy within numbers and labels - `ui-antipatterns` — the failure modes of this skill - `chart-annotation` — hierarchy inside a chart - `artifact-theming` — making hierarchy survive both themes