Visual Hierarchy
The organisation of elements so the eye naturally follows the intended reading order.
Plain English
Visual hierarchy is the answer to "where do I look first?" Every page has a job to do — sell, inform, guide. Hierarchy creates a path through the content so users immediately understand the most important thing, then the second most important, and so on. Size, weight, colour, spacing, and position all contribute. The single most common mistake in amateur UIs is making everything the same size and weight, forcing users to read every word to extract meaning.
Technical
Hierarchy is implemented through the combined variation of typographic weight (font-weight), size (font-size), colour/opacity (contrast and saturation), spacing (margin, padding, line-height), and positioning (proximity, alignment, whitespace). A minimum three-level system (primary / secondary / tertiary) is needed for most UIs. Z-pattern and F-pattern are well-documented reading patterns that hierarchy should reinforce.
Live Demo
No hierarchy — everything equal
Acme Dashboard
Analytics Overview
Revenue is up 12% this quarter compared to the same period last year, driven by new enterprise customers.
See full report
Last updated: today
Clear hierarchy — guided reading
Acme Dashboard
Analytics Overview
Revenue is up 12% this quarter compared to the same period last year, driven by new enterprise customers.
Last updated: today
Identical content — only font-size, font-weight, and colour vary.
Usage
✓ Good usage
Set the card title to 20px/600 weight in ink-900, the supporting text to 14px/400 in ink-600, and the metadata to 12px/400 in ink-400.
✗ Bad usage
All text at 16px/400 weight in the same colour forces the eye to read every line equally — there is no clear entry point.
Recommended values
- Primary text: heaviest weight (600–700), largest size, highest contrast
- Secondary text: medium weight (400–500), 60–80% of primary size, slightly reduced contrast
- Tertiary / metadata: regular weight (400), smallest size, ink-500 or lighter
- Minimum 3 distinct levels in any content-heavy layout
Common mistakes
- Using only font-size to create hierarchy — font-weight and colour are equally important levers.
- Creating too many levels (6+) — the eye loses the sense of priority when everything is "sort of different".
- Overusing bold — when everything is bold, nothing is bold.
AI Prompt Example
Copy this into Claude, Cursor, Bolt, or v0.
Create a three-level text hierarchy: headings at 24px bold in #0f172a, body at 16px regular in #475569, captions at 12px regular in #94a3b8.