Color

Understanding the color system and its application in your theme.

Color scales

There is a number of 12 step color scales available, each with their own light, dark and alpha variants.

Colors are grouped into 2 categories: accents and grays, and can be specified on your Theme, or per component where appropriate.

Accents

The accent is the most dominant color in your theme, it is used for primary buttons, links and other interactive elements. There is a number of accent colors to choose from.

Grays

Grays are used for backgrounds, borders, text and other non-interactive elements. You can choose a pure gray or one of the tinted grays.

Alpha variants

Every color has an alpha variant which is designed to appear visually the same when placed over the page background. This is very powerful and allows colors to be overlayed almost without any loss of saturation or hue.

Alpha variants are used automatically within components so no configuration is required. However, if you’d like to use them manually in your own styles you can do so by using Tokens.

Choosing an accent color

There is a number of accents to choose from.

Scales designed for light foreground text:

Scales designed for dark foreground text:

Choosing a gray color

You can choose a pure gray or a tinted gray scale:

• Gray is pure gray.
• Mauve is based on a desaturated purple hue.
• Slate is based on a desaturated blue hue.
• Sage is based on a desaturated green hue.
• Olive is based on a desaturated lime hue.
• Sand is based on a desaturated yellow hue.

Neutral and natural pairing

The theme will automatically pair your chosen accent with a gray that is designed to compliment it. You can specify an alternative if you’d prefer a neutral vibe.

The difference may seem subtle, but it can make a huge difference with a full page of text or a densely populated UI.

You may want to experiment with these settings in your applications and websites to find what works for you.

Semantic colors

At some point you will likely need to assign colors to communicate semantic meaning, for these cases we recommend using the color prop on the required components to override the accent color.

Here are some common choices that work well in Western culture.

• Error: Red, Ruby, Tomato, Crimson
• Success: Green, Teal, Jade, Grass, Mint
• Warning: Yellow, Amber, Orange
• Info: Blue, Indigo, Sky, Cyan

Using color tokens

All color values are available as CSS tokens should you need to build custom components.

See the token reference page for a complete list.