Color supports meaning and status, directs attention, and stays accessible across the interface.
Color has purpose
The purpose of using color has to be clear. Color needs to support a message or status that’s easily identifiable.
Each use of color is purposefully tied to a specific meaning. For instance, red signifies critical errors, green represents success, and blue draws attention to tips and offers. Using color as decoration is exclusive to illustration.
Do
Use color to support the different states people need to be informed about.
Don’t
Use color to decorate or to distract people from performing tasks.
Color has impact
A predominantly neutral (black and white) interface intentionally creates a neutral backdrop. With this monochromatic base, elements that incorporate color gain heightened visual impact and prominence.
Use appropriate shades to convey the importance of what’s being communicated, directing focus toward crucial information, actions, and visual cues.
Do
Use strong, vivid colors to grab attention for the things that matter most.
Don’t
Contradict or diminish messaging by using subdued colors or grayscale for critical things.
Color relationships
Color roles define the value of each concept of UI they style; color relationships define how those concepts are used together.
- Background — the baseline of all UI. Background colors sit behind everything; multiple backgrounds only coexist side by side, never stacked.
- Surface — the most versatile role. Surfaces back prominent elements like cards and banners, with hierarchical levels to raise or lower emphasis.
- Fill — the background for smaller elements like buttons and badges. Fills are usually the most vibrant color and carry their own on-fill text and icon colors.
Do
Use surface colors for surfaces (cards, tables, banners, modals) and fills on small, attention-drawing elements.
Don’t
Mix multiple surface roles in one component, or use fills as backgrounds for entire interfaces.
Color is accessible
Consistent color palettes back each color role, so each color has a defined relationship within the overall palette. Never rely on color alone to communicate meaning — pair it with text, icons, or other cues so the interface works for everyone.