On this page
Visual hierarchy is the order in which people notice things. You cannot opt out of it: if you do not decide the order, the loudest colour or the biggest box decides for you. The framework below is a sequence of decisions, each one built on the last.
One example runs through the note: an invoice screen in a client portal. The person opening it wants to know how much they owe, by when, and how to pay.
01Decide what matters most before you design
Hierarchy starts as a content decision, not a styling one. Before choosing sizes or colours, rank everything on the screen by how much it matters to the person's task. Be strict: only one thing can be first.
- 1Amount due and due dateThe question the user arrived with.Primary
- 2StatusDue soon, overdue or paid. Changes what happens next.Secondary
- 3Pay invoiceThe one action most visitors take.Action
- 4Line items, invoice number, clientNeeded to check, not to understand.Supporting
- 5Download PDF, ask a questionUsed by a minority, so present but quiet.Tertiary
If the team cannot agree on the order, that is a product question, and no amount of styling will fix it. Settle it with the people who own the task, or with evidence of what users come to do.
02Use typography to define levels of importance
Type does most of the hierarchy work in an interface. Three or four levels are enough for most screens. More than that, and the levels get too close in size for anyone to tell them apart.
- Change more than one property per level. Size plus weight, or size plus colour. A level that differs by 1px is not a level.
- Use a scale. A ratio between 1.2 and 1.33 gives steps that feel related. Pick values from it rather than tuning each heading by eye.
- Keep weight scarce. If every label is bold, bold stops meaning anything. Most screens need one bold style and one semibold.
- Small caps text is a label, not a heading. Uppercase with tracking works for short metadata. For anything longer than a few words it slows reading.
03Use spacing and grouping to clarify relationships
Space tells people what belongs together before they read a word. The rule is simple: the space inside a group must be smaller than the space between groups. When every gap is the same, the screen reads as one long list.
Six fields, one rhythm. Which ones belong together?
8px inside a group, 24px between groups. A short heading confirms what the space already says.
Borders and backgrounds can also group content, but they add visual weight. Try space first. Reach for a container when space alone is not enough, for example when groups sit side by side in a dense layout.
04Apply contrast and colour intentionally
Contrast is relative. A dark heading only stands out if the text around it is lighter. Most interfaces need three text tones: one for primary content, one for secondary text, one for metadata. Keep all three readable. Under WCAG 2.2, body text needs a contrast ratio of at least 4.5:1 against its background, and large text at least 3:1.
Colour is the strongest signal you have, so give it a job. In the invoice, colour means two things only: the status of the invoice and the action you can take. Everything else is neutral.
The 60-30-10 split comes from interior design: about 60% of the area in a dominant neutral, 30% in a supporting tone, and 10% in an accent. It is a useful starting point, because it forces you to keep the accent scarce.
Nothing about 60-30-10 is specific to interfaces, and no study shows that these exact proportions work better. Data-heavy screens often need far less than 10% accent; marketing pages may use more. Use it to check that the accent is rare. Status colours (error, warning, success) sit outside the budget, because they appear when the content demands it.
Do not rely on colour alone for meaning. Pair every status colour with a word or an icon, so the hierarchy survives colour blindness, a greyscale print, or a bright screen in sunlight.
05Reserve visual emphasis for meaningful actions
Buttons are hierarchy too. When every action has a filled, coloured button, they compete, and the user has to read them all to choose. Decide which action most people take, make that one primary, and step the others down.
Three colours, three equal weights, and green now looks like "pay".
Filled, outlined, text. The order of importance is visible at a glance.
Destructive actions need their own treatment. Deleting an invoice may be rare, but it needs a distinct style and a confirmation step. Distinct does not mean prominent: place it away from the primary action so it is not hit by mistake.
06Test the hierarchy at different screen sizes
A hierarchy that works on a wide screen can fall apart on a phone. Side-by-side columns stack, and suddenly the supporting details sit above the amount due. Check the reading order at every breakpoint, not just the layout.
A quick test that works at every size: blur the screen. Squint, or apply a blur filter to a screenshot. What you can still make out is your real hierarchy.
Three blobs of colour and a heading. The amount is lost.
The amount, the status and the button survive. That is the order a reader will follow.
07Before and after: one screen, refined
Here is the whole framework applied to the invoice. The content is the same in both versions, apart from a status rewritten in words. Only the hierarchy decisions differ.
What changed, and why:
- The amount became the largest element, because it is the answer to the user's first question. The page heading became a small label.
- Status moved next to the amount and gained a word, not just a colour.
- Labels lost their bold. Values carry the weight; labels are muted and small.
- Two groups replaced one list, using space first and a single divider.
- One primary action, with the others stepped down to outline and text.
- Colour now has two jobs only: status and the primary action.
And this is the order a first-time reader is likely to follow in the refined version:
- Amount due. Largest, darkest, top left of the content.
- Status. The only tinted element next to the amount, with a word.
- Pay invoice. The only filled colour on the card.
- Line items. Read only by people who want to check the total.
08A hierarchy checklist
- Content is ranked, and there is exactly one first item.
- No more than four type levels, each different in at least two properties.
- Space inside groups is clearly smaller than space between groups.
- Text tones meet contrast minimums: 4.5:1 for body text, 3:1 for large text.
- Colour has a defined job, and every colour-coded meaning also has a word or icon.
- One primary action per view; other actions are visibly lower in weight.
- The blur test shows the same order you intended.
- The reading order holds on a phone, not only on a wide screen.