Understanding the color system and its application in your theme.
There are 28, 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.
The accent is the most dominant color in your theme, it is used for primary buttons, links and other interactive elements. The accent can be one of 23 scales.
Grays are used for backgrounds, borders, text and other non-interactive elements. You can choose from one of 6 scales.
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.
There are 23 accents to choose from.
15 scales designed for light foreground text.
5 scales designed for dark foreground text.
There are 6 grays to choose from.
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.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.
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.
All color values are available as CSS tokens should you need to build custom components.
See the token reference page for a complete list.