# Visual Hierarchy

> Create clear visual hierarchy in documents and slides so readers instantly understand what matters most. Use when layout feels flat, when readers miss key points, or when improving scannability of any document.

- Skill: `itsual/visual-hierarchy` (Agent Skill)
- Install (CLI): `npx skillmds@latest add itsual/visual-hierarchy`
- Raw SKILL.md: https://api.skillmd.com/api/skills/itsual/visual-hierarchy/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Docs & Writing
- Author: itsual (https://skillmd.com/u/itsual)
- Updated: 2026-09-21
- Page: https://skillmd.com/skills/itsual/visual-hierarchy

---


# Visual Hierarchy

## Overview

Visual hierarchy guides the eye. Without it, everything competes for attention and nothing stands out.

## When to Use

- Designing or reviewing slides, reports, one-pagers, or dashboards
- When feedback is “I don’t know where to look” or “it’s hard to scan”
- Improving existing documents that feel dense or flat

## Techniques

- **Size** — More important elements are larger
- **Weight** — Bold or stronger weight for emphasis
- **Color & contrast** — Higher contrast draws the eye
- **Position** — Top and left receive more attention in most Western reading patterns
- **Spacing** — More space around an element increases its importance
- **Repetition & alignment** — Consistent patterns help readers learn the structure

## Practical Rules

- Establish a clear primary focal point on every page/slide
- Limit the number of emphasis levels (usually 2–3 is enough)
- Use whitespace deliberately to group related items
- Avoid emphasizing everything — that emphasizes nothing

## Verification

- [ ] A new reader can identify the most important element in under 3 seconds
- [ ] Secondary and tertiary information is visibly subordinate
- [ ] The hierarchy supports, rather than fights, the content structure