skills.rest
pnewsam
pnewsamCOMMUNITY
Explore all skills by this author →
Website𝕏@paultakumaGitHub

design-hierarchy

Applies visual hierarchy principles to establish clear emphasis and reading order in UI designs.

1|Updated Apr 15, 2026
Search Tags:#typography#contrast#design review#ui design#visual hierarchy#emphasis
One-click install
npx skills add https://github.com/pnewsam/skills --skill design-hierarchy-pnewsam
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-hierarchy
Source: https://github.com/pnewsam/skills/tree/main/archive/design-hierarchy
Command: npx skills add https://github.com/pnewsam/skills --skill design-hierarchy-pnewsam

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Interfaces often contain the right content but feel noisy or flat because everything competes for attention or the wrong element dominates. This Skill provides principles and measurable heuristics to establish one clear visual lead and calm, intentional emphasis. ## Core Features & Use Cases - Hierarchy Ladders: Defines five visual levels (lead, section, body, support, background) with concrete treatments for each. - Measurable Heuristics: Provides emphasis budgets, type-size limits, lead contrast tests, and accent counts to diagnose vague or noisy hierarchy. - Common Fixes: Maps frequent problems like competing metadata or multiple primary actions to specific demotion and promotion moves. - Use Case: When reviewing a dashboard where every card has a bright badge and strong shadow, use this Skill to pick one lead metric, demote supporting elements, and produce a structured review with the top hierarchy fixes. ## Quick Start Use the design-hierarchy skill to review this screen and tell me what should visually lead and which elements to demote.

Frequently Asked Questions about design-hierarchy

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I fix a UI where everything competes for attention?▼

Pick one visual lead per view or component, then demote everything else by one level. Remove unnecessary accents, reduce secondary contrast, and collapse redundant labels before making the primary element bigger or brighter.

What is a hierarchy ladder in UI design?▼

A hierarchy ladder is a small set of visual levels: lead, section, body, support, and background. Each level gets a distinct treatment, and a component should use no more than 4-5 levels to avoid feeling fiddly.

How many text sizes should a UI component use?▼

Use no more than 3 prominent text sizes inside one component and 2-3 type sizes for most page regions. Size differences must be intentional: 30px versus 20px reads as hierarchy, while 30px versus 28px reads as noise.

When should I use design-hierarchy versus ui-visual-hierarchy?▼

Use ui-visual-hierarchy to decide what users should notice first based on task priority and scanning mechanics. Use design-hierarchy afterward to make that priority visually convincing through emphasis, contrast, and de-emphasis.

Why does my interface feel busy even with good spacing?▼

Count all accents together: strong color, shadows, heavy borders, large type, and filled buttons. A region with 5 accents feels busy even if each treatment is individually defensible, so demote secondary elements first.

Related Skills

Explore More Design & Creative Skills→
dembrandtdembrandt
33

visual-emphasis-and-hierarchy

Establish clear visual hierarchy for buttons, CTAs, and interface layouts.

Official
Intermediate
bergsidebergside
2.3k

modern

Implement editorial Modern UI with serif typography and semantic tokens.

Official
Intermediate
htafollahtafolla
5

ui-ux-design

Design mobile-first user interfaces with WCAG 2.1 AA accessibility compliance.

Community
Advanced
mpuigmpuig
9

slides-critique

Review presentation decks for storytelling quality, visual hierarchy, and content effectiveness.

Community
Advanced