hierarchy-color-and-tone

What problem does it solve?

This Skill helps you construct clear visual hierarchy by using color emphasis and tone (value/contrast/saturation) instead of relying on color alone, improving both usability and accessibility.

Core Features & Use Cases

• Tone-first hierarchy: Uses value and contrast as the most portable, accessibility-reliable axis for deciding what should visually recede versus stand out.
• Color as category, not rank: Encodes meaning through hue (state/category) while avoiding hue-based “ranking” that fails for color-blind users.
• Saturation for emphasis: Reserves saturated color for moments of emphasis while muting everything else to reduce noise.
• Neutral ramp construction: Builds a small, consistent neutral ramp (with optional brand tinting) so the UI stays cohesive and learnable.
• Status badge and palette guidance: Applies worked patterns for semantic badges and for choosing a primary color vs. neutrals and destructive/success semantics.

Quick Start

Use hierarchy-color-and-tone to design or repair your UI’s color emphasis and tone ladder for text, badges, and status semantics when the page feels too flat or too noisy.