Visual Hierarchy Checklist
When to use: Before any design review. After completing initial layout.
The test: Squint at your screen. Can you tell what's important?
The Squint Test
Run this 5-point check on every viewport:
- One element dominates - Something is clearly most important
- Clear progression - Size decreases from primary to tertiary
- Breathing room - Sections separated by generous whitespace
- Pattern respected - F or Z reading flow not broken
- CTA stands out - Action color not used elsewhere
Typography Scale
Checklist
- H1 is largest, only one per page
- H2 clearly smaller than H1
- H3 clearly smaller than H2
- Body text 16-18px minimum
- Line length 70-80 characters max
- Line height 1.5 for body text
Reference Scale
| Element | Size | Weight | Use |
|---|---|---|---|
| H1 | 32-48px | Bold | Page title (one only) |
| H2 | 24-32px | Semibold | Section headers |
| H3 | 18-24px | Medium | Subsections |
| Body | 16-18px | Regular | Content |
| Small | 14px | Regular | Captions, meta |
Spacing Rhythm
Checklist
- Consistent scale used (4/8/16/24/32/48/64px)
- No arbitrary values (17px, 23px)
- Related items grouped tightly
- Unrelated items separated generously
- Section spacing larger than element spacing
Reference Scale
| Context | Spacing | Use |
|---|---|---|
| Tight | 4-8px | Within related elements |
| Normal | 16-24px | Between elements |
| Loose | 32-48px | Between sections |
| Dramatic | 64-96px | Hero sections |
Color Hierarchy
Checklist
- Max 3 colors + neutrals
- Primary color for main CTA only
- Secondary color for supporting actions
- Neutral palette for everything else
- CTA color never on non-clickable elements
Contrast Requirements
| Element | Minimum Ratio |
|---|---|
| Body text | 4.5:1 |
| Large text (18px+ bold) | 3:1 |
| UI components | 3:1 |
| Focus indicators | 3:1 |
Reading Patterns
F-Pattern (Text-Heavy Pages)
Users scan:
- Horizontal line across top
- Shorter horizontal line below
- Vertical scan down left side
Checklist:
- Key info in top-left quadrant
- Headlines left-aligned
- Important content in first two paragraphs
- Bullet points break up walls of text
Z-Pattern (Visual Pages)
Users scan:
- Top-left to top-right
- Diagonal to bottom-left
- Bottom-left to bottom-right
Checklist:
- Logo/brand top-left
- Navigation top-right
- Key visual/headline center
- CTA bottom-right
Quick Diagnosis
| Symptom | Likely Problem | Fix |
|---|---|---|
| Everything looks same | No size hierarchy | Make H1 much bigger |
| Feels cramped | Not enough whitespace | Double section spacing |
| Can't find CTA | Competing colors | Reserve one color for actions |
| Hard to scan | No visual anchors | Add section headers |
| Feels chaotic | Inconsistent spacing | Use spacing scale |
References
- Design tokens:
tailwind.config.js - Typography components:
src/components/design-system/Typography.jsx - Grid patterns:
.claude/agents/designer-khoi-vinh.md