visual-emphasis-and-hierarchy

Highlights primary actions and content using size, color, weight, contrast, and positioning.

Updated May 24, 2026
One-click install
npx skills add https://github.com/yonetim258852/ozgur-os --skill visual-emphasis-and-hierarchy
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: visual-emphasis-and-hierarchy
Source: https://github.com/yonetim258852/ozgur-os/tree/main/.claude/skills/visual-emphasis-and-hierarchy
Command: npx skills add https://github.com/yonetim258852/ozgur-os --skill visual-emphasis-and-hierarchy

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Visual hierarchy ensures the most important actions and content are immediately noticeable, improving legibility and decision speed for users.

Core Features & Use Cases

  • Establishes emphasis through size, color, weight, contrast, and positioning to guide attention.
  • Applies to button groups, CTAs, dashboards, cards, and layouts with varying content importance.
  • Supports consistent design systems by promoting a single primary action per view and clear visual signals of priority.

Quick Start

Ensure the primary action on a screen is visually dominant and supported by surrounding whitespace.

Frequently Asked Questions about visual-emphasis-and-hierarchy

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

FAQPage Schema
What is visual hierarchy in UI design and how does it guide user attention?

Visual hierarchy in UI design uses size, color, weight, contrast, and positioning to make primary actions stand out. It guides user attention to a single primary action per view, improving legibility and decision speed.

How do I make a CTA button stand out in a button group?

To make a CTA stand out in a button group, apply visual emphasis through size, color, weight, contrast, and positioning. Enforce a single primary action per view and support it with surrounding whitespace.

Can I apply visual emphasis principles to dashboard layouts?

Yes, visual emphasis applies to dashboard layouts and cards where elements carry varying importance. It establishes clear priority signals so users immediately notice the most critical data and actions.

What is the best way to design a UI with multiple actions of varying importance?

The best way to handle varying content importance is to enforce a single primary action per view. Use size, color, weight, contrast, and positioning as primary design signals to establish clear visual priority.

Why should a dashboard UI enforce a single primary action per view?

Enforcing a single primary action per view prevents visual competition among UI elements. It ensures the most important actions and content are immediately noticeable, which improves legibility and decision speed.