Primary color palette

Our color system is composed of 10 optically balanced scales that feature more than 1900 accessible combinations.

#​Optically Balanced

Each scale has 10 steps (0-9).
Steps 0-4 for each scale are accessible with white.
Steps 6-9 are accessible with black.
The 5th step of each scale should be tested for sufficient color contrast, especially if used for text.

#​Contrast

When designing with color it‘s important to keep the interfaces contrast high to ensure the text is accessible for all users. The minimum contrast ratio between text color and background color should be 4.5:1 except for the following:

Large Text
Large-scale text should have a contrast ratio of at least 3:1

Incidental
Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.

Logotypes
Text that is part of a logo or brand name has no minimum contrast requirement.

#​Theming with Styled System

Styled System allows us to consume colors from our theme easily through some props magic. The color prop for components and elements accepts references to our color scales through object notation. To reference the 5th step in the blue scale, you can pass blue.4 to the color prop e.g. color=‘blue.4‘.

#​Categorical color palette

These are colors which should be used in graphs, charts, and infographics.