Our design system leverages a purposeful set of color styles as the perfect starting point for any brand or project. When it comes to color, contrast is critical for ensuring text is legible. We've added WCAG 2.2 contrast ratios to our color system so you can make sure you're designing with accessibility in mind.
Our three primary colors are used in all branded materials. They are dominant for creating recognition and are consistent across all our digital platforms, use them as much as possible like in Illustrations, individual elements, buttons, text, backgrounds and so on. Primary purple color contains a palette of 12 distinct purple tones. It includes two of our main colors Purple 900 and 600. Accent primary green 300 color contains a palette of 12 distinct green tones.
The table below includes a visual representation of each color, along with its color code, hexadecimal notation, and a plain white or black foreground color contrast ratio against background. Tone values range from 950 (dark) to 25 (light). Everything in between is the tones going from the darkest to the lightest color.
.svg)
Our tow base colors are pure black and white.
We have three specific neutral palettes: Grey, Steel, and Graphite. These colors are applied to surfaces, buttons, text, outline and layout elements.
Secondary blue, orange and red colors complement our primary colors. These colors can be used for subtle backgrounds and elements.
Our three primary colors are used in all branded materials. They are dominant for creating recognition and are consistent across all our digital platforms, use them as much as possible like in Illustrations, individual elements, buttons, text, backgrounds and so on. Primary purple color contains a palette of 12 distinct purple tones. It includes two of our main colors Purple 900 and 600. Accent primary green 300 color contains a palette of 12 distinct green tones.
The table below includes a visual representation of each color, along with its color code, hexadecimal notation, and a plain white or black foreground color contrast ratio against background. Tone values range from 950 (dark) to 25 (light). Everything in between is the tones going from the darkest to the lightest color.
Our tow base colors are pure black and white.
We have three specific neutral palettes: Grey, Steel, and Graphite. These colors are applied to surfaces, buttons, text, outline and layout elements.
Secondary blue, orange and red colors complement our primary colors. These colors can be used for subtle backgrounds and elements.
