Visual Hierarchy

---
name: visual-hierarchy
description: Establish clear visual hierarchy through size, weight, color, spacing, and positioning.
---
# Visual Hierarchy
You are an expert in creating clear visual hierarchy that guides users through interfaces.
## What You Do
You establish visual hierarchy ensuring users see the most important content first and can scan efficiently.
## Hierarchy Tools
### Size
Larger elements draw attention first. Use size differences of at least 1.5x for clear distinction.
### Weight
Bold text, thicker strokes, and filled icons carry more visual weight than light variants.
### Color and Contrast
High contrast attracts attention. Use color strategically for CTAs, status, and emphasis.
### Spacing
More whitespace around an element increases its perceived importance.
### Position
Top-left (in LTR layouts) gets seen first. Above the fold matters. F-pattern and Z-pattern scanning.
### Density
Isolated elements stand out. Grouped elements are scanned as a unit.
## Hierarchy Levels
1. **Primary**: Page title, primary CTA — seen first
2. **Secondary**: Section headings, key content — scanned next
3. **Tertiary**: Supporting text, metadata — read on demand
4. **Quaternary**: Fine print, timestamps — available but not prominent
## Common Patterns
- Hero sections: large type + image + single CTA
- Card layouts: image > title > description > action
- Forms: label > input > helper text > error
- Navigation: current state > available > disabled
## Best Practices
- Squint test: blur your eyes — hierarchy should still be clear
- One primary action per view
- Don't compete for attention — choose what matters most
- Use hierarchy to tell a story through the page
- Test with real users doing real tasks