visual-hierarchy — independently scanned and version-tracked by SaferSkills.
SaferSkills independently audited visual-hierarchy (Agent Skill) and scored it 100/100 (green). The audit ran 55 deterministic rules across Security, Supply Chain, Maintenance, Transparency, and Community; it found 0 high-severity and 0 lower-severity findings. The full rule-by-rule trace and per-finding evidence are below. Free, methodology-open.
Findings & checks · 0 flagged
Every scanned point with the score it earned and what moved between them.
First recorded scan — no prior version to compare against.
The primary manifest — the file an agent reads to learn what this artifact does.
Visual hierarchy is the discipline of ordering perceptual prominence on a surface so a reader's eye is led to what matters first, second, and third — before they read a single word. It works through a small, stackable set of signals: scale (larger draws attention before smaller), weight (heavier strokes before lighter), contrast (higher against the background before lower), color (saturated and warm before desaturated and cool), position (the reading-order entry point in the reader's culture, plus isolated centered elements that break flow), and isolation (whitespace around an element raises its prominence regardless of its intrinsic properties). The central insight is that hierarchy is produced by suppression, not amplification: most elements must be quiet so the few that need to be loud can be heard. When two elements compete, the move is to increase their difference along one signal rather than to increment many signals slightly, because loud-against-loud exhausts the reader while one loud element against many quiet ones directs them. Because the eye follows visual cues rather than source order, a hierarchy is correct only when it survives the perceptual test — squint at the surface, or render it in grayscale, and confirm the intended element is the first noticed.
Visual hierarchy is the ordering of perceptual prominence that tells a reader what to look at first, second, and third. The available signals are scale (larger draws attention before smaller), weight (heavier strokes draw attention before lighter), contrast (higher contrast against the background reads before lower), color (saturated and warm colors read before desaturated and cool), position (top-left in left-to-right reading cultures reads first; centered isolated elements break flow and draw focus), and isolation (whitespace around an element increases its prominence regardless of its intrinsic properties).
Type scale operationalizes scale as hierarchy. Modular scales — pairs of values related by a ratio (1.125 major second, 1.2 minor third, 1.25 major third, 1.333 perfect fourth, 1.414 augmented fourth, 1.5 perfect fifth, 1.618 golden ratio) — produce step sizes that feel intentional. The ratio chosen determines the perceptual distance between levels: a 1.125 ratio gives subtle hierarchy useful for content-dense interfaces; a 1.5 ratio gives loud hierarchy useful for marketing surfaces. Most production systems use 5–7 type sizes; more sizes dilute hierarchy by giving the reader too many similar steps.
Spacing creates hierarchy through proximity (Gestalt's law of proximity — items closer together read as grouped, items further apart read as separate) and through breathing room (an element with more whitespace around it reads as more important). Vertical rhythm — a consistent baseline grid that spacing values snap to — reinforces grouping without explicit dividers and makes the page feel calmer because the eye finds predictable resting points.
Contrast as ordering is more general than color contrast. Two equal-sized headlines can be ordered by weight (bold reads before regular), by color (filled black reads before mid-gray), or by treatment (underlined or boxed reads before plain). The principle: when two elements compete for attention, increase the difference along one dimension rather than incrementing many dimensions slightly. Loud-loud combinations exhaust the reader; one loud against many quiet directs them.
Hierarchy is what you suppress, not what you amplify. Making one thing important by making everything else louder produces a flat, noisy surface where nothing is important. The discipline is restraint: most elements should be quiet so the few that need to be loud can be heard.
Reading order is a property of the page, not just the markup. CSS source order, visual size, color contrast, and position all participate. When they disagree — a giant pull quote in the middle of an article, an overlay button that contrasts more than the page title — the reader's eye follows the visual cues regardless of the writer's intent. Verify hierarchy by asking what someone notices first, second, and third without reading.
<!-- skill-graph-context:start (generated — do not edit by hand) -->
Classification
designtrueWhen to use
visual hierarchy, type as hierarchy, what should the eye go to first, establishing focus, attention hierarchyNot for
typography-systemlayout-compositionRelated skills
typography-system, color-system-design, layout-composition, visual-design-foundationsConcept
Keywords
visual hierarchy, hierarchical type sizing, proximity hierarchy, contrast hierarchy, importance ordering, reading order, focal point, figure ground, gestalt principles, hierarchy through weight<!-- skill-graph-context:end -->
~30 seconds. Free. No account. Every finding cites a rule and a line of evidence.