From differentiating elements on a screen to conveying meaning, color plays a key role in creating products with effective interfaces and user experiences.
Our color principles were established to ensure that color is used in functional manner that is to communicate meaning and guide users through products effectively.
Ensure users with color blindness and/or low vision are able to use your products effectively by maintaining high contrast ratios between colors in your interface.
Do use colors with high contrast ratios next to each other on a screen.
Don't use colors with low contrast ratios next to each other on a screen.
Colors often carry inherent meanings that differ depending on cultural associations. It is important to take these inherent meanings into account when using color in your product’s interface.
Do use green to signify a successful interaction.
Don't use green to signify an unsuccessful interaction.
Color should always be used intentionally to guide users and focus their attention on the task at hand.
Do use color to emphasize important elements on a screen.
Don't use color to emphasize background elements on a screen.
Our color palettes work alongside our guiding principles to ensure an effective and logical use of color.
The Brand Palette is built around Denali’s blue brand color. These colors should be used on active elements such as links, buttons, and selection controls.
Do use brand colors for selection controls.
Don't use colors outside the brand palette for selection controls.
The Grey Palette is palette is built around . We recommend utilizing this palette for foundational interface elements such as such as backgrounds, cards, and containers as well as and to de-emphasize less important elements on a screen.
Do use grey to convey a disabled state.
Don't use a color other than grey to convey a disabled state.
The Status Palette is built around the inherent meanings we assign to color. These colors should be used in accordance with their meanings to convey danger (red), warning (yellow), success (green), and informational (blue) messages.
Do use green to convey successful upload.
Don't use yellow to convey a successful upload.
Data Visualization Palette
Our Data Visualization palette allows for clear representation of data.