Hierarchy is the difference between a page users understand instantly and a page that requires effort to parse. It's not decoration — it's communication architecture. This guide covers the techniques and the rules for using them deliberately.
The Hierarchy Techniques
| Technique | How it works | Watch for |
|---|---|---|
| Size | Larger elements feel more important | Diminishing returns above 3x ratio |
| Weight | Bolder type / heavier elements draw eye | Too much bold = none stands out |
| Color | Saturated or high-contrast colors pop | Color-only signals fail accessibility |
| Spacing | White space around an element isolates it | Powerful and underused |
| Position | Top-left and natural focal points get noticed first | Culture-dependent (RTL vs LTR) |
| Contrast | Bigger visual difference = bigger perceived importance gap | Contrast levels should match meaning levels |
The Rules
- One primary focal point per screen. Identify it and protect it.
- Stack techniques. The most important elements typically combine multiple techniques (largest + bold + most saturated + most whitespace).
- Restraint matters. The contrast between "loud" and "quiet" creates hierarchy. If everything is loud, nothing is.
- Keep ratio meaningful. The size step between H1 and H2 should match the importance step.
- Test the squint. Squint at your design — what stands out should be the most important content.
Common Failures
- Every paragraph has a bold word, eroding the meaning of bold.
- Multiple "primary" CTAs on a single screen.
- Headline and body type look almost the same size.
- Background color competes with primary content for attention.
- Visual emphasis driven by aesthetics, not communication importance.
A Reliable Workflow
- List the content elements and rank them by importance.
- Assign type scale, weight, and color to match the ranking.
- Add spacing to isolate the most important elements.
- Squint test. Adjust. Repeat.
- Test with real users — if they can't identify the primary action, hierarchy is failing.
Try It Yourself
Build type hierarchy with the DesignKit color and gradient tools.
Color Palette Extractor →