Guidelines

Usage

Defining how we apply color to user interfaces

The use of color plays a key role in how we convey emotions, establish brand identity, and guide user interactions. Consistent and thoughtful color choices also improve usability, highlight important elements, and create a cohesive design language across the product.

Text

Text color can vary depending on the background surface. By default, text color should be neutral when on a neutral background (see Accessibility for more information WCAG color contrast ratio requirements.

General principles

  • Use neutral values for general heading (strong) and body copy (default)
  • Primary (Blue 400) is reserved for link color
  • Use sparingly
  • Refer to color themes for brand or feedback color guidelines
  • Bold text should be at least 18.5px and 24px for non-bold copy on core values.

Neutral

Use to express default and less-opinionated UI elements such as background colors, icons, and text elements.

ColorEmphasisInteractionDescription
Black
defaultactiveCopy on an active neutral or low emphasis surface
White
inverseCopy on any medium or strong surface color (ex: buttons, alerts)
Black
strongCopy on a default neutral or low emphasis surfaces (ex: headings, links)
Black 300
defaultBody copy on a default neutral surface color
Examples
user interface example where neutral colors are applied to text

Primary and info

Use our brand color to tie in the most important user moments with how we express ourselves as an organization through our identity. You can also use these in info moments.

ColorEmphasisDescription
Blue 600
strongText color on 100-level primary surfaces
Blue 500
mediumText color on default neutral default
Blue
defaultText color on default neutral surface (bold text should be at least 18.5px and 24px for non-bold copy)
Examples
user interface example where primary colors are applied to text
Add missing guidance to usage content mapping
ColorEmphasisDescription
Indigo
defaultText color on default neutral surface (bold text should be at least 18.5px and 24px for non-bold copy)
Indigo 600
strongText color on 100-level guidance surfaces
Indigo 500
mediumText color on default neutral default
Examples
user interface example where guidance colors are applied to text

Accents

Use as a subtle background for accent purposes.

ColorEmphasisDescription
Purple 500
strongText color on 100-level accent surfaces
Examples
user interface example where accent colors are applied to text

Success, finance and ratings

Use for positive monetary moments, like income patterns, discounts, savings, and revenue growth.

ColorEmphasisDescription
Green
defaultText color on default neutral surface (ex: savings, discounts, revenue growth, etc) (bold text should be at least 18.5px and 24px for non-bold copy)
Green 600
strongText color on 100-level success surfaces (ex: savings, discounts, revenue growth, etc)
Green 500
mediumText color on default neutral default (ex: savings, discounts, revenue growth, etc)
Examples
user interface example where success colors are applied to text

Alert

Use to convey a sense of urgency, to assist in preventing potential errors or security issues, and for negative monetary moments like revenue loss.

ColorEmphasisDescription
Red
defaultText color on default neutral surface (ex: revenue loss) (bold text should be at least 18.5px and 24px for non-bold copy)
Red 600
strongText color on 100-level alert surfaces (ex: revenue loss)
Red 500
mediumText color on default neutral default (ex: revenue loss)
Examples
user interface example where alert colors are applied to text

Caution

Use for moments that are trending in a negative direction, but don't require the user to take immediate action.

ColorEmphasisDescription
Yellow 600
strongText color on 100-level caution surfaces (ex: downward trends)
Examples
user interface example where caution colors are applied to text