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
Subtle
.bg-subtle
Subtlest
.bg-subtlest
Strong
.bg-strong
Inverse
.bg-inverse
Inverse subtle
.bg-inverse-subtle
Brand
.bg-brand
Brand subtle
.bg-brand-subtle
Brand strong
.bg-brand-strong
Success
.bg-success
Success subtle
.bg-success-subtle
Danger
.bg-danger
Danger subtle
.bg-danger-subtle
Danger strong
.bg-danger-strong
Info
.bg-info
Info subtle
.bg-info-subtle
Warning
.bg-warning
Warning subtle
.bg-warning-subtle
Accent orange
.bg-accent-orange
Accent cyan
.bg-accent-cyan
Accent olive
.bg-accent-olive
Accent magenta
.bg-accent-magenta
All color options
Brand: Aqua
ValueCSS class
100
200
300
400
500
600
650
700
800
900
1000
1100
Gray: Cool Neutral
ValueCSS class
25
50
100
200
300
400
500
600
700
800
900
1000
1100
Black
ValueCSS class
black
White
ValueCSS class
white
Success: Green
ValueCSS class
100
200
300
400
500
600
700
800
900
1000
1100
Warning: Yellow
ValueCSS class
100
200
300
400
500
600
700
800
900
1000
1100
Danger: Red
ValueCSS class
100
200
300
400
500
600
700
800
900
1000
1100
Info: Violet
ValueCSS class
100
200
300
400
500
600
700
800
900
1000
1100
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
200
300
400
500
600
700
800
900
1000
1100
Pink
ValueCSS class
100
200
300
400
500
600
700
800
900
1000
1100
Magenta
ValueCSS class
100
200
300
400
500
600
700
800
900
1000
1100
Olive
ValueCSS class
100
200
300
400
500
600
700
800
900
1000
1100
Cyan
ValueCSS class
100
200
300
400
500
600
700
800
900
1000
1100
Gray: Cool Neutral
ValueCSS class
25
50
100
200
300
400
500
600
700
800
900
1000
1100
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.
