Hierarchy
How the page is composed — layout, density, spacing rhythm, and emphasis — so dense enterprise screens stay scannable and guide the eye to what matters under pressure.
Principles
Hierarchy is the spatial and structural decision that comes before color and motion. It decides where the eye lands first.
Hierarchy is a decision, not a default
Every screen answers one question first: what is the most important thing here? If everything is emphasized, nothing is. Decide the single primary element, make it unmistakable, let everything else recede.
Density is a feature, not a flaw
Enterprise users want to see a lot at once. Don't pad BCMS into a consumer app. The goal is organized density — a high information rate that's still scannable. Whitespace groups; it isn't a goal in itself.
The eye scans in a known order
People read top-to-bottom, left-to-right, big-before-small, color-before-grey. Put the thing they need most where they look first. Layout that fights the scan path costs every user a fraction of a second, every time.
Group by meaning, separate by space
Related things look together; unrelated things get air between them. Proximity is the cheapest, strongest grouping signal you have — use space before you reach for a border or a box.
Spacing rhythm
Fortiv uses a 4px-based scale. Space communicates relationship: the gap between two elements should reflect how related they are. Tighten within a group, loosen between groups.
| Space | Token | Use for |
|---|---|---|
| 4–8px | --space-1 / --space-2 | Inside a component — label to value, icon to text |
| 12–16px | --space-3 / --space-4 | Between related items — fields in a form, rows in a list |
| 24–32px | --space-6 / --space-8 | Between groups — card to card, section to section |
| 48px+ | --space-12+ | Between major page regions |
Choosing the right container
The most common BCMS layout decision: how do I present this set of things? Match the container to the data and the task. Beware the card trap — a grid of 30 cards is a worse table.
| Use | When | Why |
|---|---|---|
| Table | Many items, comparable across the same fields; user sorts/filters by column | Columns align values for comparison. The BCMS default for lists of activities, plans, dependencies. |
| List | Many items, one primary label each, light secondary detail | Lighter than a table when there's nothing to compare column-by-column. |
| Cards | Few items (≤ ~8), each a rich object the user picks between | Cards cost a lot of space per item — only worth it when each item earns it. |
| Detail panel / page | One item, viewed in depth | Use label–value pairs and sections, not a one-row table. |
| Stat / KPI | A single number that matters on its own | Promote the number; demote the label. |
Page structure
A BCMS screen reads top to bottom in decreasing importance. Each screen has at most one primary action.
| Layer | What it is | |
|---|---|---|
| 1 | Where am I | Breadcrumb / page title — small, oriented, never the loudest thing. |
| 2 | What's the headline | The primary metric, status, or main object. The one thing the page is about. |
| 3 | What can I do | Primary action, near the headline. One primary action per screen. |
| 4 | The substance | The table, detail, or content. The largest area. |
| 5 | The periphery | Filters, metadata, secondary nav. Present but quiet. |
Emphasis: the tools, in order
To make something stand out, reach for these in order — cheapest and most reversible first. Demote the label, promote the value: most BCMS data is label–value pairs, and getting that one habit right fixes half of all hierarchy problems.
Position
Put it first / top-left / largest area.
Size
Bigger type, bigger element.
Weight
Bold the value, keep the label regular.
Space
Give it room; crowding de-emphasizes.
Color
Last, and sparingly. The loudest signal — spend it only on what's truly most important or status-bearing.
Review checklist
Common hierarchy issues and their fixes. Use this when reviewing layout code.
| Before | After | Why |
|---|---|---|
| Everything bold / same size | One clear primary, rest recede | If everything is emphasized, nothing is |
| Grid of 30 cards | Table | Cards are for choosing between a few, not listing many |
| Arbitrary padding: 13px | A --space-* token | Stay on the 4px scale; ragged spacing reads as careless |
| Equal gaps inside and between groups | Tighter within, looser between | Proximity must reflect relationship |
| Label same weight as value | Bold the value, mute the label | Promote what matters; most data is label–value |
| Two primary buttons | One primary, one secondary | One primary action per screen |
| Color as the only emphasis | Add size / weight / position | Hierarchy must survive greyscale and colorblindness |
| Heading level skipped for size | Correct level + token sizing | Semantic order is not font size |
| Full-bleed paragraph text | Capped reading width | Long lines hurt readability |
| Wrapped two-line table rows | Truncate + hover for full value | Keep the grid scannable |
Use this as a Claude skill
This page is also a Claude Code skill. The same guidance you read here is what the agent applies when it writes or reviews code — so the product stays consistent with what is documented.