Background

The colors in our palette communicate the reliability of our product and the authenticity of our team’s values. They enhance the user experience, from the way customers engage with our product to the connections we forge through our content.

Condensed palette with paired foreground

Each background color is paired with a foreground color. The foreground is considered text and ensures that any color chosen is accessible. However, there may be cases where the background color is used for the text color. In such cases, it’s the responsibility of the designer to meet WCAG 2.1 AA requirements.

Figma variables nameClass nameCopy code

• Neutral
  .bg-neutral
  bg-neutralCopy to Clipboard
• Subtle
  .bg-subtle
  bg-subtleCopy to Clipboard
• Subtlest
  .bg-subtlest
  bg-subtlestCopy to Clipboard
• Strong
  .bg-strong
  bg-strongCopy to Clipboard
• Inverse
  .bg-inverse
  bg-inverseCopy to Clipboard
• Inverse subtle
  .bg-inverse-subtle
  bg-inverse-subtleCopy to Clipboard
• Brand
  .bg-brand
  bg-brandCopy to Clipboard
• Brand subtle
  .bg-brand-subtle
  bg-brand-subtleCopy to Clipboard
• Brand strong
  .bg-brand-strong
  bg-brand-strongCopy to Clipboard
• Success
  .bg-success
  bg-successCopy to Clipboard
• Success subtle
  .bg-success-subtle
  bg-success-subtleCopy to Clipboard
• Danger
  .bg-danger
  bg-dangerCopy to Clipboard
• Danger subtle
  .bg-danger-subtle
  bg-danger-subtleCopy to Clipboard
• Danger strong
  .bg-danger-strong
  bg-danger-strongCopy to Clipboard
• Info
  .bg-info
  bg-infoCopy to Clipboard
• Info subtle
  .bg-info-subtle
  bg-info-subtleCopy to Clipboard
• Warning
  .bg-warning
  bg-warningCopy to Clipboard
• Warning subtle
  .bg-warning-subtle
  bg-warning-subtleCopy to Clipboard
• Accent orange
  .bg-accent-orange
  bg-accent-orangeCopy to Clipboard
• Accent cyan
  .bg-accent-cyan
  bg-accent-cyanCopy to Clipboard
• Accent olive
  .bg-accent-olive
  bg-accent-oliveCopy to Clipboard
• Accent magenta
  .bg-accent-magenta
  bg-accent-magentaCopy to Clipboard

All color options

Use these extended pairings sparingly.

The consistent use of color keeps cognitive load low and makes for a unified and engaging user experience. For that reason, 80% of designs should utilize the condensed palette. Designs that require additional colors, may use these options. It’s the responsibility of the designer to meet WCAG 2.1 AA requirements.

Brand: Aqua

ValueCSS class

100

.bg-brand-100Copy to Clipboard

200

.bg-brand-200Copy to Clipboard

300

.bg-brand-300Copy to Clipboard

400

.bg-brand-400Copy to Clipboard

500

.bg-brand-500Copy to Clipboard

600

.bg-brand-600Copy to Clipboard

650

.bg-brand-650Copy to Clipboard

700

.bg-brand-700Copy to Clipboard

800

.bg-brand-800Copy to Clipboard

900

.bg-brand-900Copy to Clipboard

1000

.bg-brand-1000Copy to Clipboard

1100

.bg-brand-1100Copy to Clipboard

Gray: Cool Neutral

ValueCSS class

25

.bg-neutral-25Copy to Clipboard

50

.bg-neutral-50Copy to Clipboard

100

.bg-neutral-100Copy to Clipboard

200

.bg-neutral-200Copy to Clipboard

300

.bg-neutral-300Copy to Clipboard

400

.bg-neutral-400Copy to Clipboard

500

.bg-neutral-500Copy to Clipboard

600

.bg-neutral-600Copy to Clipboard

700

.bg-neutral-700Copy to Clipboard

800

.bg-neutral-800Copy to Clipboard

900

.bg-neutral-900Copy to Clipboard

1000

.bg-neutral-1000Copy to Clipboard

1100

.bg-neutral-1100Copy to Clipboard

Black

ValueCSS class

black

.bg-blackCopy to Clipboard

White

ValueCSS class

white

.bg-whiteCopy to Clipboard

Success: Green

ValueCSS class

100

.bg-success-100Copy to Clipboard

200

.bg-success-200Copy to Clipboard

300

.bg-success-300Copy to Clipboard

400

.bg-success-400Copy to Clipboard

500

.bg-success-500Copy to Clipboard

600

.bg-success-600Copy to Clipboard

700

.bg-success-700Copy to Clipboard

800

.bg-success-800Copy to Clipboard

900

.bg-success-900Copy to Clipboard

1000

.bg-success-1000Copy to Clipboard

1100

.bg-success-1100Copy to Clipboard

Warning: Yellow

ValueCSS class

100

.bg-warning-100Copy to Clipboard

200

.bg-warning-200Copy to Clipboard

300

.bg-warning-300Copy to Clipboard

400

.bg-warning-400Copy to Clipboard

500

.bg-warning-500Copy to Clipboard

600

.bg-warning-600Copy to Clipboard

700

.bg-warning-700Copy to Clipboard

800

.bg-warning-800Copy to Clipboard

900

.bg-warning-900Copy to Clipboard

1000

.bg-warning-1000Copy to Clipboard

1100

.bg-warning-1100Copy to Clipboard

Danger: Red

ValueCSS class

100

.bg-danger-100Copy to Clipboard

200

.bg-danger-200Copy to Clipboard

300

.bg-danger-300Copy to Clipboard

400

.bg-danger-400Copy to Clipboard

500

.bg-danger-500Copy to Clipboard

600

.bg-danger-600Copy to Clipboard

700

.bg-danger-700Copy to Clipboard

800

.bg-danger-800Copy to Clipboard

900

.bg-danger-900Copy to Clipboard

1000

.bg-danger-1000Copy to Clipboard

1100

.bg-danger-1100Copy to Clipboard

Info: Violet

ValueCSS class

100

.bg-info-100Copy to Clipboard

200

.bg-info-200Copy to Clipboard

300

.bg-info-300Copy to Clipboard

400

.bg-info-400Copy to Clipboard

500

.bg-info-500Copy to Clipboard

600

.bg-info-600Copy to Clipboard

700

.bg-info-700Copy to Clipboard

800

.bg-info-800Copy to Clipboard

900

.bg-info-900Copy to Clipboard

1000

.bg-info-1000Copy to Clipboard

1100

.bg-info-1100Copy to Clipboard

Data visualization colors

Data visualization is the representation of information in pictorial or graphical format, such as charts, graphs, maps, and diagrams. These visuals aid in the communication of complex data so that insights can be more easily drawn.

Because color can affect our perception of information, the appropriate use of color is critical in making a data visualization successful.

Orange

ValueCSS class

100

.bg-orange-100Copy to Clipboard

200

.bg-orange-200Copy to Clipboard

300

.bg-orange-300Copy to Clipboard

400

.bg-orange-400Copy to Clipboard

500

.bg-orange-500Copy to Clipboard

600

.bg-orange-600Copy to Clipboard

700

.bg-orange-700Copy to Clipboard

800

.bg-orange-800Copy to Clipboard

900

.bg-orange-900Copy to Clipboard

1000

.bg-orange-1000Copy to Clipboard

1100

.bg-orange-1100Copy to Clipboard

Pink

ValueCSS class

100

.bg-pink-100Copy to Clipboard

200

.bg-pink-200Copy to Clipboard

300

.bg-pink-300Copy to Clipboard

400

.bg-pink-400Copy to Clipboard

500

.bg-pink-500Copy to Clipboard

600

.bg-pink-600Copy to Clipboard

700

.bg-pink-700Copy to Clipboard

800

.bg-pink-800Copy to Clipboard

900

.bg-pink-900Copy to Clipboard

1000

.bg-pink-1000Copy to Clipboard

1100

.bg-pink-1100Copy to Clipboard

Magenta

ValueCSS class

100

.bg-magenta-100Copy to Clipboard

200

.bg-magenta-200Copy to Clipboard

300

.bg-magenta-300Copy to Clipboard

400

.bg-magenta-400Copy to Clipboard

500

.bg-magenta-500Copy to Clipboard

600

.bg-magenta-600Copy to Clipboard

700

.bg-magenta-700Copy to Clipboard

800

.bg-magenta-800Copy to Clipboard

900

.bg-magenta-900Copy to Clipboard

1000

.bg-magenta-1000Copy to Clipboard

1100

.bg-magenta-1100Copy to Clipboard

Olive

ValueCSS class

100

.bg-olive-100Copy to Clipboard

200

.bg-olive-200Copy to Clipboard

300

.bg-olive-300Copy to Clipboard

400

.bg-olive-400Copy to Clipboard

500

.bg-olive-500Copy to Clipboard

600

.bg-olive-600Copy to Clipboard

700

.bg-olive-700Copy to Clipboard

800

.bg-olive-800Copy to Clipboard

900

.bg-olive-900Copy to Clipboard

1000

.bg-olive-1000Copy to Clipboard

1100

.bg-olive-1100Copy to Clipboard

Cyan

ValueCSS class

100

.bg-cyan-100Copy to Clipboard

200

.bg-cyan-200Copy to Clipboard

300

.bg-cyan-300Copy to Clipboard

400

.bg-cyan-400Copy to Clipboard

500

.bg-cyan-500Copy to Clipboard

600

.bg-cyan-600Copy to Clipboard

700

.bg-cyan-700Copy to Clipboard

800

.bg-cyan-800Copy to Clipboard

900

.bg-cyan-900Copy to Clipboard

1000

.bg-cyan-1000Copy to Clipboard

1100

.bg-cyan-1100Copy to Clipboard

Gray: Cool Neutral

ValueCSS class

25

.bg-neutral-25Copy to Clipboard

50

.bg-neutral-50Copy to Clipboard

100

.bg-neutral-100Copy to Clipboard

200

.bg-neutral-200Copy to Clipboard

300

.bg-neutral-300Copy to Clipboard

400

.bg-neutral-400Copy to Clipboard

500

.bg-neutral-500Copy to Clipboard

600

.bg-neutral-600Copy to Clipboard

700

.bg-neutral-700Copy to Clipboard

800

.bg-neutral-800Copy to Clipboard

900

.bg-neutral-900Copy to Clipboard

1000

.bg-neutral-1000Copy to Clipboard

1100

.bg-neutral-1100Copy to Clipboard

Accessibility

As a customer-centric brand, we strive to make color decisions that are friendly toward all levels of vision. Our standard is AA, meaning the text color and background color have a contrast ratio of at least 4.5.

Design resources

View in Figma