From grimoire
Arranges screen elements by importance using size, weight, contrast, and whitespace so the eye naturally travels from most to least important.
How this skill is triggered — by the user, by Claude, or both
Slash command
/grimoire:design-visual-hierarchyThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Use size, weight, contrast, whitespace, and position to signal importance — so users understand what to focus on first without reading every element on the screen.
Use size, weight, contrast, whitespace, and position to signal importance — so users understand what to focus on first without reading every element on the screen.
Adopted by: Apple Human Interface Guidelines, Google Material Design, and IBM Carbon Design System all specify typographic scales, color hierarchies, and spacing systems explicitly to enforce visual hierarchy; NNG's eye-tracking research applies visual hierarchy as the primary framework for predicting where users look and in what order; every major design system (Figma, Atlassian, Shopify Polaris) encodes hierarchy through component elevation, type scale, and color system Impact: Lidwell et al. (2003) document that pages with clear visual hierarchy reduce time-on-task by 20–35% compared to visually flat layouts of equivalent content; NNG eye-tracking studies confirm that in the absence of deliberate hierarchy, users impose F-pattern or Z-pattern reading on pages — meaning they miss content outside those paths; Weinschenk (2011) cites pre-attentive processing research showing that size, color, and position differences of sufficient magnitude are processed in < 250ms — before conscious attention — making hierarchy legible without reading Why best: Flat design (equal visual weight for all elements) maximizes information density at the cost of parsability — every element competes for attention equally; visual hierarchy is the mechanism that converts a list of elements into a communicative layout; without it, users cannot quickly identify the primary action, the most important information, or where to start
Sources: Lidwell, Holden & Butler "Universal Principles of Design" (Rockport, 2003); NNG "Visual Hierarchy" (Babich, 2017); Weinschenk "100 Things Every Designer Needs to Know About People" (New Riders, 2011) Ch. 1–4; Treisman "Preattentive processing in vision" (Computer Vision, Graphics, and Image Processing, 1985)
Every screen should have exactly one element with maximum visual weight — the primary focal point. This is typically:
If multiple elements compete for the highest visual weight, there is no hierarchy — there is noise.
Ask: "If a user has 3 seconds on this screen, what is the one thing they must see?" That element gets the top of the hierarchy.
Work from the primary element outward. Assign each element to a level:
| Level | Relative weight | Typical treatment |
|---|---|---|
| Primary | Maximum | Largest size, highest contrast, most prominent position |
| Secondary | Supporting | Moderate size, medium contrast, adjacent to primary |
| Tertiary | Background | Smallest size, lowest contrast, subdued color |
Most screens need no more than 3 hierarchy levels. Four or more levels create visual complexity without additional communicative value.
Size: Larger = more important. A heading at 32px vs body at 16px creates a 2:1 size ratio — perceivable without comparison. Avoid typographic scales where heading and body sizes differ by less than 4px.
Weight: Bold = important within the same size. Use weight to differentiate elements at the same hierarchy level (bold label vs regular value).
Contrast: High contrast = important. Primary text at 4.5:1 contrast ratio against background (WCAG AA); secondary text at 3:1 is perceivable but visually recedes; tertiary UI at 1.5–2:1 is background.
Whitespace / proximity: Elements with more whitespace around them receive more attention. The primary CTA surrounded by 24px padding is more prominent than the same button at 8px padding. Whitespace is an active design element, not empty space.
Position: Users in LTR languages read top-left first. Primary content goes in the top-left or center; secondary content follows; tertiary is lower or peripheral. On mobile, primary actions go at the bottom of the viewport (reachable with thumb) — counter to desktop hierarchy conventions.
Screenshot the design and apply a 5–8px Gaussian blur. The primary element should still be identifiable as the most prominent thing on screen. If the hierarchy is only visible at full resolution, it is too subtle to be pre-attentively processed.
If the primary CTA blurs into the same visual weight as surrounding elements:
Too many primary elements:
Problem: Three buttons with equal size, weight, and color — all "primary"
Fix: Designate one as primary (filled), demote others to secondary (outline) or tertiary (text link)
Hierarchy inversion:
Problem: The metadata (date, author, category) is styled more prominently than the headline
Fix: Reduce metadata to tertiary treatment; increase headline contrast and size
Flat card grids:
Problem: 12 cards with identical visual weight — no primary signal, no hierarchy between cards
Fix: If cards are equal, that is correct; if one is featured or preferred, elevate it (larger, elevated shadow, or accent color)
Mobile requires adjustments to desktop hierarchy:
Encode the hierarchy decisions in the type scale, color tokens, and spacing system so they apply consistently without per-component decisions:
Type scale: display-xl (48px) > heading-1 (32px) > heading-2 (24px) > body (16px) > caption (12px)
Color: text-primary (contrast 7:1) > text-secondary (4.5:1) > text-disabled (2:1)
Elevation: card-raised (shadow-md) > card-flat (border-only) > surface (no elevation)
npx claudepluginhub jeffreytse/grimoire --plugin grimoireGuides visual hierarchy in UIs using size, weight, color, spacing, position, and density. Defines levels, patterns for heroes/cards/forms, and practices like squint test.
Guides UI visual hierarchy with size/weight/color levers, three-tier architecture, one dominant element per screen, de-emphasis, F/Z-patterns for headings, CTAs, focal points.
Determine what UI element draws attention first, second, third using size, weight, color, and de-emphasis strategies