Visual Design
When to use: After rendering verification passes. Before any design review. After completing initial layout.
The test: Squint at your screen from arm's length. Can you tell what's important, what's clickable, and where sections begin and end?
Contrast and Legibility
Every text element must be readable. No exceptions.
| Check | Threshold | How to Measure |
|---|---|---|
| Body text contrast | 4.5:1 minimum against background | Chrome DevTools color picker or axe DevTools |
| Large text contrast (18px+ bold or 24px+) | 3:1 minimum | Same tools |
| UI component contrast (borders, icons) | 3:1 minimum against adjacent colors | DevTools contrast checker |
| Link distinction | Underline OR 3:1 contrast against surrounding text | Visual inspection + contrast tool |
| Placeholder text | 4.5:1 minimum (it's real content until the user types) | DevTools computed color |
Legibility Checklist
- Body text 16px minimum on all viewports
- No text on image backgrounds unless overlay provides 4.5:1 contrast
- Light text on dark backgrounds uses 300+ weight (thin fonts disappear)
- Maximum 2-3 font families across the entire site
- Monospace reserved for code only
Typographic Scale
Consistent ratios create visual rhythm. Arbitrary sizes create noise.
| Element | Size Range | Weight | Line Height |
|---|---|---|---|
| H1 | 32-48px | Bold (700) | 1.1-1.2 |
| H2 | 24-32px | Semibold (600) | 1.2-1.3 |
| H3 | 18-24px | Medium (500) | 1.3-1.4 |
| Body | 16-18px | Regular (400) | 1.5-1.75 |
| Small/Caption | 14px | Regular (400) | 1.4-1.5 |
| Check | Threshold | How to Measure |
|---|---|---|
| Scale ratio consistent | All steps follow 1.2x, 1.25x, or 1.333x ratio | Divide each heading size by the next smaller |
| One H1 per page | Exactly 1 | DOM query: document.querySelectorAll('h1').length |
| Heading hierarchy unbroken | No skipped levels (H1 to H3 without H2) | DOM audit or axe DevTools |
| Line length (measure) | 45-75 characters per line | DevTools: set a ch unit counter or count manually |
| Paragraph spacing | Greater than line-height, less than 2x line-height | DevTools: compare margin-bottom to line-height |
Typography Checklist
- Each heading level at least 4px larger than the next (H1 > H2 by 8px+, H2 > H3 by 4px+)
- Body text line-height between 1.5 and 1.75
- Line length between 45 and 75 characters on desktop
- No orphaned headings (heading followed immediately by another heading)
- Caption/small text used only for supplementary information, never primary content
Spacing and Rhythm
Spacing tells the truth about relationships. Related items close, unrelated items far.
| Check | Threshold | How to Measure |
|---|---|---|
| Base unit defined | Single value (4px or 8px) | Check design tokens or CSS variables |
| All spacing is a multiple of base | Zero arbitrary values (17px, 23px) | DevTools: audit margin/padding values |
| Proximity principle | Space within groups less than space between groups | Compare intra-group vs inter-group spacing |
| Section padding consistent | Same vertical padding across all sections | DevTools: compare padding-top/bottom per section |
| No dead zones | No areas larger than 200px with zero content or interaction | Visual scan at each breakpoint |
Spacing Scale Reference
| Token | Value | Use |
|---|---|---|
| xs | 4px | Icon gaps, tight inline elements |
| sm | 8px | Within related form elements |
| md | 16px | Between elements in a group |
| lg | 24px | Between groups |
| xl | 32px | Between sub-sections |
| 2xl | 48px | Between sections |
| 3xl | 64-96px | Hero spacing, page-level divisions |
Spacing Checklist
- Consistent spacing scale used throughout (no magic numbers)
- Related items grouped tighter than unrelated items
- Section spacing larger than element spacing
- Padding inside containers is consistent within repeated patterns
- Touch targets have at least 8px clearance from adjacent targets
Visual Hierarchy
The eye must know where to go. One thing dominates, everything else supports it.
| Check | Threshold | How to Measure |
|---|---|---|
| Primary focal point | Exactly 1 per viewport-height of content | Screenshot at 25% zoom: one element clearly largest |
| Size progression | Each heading level 1.2x+ larger than the next | DevTools: divide each heading's computed font-size by the next |
| CTA color reserved | Primary action color appears on zero non-clickable elements | Search rendered page for the CTA hex value |
| Section boundaries visible | Spacing between sections 2x+ spacing within sections | DevTools: compare inter-section vs intra-section margins |
| Reading pattern respected | Key content on expected scan paths (top-left for F, diagonal for Z) | 5-second test: ask 3 people where their eyes went first |
F-Pattern
Users scan: top horizontal, shorter horizontal below, vertical down left side.
- Key information in top-left quadrant
- Headlines left-aligned
- First two paragraphs contain the most important information
- Bullet points break walls of text
Z-Pattern
Users scan: top-left to top-right, diagonal to bottom-left, bottom-left to bottom-right.
- Brand/logo top-left
- Navigation top-right
- Key visual/headline center
- CTA bottom-right
Color Hierarchy
- Maximum 3 colors plus neutrals
- Primary color reserved for main CTA only
- Secondary color for supporting actions
- Neutral palette for everything else
- Consistent color meaning (red = destructive, green = success) across all pages
Quick Diagnosis
| Symptom | Likely Cause | Fix |
|---|---|---|
| Everything looks the same | No size hierarchy | Make H1 at least 2x body size |
| Feels cramped | Insufficient whitespace | Double section spacing |
| Can't find the CTA | Competing colors | Reserve one color for actions only |
| Hard to scan | No visual anchors | Add section headers, increase spacing |
| Feels chaotic | Inconsistent spacing | Audit all values, apply spacing scale |
| Text hard to read | Low contrast or long lines | Check contrast ratio, reduce line length |
| Sections blur together | No visual boundaries | Add spacing, background color changes, or dividers |
Context
- Rendering Verification -- First verify it renders
- Responsive + Performance -- Then verify it works everywhere
- Landing Page -- Hierarchy optimized for conversion