The colors in our palette communicate the reliability of our product and the authenticity of our team’s values. The color palette foundation creates a consistent experience for users and ensures compliance with Web Content Accessibility Guidelines (WCAG) 2.1 AA requirements by thoughtfully pairing background and foreground colors. This means that components with various color options like badges, alerts, and buttons will have a more harmonious feel to them.
Working with color
Reinforce the purpose of the page
Always use color that supports the purpose of the content and the overall goal of the page. Color can help communicate things like hierarchy of information, interactive states, and distinct elements, all of which make it easier for users to get their work done.
Design accessible experiences
The color system is designed to meet Web Content Accessibility Guidelines (WCAG) 2.1 AA requirements by thoughtfully pairing background and foreground colors. Sufficient contrast makes things easier to find, identify, and interact with for all users. However, you should never convey information using color alone. For example, using an icon or a label in addition to using red, yellow, or green when communicating the status of something ensures that the status is visible to users who are color blind.
Create heirarchy
Color plays a key role in creating the overall hierarchy of a screen. Using the subtle and strong token variants is an easy way to change that hierarchy and draw a user’s attention to the right place.
Brand and Neutrals
Brand: Aqua
ValueHex valueSASS variableCSS variable
100
200
300
400
500
600
650
700
800
900
1000
1100
Gray: Cool Neutral
ValueHex valueSASS variableCSS variable
25
50
100
200
300
400
500
600
700
800
900
1000
1100
Black
ValueHex valueSASS variableCSS variable
black
White
ValueHex valueSASS variableCSS variable
white
Functional
Success: Green
ValueHex valueSASS variableCSS variable
100
200
300
400
500
600
700
800
900
1000
1100
Warning: Yellow
ValueHex valueSASS variableCSS variable
100
200
300
400
500
600
700
800
900
1000
1100
Danger: Red
ValueHex valueSASS variableCSS variable
100
200
300
400
500
600
700
800
900
1000
1100
Info: Violet
ValueHex valueSASS variableCSS variable
100
200
300
400
500
600
700
800
900
1000
1100
Accents
Use sparingly for charts, avatars, illustrations, etc.
Orange
ValueHex valueSASS variableCSS variable
100
200
300
400
500
600
700
800
900
1000
1100
Pink
ValueHex valueSASS variableCSS variable
100
200
300
400
500
600
700
800
900
1000
1100
Magenta
ValueHex valueSASS variableCSS variable
100
200
300
400
500
600
700
800
900
1000
1100
Olive
ValueHex valueSASS variableCSS variable
100
200
300
400
500
600
700
800
900
1000
1100
Cyan
ValueHex valueSASS variableCSS variable
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.
