visual-emphasis-and-hierarchy - Design UI Visual Hierarchy for Better UX
Apply size, color, weight, and position to establish clear visual hierarchy in UI designs
Tags
Updated: 2026-06-30Capabilities
Typical Inputs
Typical Outputs
What this skill does
- create hierarchy ladder
- design button groups
- apply size emphasis
- use colour for emphasis
- apply whitespace
- adjust typography weight
- create text shadow
- position elements
- distinguish actions
- set cursor pointer
Inputs
- brand colour
- product images
- dashboard data
- page content
- form fields
- action buttons
Outputs
- hierarchical button groups
- visually emphasized content
- positioned elements
- stylized typography
- text overlay on images
- pointer cursor on interactive elements
Requirements
- CSS support
- design system access