Skip to content

Colors

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.

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.

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.

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.

ValueHex valueSASS variableCSS variable

100

200

300

400

500

600

650

700

800

900

1000

1100

ValueHex valueSASS variableCSS variable

25

50

100

200

300

400

500

600

700

800

900

1000

1100

ValueHex valueSASS variableCSS variable

black

ValueHex valueSASS variableCSS variable

white

ValueHex valueSASS variableCSS variable

100

200

300

400

500

600

700

800

900

1000

1100

ValueHex valueSASS variableCSS variable

100

200

300

400

500

600

700

800

900

1000

1100

ValueHex valueSASS variableCSS variable

100

200

300

400

500

600

700

800

900

1000

1100

ValueHex valueSASS variableCSS variable

100

200

300

400

500

600

700

800

900

1000

1100

Use sparingly for charts, avatars, illustrations, etc.

ValueHex valueSASS variableCSS variable

100

200

300

400

500

600

700

800

900

1000

1100

ValueHex valueSASS variableCSS variable

100

200

300

400

500

600

700

800

900

1000

1100

ValueHex valueSASS variableCSS variable

100

200

300

400

500

600

700

800

900

1000

1100

ValueHex valueSASS variableCSS variable

100

200

300

400

500

600

700

800

900

1000

1100

ValueHex valueSASS variableCSS variable

100

200

300

400

500

600

700

800

900

1000

1100

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.

Learn more about accessible color

View in Figma