visual-hierarchy
owl-listener/designer-skills
Establish visual hierarchy through size, weight, color, spacing, and position to guide user attention.
What is visual-hierarchy?
This skill helps you create clear visual hierarchy in interface design by strategically using size, weight, color, spacing, and position to ensure users see the most important content first and can scan efficiently. Use it when composing new designs; for critiquing existing screens, use the companion critique-visual-hierarchy skill.
- Apply size differences (1.5x minimum) to distinguish hierarchy levels
- Use weight and contrast strategically to emphasize CTAs, status, and key content
- Leverage whitespace and positioning (top-left, above-fold) to increase perceived importance
- Group related elements and isolate key items to control visual scanning
- Establish four hierarchy levels: primary (page title, main CTA), secondary (section headings), tertiary (supporting text), and quaternary (fine print)
- Test hierarchy clarity with the squint test and validate with real user tasks
How to install visual-hierarchy
npx skills add https://github.com/owl-listener/designer-skills --skill visual-hierarchyHow to use visual-hierarchy
- 1.Identify the primary action or content users should see first
- 2.Apply size differences of at least 1.5x between hierarchy levels
- 3.Use weight (bold, thick strokes) and color contrast to emphasize key elements
- 4.Add whitespace around important elements to increase perceived importance
- 5.Position critical content top-left and above the fold in LTR layouts
- 6.Group related elements and isolate standout items
- 7.Apply the squint test: blur your eyes to verify hierarchy is still clear
- 8.Test the layout with real users performing actual tasks
Use cases
- Designing hero sections with large type, imagery, and a single primary CTA
- Structuring card layouts with image prominence, title, description, and action in scanning order
- Organizing forms with clear label-input-helper-error visual relationships
- Creating navigation that distinguishes current state, available, and disabled options
- Composing multi-section pages that guide users through content in intended order
- UI/UX designers
- Product designers
- Interface composers
- Design system contributors
- Anyone creating new visual layouts
visual-hierarchy FAQ
visual-hierarchy is for composing and creating new designs with clear hierarchy from the start. critique-visual-hierarchy (in visual-critique) is for analyzing and judging the hierarchy of existing screens.
Use at least 1.5x size difference for clear distinction between levels. Larger differences (2x or more) create stronger visual separation.
No. Best practice is one primary action per view. Multiple competing primary elements confuse users about what matters most.
Blur your eyes or squint at the design. If the visual hierarchy is clear even when blurred, it's working well. You should still see what's most important.
Test with real users doing real tasks. Watch where their eyes go first and whether they can find key content efficiently. Adjust size, weight, spacing, or position based on observed behavior.
Full instructions (SKILL.md)
Source of truth, from owl-listener/designer-skills.
name: visual-hierarchy
description: Establish hierarchy through size, weight, colour, spacing, and position so the eye lands in the intended order. Use when composing new work. For judging an existing screen, use critique-visual-hierarchy (visual-critique).
Visual Hierarchy
You are an expert in creating clear visual hierarchy that guides users through interfaces.
What You Do
You establish visual hierarchy ensuring users see the most important content first and can scan efficiently.
Hierarchy Tools
Size
Larger elements draw attention first. Use size differences of at least 1.5x for clear distinction.
Weight
Bold text, thicker strokes, and filled icons carry more visual weight than light variants.
Color and Contrast
High contrast attracts attention. Use color strategically for CTAs, status, and emphasis.
Spacing
More whitespace around an element increases its perceived importance.
Position
Top-left (in LTR layouts) gets seen first. Above the fold matters. F-pattern and Z-pattern scanning.
Density
Isolated elements stand out. Grouped elements are scanned as a unit.
Hierarchy Levels
- Primary: Page title, primary CTA — seen first
- Secondary: Section headings, key content — scanned next
- Tertiary: Supporting text, metadata — read on demand
- Quaternary: Fine print, timestamps — available but not prominent
Common Patterns
- Hero sections: large type + image + single CTA
- Card layouts: image > title > description > action
- Forms: label > input > helper text > error
- Navigation: current state > available > disabled
Best Practices
- Squint test: blur your eyes — hierarchy should still be clear
- One primary action per view
- Don't compete for attention — choose what matters most
- Use hierarchy to tell a story through the page
- Test with real users doing real tasks
Related skills
More from owl-listener/designer-skills and the wider catalog.
von-restorff-effect
Make one element stand out by differentiating it from its surroundings to capture attention and memory.
wireframe-spec
Specify wireframe layouts with content priority, component placement, and interaction annotations.
a-b-test-design
Design statistically rigorous A/B experiments with clear hypotheses, metrics, and sample sizing.
accessibility-audit
Audit interfaces against WCAG 2.2 with severity ratings and remediation steps.
migrate-oxfmt
Migrate your JavaScript/TypeScript project from Prettier or Biome to Oxfmt with automated config conversion.
migrate-oxlint
Automated migration guide from ESLint to Oxlint, a high-performance Rust-based linter.