Visual Hierarchy

Fluid Typography Scale

Use clamp(min, preferred, max) for fluid type that scales between breakpoints without jumps.

:root {
  /* Fluid type scale — adapts between ~375px and ~1280px viewport */
  --text-xs:   clamp(0.75rem,  0.70rem + 0.25vw, 0.875rem);
  --text-sm:   clamp(0.875rem, 0.82rem + 0.30vw, 1rem);
  --text-base: clamp(1rem,     0.92rem + 0.40vw, 1.125rem);
  --text-lg:   clamp(1.125rem, 1.00rem + 0.60vw, 1.375rem);
  --text-xl:   clamp(1.25rem,  1.10rem + 0.75vw, 1.75rem);
  --text-2xl:  clamp(1.5rem,   1.25rem + 1.25vw, 2.25rem);
  --text-3xl:  clamp(1.875rem, 1.50rem + 1.90vw, 3rem);
  --text-4xl:  clamp(2.25rem,  1.75rem + 2.50vw, 3.75rem);
}

Key rules:

Body text: 16px minimum (1rem) — never smaller for continuous reading
Line height: 1.4–1.6 for body text; 1.1–1.3 for headings
Optimal line length: 45–90 characters desktop, 30–50 characters mobile
Letter spacing: 0 to +0.02em for body; −0.02em to −0.04em for large headings

Spacing System (4px base grid)

All spacing values should be multiples of 4px for visual consistency.

:root {
  --space-1:  0.25rem;  /*  4px */
  --space-2:  0.5rem;   /*  8px */
  --space-3:  0.75rem;  /* 12px */
  --space-4:  1rem;     /* 16px */
  --space-5:  1.25rem;  /* 20px */
  --space-6:  1.5rem;   /* 24px */
  --space-8:  2rem;     /* 32px */
  --space-10: 2.5rem;   /* 40px */
  --space-12: 3rem;     /* 48px */
  --space-16: 4rem;     /* 64px */
  --space-20: 5rem;     /* 80px */
  --space-24: 6rem;     /* 96px */
}

User Scanning Patterns

Research from Nielsen Norman Group eye-tracking studies (2006–2024):

Pattern	Shape	When it occurs	Layout implication
F-pattern	Two horizontal bands + left vertical	Text-heavy pages, unfocused reading	Place key info top-left; front-load headings with meaningful words
Z-pattern	Diagonal from top-left to bottom-right	Landing pages, minimal UI	Logo top-left, CTA bottom-right, key message along diagonal
Layer-Cake	Horizontal bands (headings only)	Motivated users scanning for info	Use meaningful subheadings; bold keywords; avoid generic labels
Spotted	Jump to visuals/links/bold text	Users seeking specific content	Use visual anchors; highlight action words; bold CTAs
Commitment	Top-to-bottom linear	High-motivation, interested users	Reward with well-structured content; don't waste early paragraphs

Practical rules:

First 2 words of a heading carry 80% of scanning weight — make them meaningful
Users read ~28% of words on a page on average
Layer-Cake is the most effective pattern to design for after initial F-pattern entry

Cognitive Load Reduction

Miller's Law: Working memory holds 7 ± 2 chunks. Keep navigation items, form fields, and choice options within this range.

Progressive Disclosure types:

Staged disclosure — linear steps (wizard, onboarding)
Contextual disclosure — show details relevant to current action (tooltip, expand)
Feature-based — reveal advanced options only when needed ("Advanced settings...")
Interaction-triggered — appear on demand (accordion, "Show more")

Chunking patterns:

Bad:  12 navigation items in a flat list
Good: 4 groups × 3 items each (same 12 items, 4 cognitive units)

Bad:  Phone: 0612345678
Good: Phone: 06 1234 5678  (chunked into familiar groups)

Hick's Law: Decision time increases logarithmically with number of choices. Reduce choices at every decision point.

Visual Weight Principles

Visual weight determines what users look at first. In descending order of weight:

Factor	High weight	Low weight
Size	Large elements	Small elements
Contrast	High contrast vs background	Low contrast
Color	Saturated / warm colors	Desaturated / cool / gray
Position	Top-left, center	Bottom-right, edges
Isolation	Surrounded by whitespace	Crowded with other elements
Motion	Animated elements	Static elements
Shape	Irregular, complex	Rectangular, simple

Hierarchy creation rule: For any screen, one element should have clearly the highest visual weight (primary focus), one or two secondary, and the rest tertiary. Multiple "primary" elements = no hierarchy.

Whitespace as Design Element

Whitespace is not empty — it actively communicates grouping, importance, and breathing room.

Gestalt proximity: Elements close together are perceived as a group. Use consistent internal vs. external spacing.

Component internal spacing: --space-3 to --space-4  (12–16px)
Between components:         --space-6 to --space-8  (24–32px)
Section separations:        --space-12 to --space-16 (48–64px)
Page padding (mobile):      --space-4  (16px min)
Page padding (desktop):     --space-8 to --space-16

Macro vs micro whitespace:

Micro: Padding inside buttons, cells, inputs — affects scanability
Macro: Space between sections and components — affects perceived quality; generous macro whitespace signals premium

Research finding: Increasing whitespace around text and titles increases comprehension by 20%.

Related Skills

styling/tailwindcss — implementation utilities (spacing, text sizing)
styling/shadcn-ui — component-level whitespace and typography tokens
accessibility/wcag — contrast ratios for color in hierarchy
ux/design-systems — tokens that codify the spacing and type scale
ux/interaction-design — motion and loading states

Deep Knowledge

Load via mcp__documentation__fetch_docs:

ux-visual-hierarchy — full scanning pattern data, cognitive load research, fluid typography reference

visual-hierarchy