Colors

From differentiating elements on a screen to conveying meaning, color plays a key role in creating products with effective interfaces and user experiences.


Guiding Principles

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.

Accessibility First

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.

Communicate Meaning

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.

Convey Hierarchy

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.


Color Palettes

Our color palettes work alongside our guiding principles to ensure an effective and logical use of color.

Brand Palette

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.

Grey Palette

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.

Status Palette

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.

Do use green to indicate upward trends.

Don't use red to indicate upward trends.