Visual hierarchy
The order in which people notice elements on a screen: first, second, third and last.
What it is
Visual hierarchy is the order in which users notice elements on a screen: first, second, third, and last.
Why it matters
People usually scan a screen rather than read everything. An effective visual hierarchy guides their attention intentionally.
Example: no hierarchy vs. clear hierarchy
Card 1 · No hierarchy
Design Systems Meetup
A night of talks on building and scaling design systems.
Thursday, Nov 12 · 6:30 PM
Kent Hall, Room 204
Registration closes Nov 10
Register
- Everything has the same size, weight, color, and spacing.
- It is difficult to tell what is important.
Card 2 · Clear hierarchy
Design Systems Meetup
A night of talks on building and scaling design systems.
Thursday, Nov 12 · 6:30 PM
Kent Hall, Room 204
Registration closes Nov 10
- The heading stands out.
- Registration information is easy to find.
- Spacing supports readability.
How to create visual hierarchy
Use size, font weight, color, contrast, spacing, position, depth, shape, and motion to establish importance. Typography supports hierarchy through choices such as size and weight.
1.Size
Larger elements tend to attract attention first, because size is usually read as importance.
Example type scale: illustrative values, not fixed rules.
| Text role | Size | Preview |
|---|---|---|
| Main heading | 48 px | Aa |
| Section heading | 24 px | Aa |
| Card title | 18 px | Aa |
| Body text | 16 px | Aa |
| Metadata | 14 px | Aa |
| Caption | 12 px | Aa |
Common mistake: Using a 32 px main heading and a 28 px section heading can make the levels feel too similar. Choose a clear difference between levels.
Before
Main heading
Section heading
32 px over 28 px. The levels blur together.
After
Main heading
Section heading
48 px over 24 px. A clear step.
2.Font weight
Changing font weight can signal importance even when the text size stays the same.
| Weight | Name | Preview |
|---|---|---|
| 300 | Light | Visual hierarchy |
| 400 | Regular | Visual hierarchy |
| 500 | Medium | Visual hierarchy |
| 600 | Semibold | Visual hierarchy |
| 700 | Bold | Visual hierarchy |
| 800 | Extra bold | Visual hierarchy |
3.Color
Color can help separate primary content from supporting information. In a dark interface, a white heading will often attract attention before a gray paragraph.
Example: Visually tone down the navigation sidebar so the main content stands out, rather than making the main content increasingly colorful. Keep supporting text readable.
Before
- Inbox
- Projects
- Reports
Weekly summary
12 tasks done, 3 waiting on review.
The sidebar is louder than the content.
After
- Inbox
- Projects
- Reports
Weekly summary
12 tasks done, 3 waiting on review.
Sidebar toned down. The heading leads.
4.Contrast
Contrast is a noticeable difference between elements. It is not limited to color. Contrast can come from:
- Large vs. small
- Bold vs. light
- Black vs. gray
- Filled vs. outlined
- Sharp vs. rounded
- Bright vs. dark
- Dense vs. spacious
- Moving vs. static
Example: If “Cancel” and “Continue” have identical visual emphasis, the primary action may not be clear. Give the intended primary action more emphasis.
Before
Same weight. Which one is the main action?
After
Continue is filled, so it leads.
5.Spacing
Spacing communicates relationships and makes content easier to scan.
Example: Elements placed close together feel related. Larger gaps help separate different groups or sections.
Before
Equal gaps. Labels float between fields.
After
Tight pairs, wider gaps between them.
6.Position
Where an element appears influences when people notice it. People often scan from top to bottom, so placement should support the intended reading order.
Example: Placing the company name or product introduction only at the bottom may delay users' understanding of what the product is.
Before
- Send invoices in a minute
- Automatic payment reminders
- Reports for tax season
Ledger
Invoicing for freelancers.
The product name comes last.
After
Ledger
Invoicing for freelancers.
- Send invoices in a minute
- Automatic payment reminders
- Reports for tax season
Name and intro first, then features.
7.Depth
Depth helps distinguish background content from elements that need immediate attention. Depth can come from shadows, borders, overlays, blur, elevation, layering, and scale.
Example: A modal appears above the page and signals that users should address it before returning to the background content.
Before
Delete project?
This can't be undone.
The dialog blends into the page.
After
Delete project?
This can't be undone.
Overlay and shadow lift it above the page.
8.Shape
A distinct shape can help an element stand out. If everything looks the same, shape does little to communicate priority.
Example: A filled button and a ghost button use different treatments to distinguish primary and secondary actions.
Before
Same shape. Neither leads.
After
Filled vs. ghost. Publish leads.
9.Motion
Motion has strong visual weight. Among many static elements, a moving element is likely to attract attention.
Common mistake: Animating the navigation, floating cards, glowing cursor, heading, background particles, and pulsing buttons all at once creates competition and weakens the hierarchy.
Before
Messages
Everything moves, so nothing stands out.
After
Messages
Only the new message moves.
Visual weight: bringing it all together
Visual weight is how strongly an element attracts the eye. For example, an element that is large + bold + bright + centered can have enormous visual weight.
Each step adds one lever.
The goal is not to make everything stand out. It is to make the most important elements stand out first.
Putting it together: levels on a real hero
Here's a hero for Linden Health, a clinic template, with each element marked by its level. Every lever from above is at work: size and weight make the headline level 1, a filled shape makes the booking button level 2, and color and size push the trust details down to level 5.
- Level 1, the headline: the biggest, heaviest, darkest text. It says what Linden Health is about in one line.
- Level 2, the primary action: the only filled shape on the screen, so the next step is never in doubt.
- Level 3, the supporting line: regular weight and softer gray. It explains the headline once the reader is interested.
- Level 4, the name and secondary action: easy to find when needed, without competing with the booking button.
- Level 5, trust and utility: “Accepting new patients”, the rating and the menu. Small and quiet, but they reassure people who are deciding.