The intentional assignment of color roles within a design system to direct attention and communicate priority — establishing primary, secondary, and functional colors that each serve a distinct purpose. A clear color hierarchy prevents visual noise from every element competing for attention and ensures that errors, success states, and primary actions are instantly distinguishable.
Common contexts
- Defining a single brand color as the primary action color and restricting its use to interactive elements only
- Auditing a dashboard where three shades of blue are used for buttons, links, and headings — causing scanning confusion
- Establishing semantic color tokens (success, warning, error, info) separate from brand palette tokens
Use when
Establish color hierarchy before building any component library — once colors are assigned inconsistently across components, refactoring is painful and disruptive. Start by defining roles (primary action, secondary action, destructive, neutral) and then assign colors to roles, not the other way around.
Avoid when
Color hierarchy alone cannot create visual hierarchy on a screen with poor layout and typography — color can reinforce structure but cannot compensate for the absence of it. Don't use color as the only differentiator between interactive and non-interactive elements, since this creates an accessibility barrier for colorblind users.
Color hierarchy works when you treat color as a system, not a palette — the question isn't 'what colors do we use?' but 'what does each color mean, and what happens when we break that rule?'
Real-world examples
- Spotify uses green exclusively for primary interactive elements (play buttons, CTAs), white for primary text, and grey for secondary information, creating a clear three-level colour hierarchy.
- Google's Material Design assigns distinct roles to primary, secondary, and surface colours, ensuring that interactive elements always stand out from background and content areas.
- Duolingo applies colour hierarchy by making the 'Continue' CTA bright green, error states red, and correct states green, so users understand system status through colour alone.