Color is a key element in our design system used to create meaning and consistency. Our color palette helps to unify our brand’s experiences, from product interfaces to marketing.
You can apply color to:
- Convey emotion
- Express a tone
- Guide attention
- Pinpoint critical items
Below you will find a set of well-defined guidelines on how to work with our colors.
Brand colors
Primary colors
Our primary color palette is designed for use throughout our digital products within interfaces and for branding. Primary colors are displayed most frequently across our products' screens and components.
Primary colors are used for:
- Key actions such as primary call to action buttons
- Highlighted content
- Form field elements
We chose colors that offer a range of uses and that meet or exceed standards in supporting accessibility and contrast for low vision users.
The guidelines indicate how colors should be applied, noting where some should be utilized sparingly and with purpose for specific components like errors or messaging.
Secondary colors
These are accent colors to provide additional lightness and style to pages looking for a more modern flair. These colors should be used to highlight important features on a page, such as buttons, or for visual style elements, such as illustrations. They should be used sparingly and never draw the eye to more than one piece of information at a time.
Accent colors
Accent colors are used sparingly to support primary and secondary colors in designs and illustrations.
Primary accent colors
Neutral colors
Text colors
Background colors
These colors are used largely for background blocks and large content areas. When alternating between tones, be sure to use enough contrast between adjacent colors.
Status colors
These colors are used largely to indicate the status of something. Be cautious using these colors to signify something that may contradict what most people would expect the colors to be used for.
Informational
Success
Warn
Error
Focus colors
Accessibility considerations
Text contrast
WCAG 2.0+ AA requires a contrast ratio of a minimum of 4.5:1 for normal, or body, text. Large text is easier to read, so the contrast requirement is reduced to 3:1. WCAG defines large text as text that is 24px and larger or 18.5px and larger if it is bold.
Text over gradients and background images still need to meet contrast requirements.
Non-text contrast
Elements that are not text, but still important, including buttons, icons that convey information, data visualizations (charts and graphs), and form inputs need a contrast ratio of at least 3:1. Also included in this are states of elements such as the selected state of an element, expanded vs. collapsed, active vs. inactive, elements with keyboard focus, etc.
Easily test your color combinations
Note that the colors listed only display colors that are available but when you are pairing colors together, make sure the color contrast ratio is sufficient. Here are three tools we suggest for testing color contrast: