// Determine what UI element draws attention first, second, third using size, weight, color, and de-emphasis strategies
Create clear typographic hierarchy using hand-crafted font sizes, weights, and colors
Create comprehensive palette with 8-10 greys, 5-10 primary, 5-10 accent shades
Use systematic spacing with 25% minimum jumps, start with excess whitespace
Create clear primary/secondary/tertiary action distinctions
Remove unnecessary borders, backgrounds, shadows, decorations
Create helpful, actionable zero-content states
| name | establish-visual-hierarchy |
| description | Determine what UI element draws attention first, second, third using size, weight, color, and de-emphasis strategies |
| domain | ui-design |
| skill-type | evaluative |
| version | 1.0.0 |
| author | refactoring-ui-expert |
| prerequisites | [] |
| dependencies | [] |
| input | [{"design_description":"string"},{"element_list":"array of {element, importance}"}] |
| output | [{"assessment":"PASS | FAIL"},{"ranked_elements":"array"},{"recommendations":"array of strings"}] |
Determine what UI element should draw attention first, second, third. Visual hierarchy controls the order in which users process information using size, weight, color, and de-emphasis strategies.
| Strategy | When to Use |
|---|---|
| Size + Weight | Primary headlines, important CTAs |
| Color Contrast | Secondary content, supporting text |
| De-emphasize | When primary isn't standing out |
| Weight/Contrast Balance | Icons next to text, borders |
Check visual weight of each element:
Don't rely on size alone:
If primary element isn't standing out:
H1: 48px, weight 700, dark ← Primary
CTA: 16px, solid brand color ← Secondary
Body: 16px, weight 400, grey ← Tertiary
Metric: 32px, weight 700 ← Primary
Label: 14px, weight 400, grey ← Secondary
Action: Text link, brand color ← Tertiary
| Anti-Pattern | Why It Fails | Fix |
|---|---|---|
| Logo larger than headline | Brand over value | Reduce logo, increase headline |
| 60px headline, 12px body | Size extremes | Use 40px + weight, 16px body |
| All bold text | Nothing stands out | Use weight hierarchy |
| Large section titles | Content buried | Make titles smaller than content |
references/size-isnt-everything.mdreferences/emphasize-by-de-emphasizing.mdreferences/ignore-document-hierarchy.mdSee examples/visual-hierarchy/ for before/after cases.