Colors

All colors are prefixed with --color-. The stylesheet defines 2 sets of colors: the standard palette and semantic colors.

Standard Palette

The stylesheet defines multiple shades for each of the following colors: brand, red, orange, yellow, green, teal, blue, purple, magenta, and gray.

There are 9 shades for each color, ranging from 1 to 9, where lower numbers have the most contrast with the page background. In other words, shade 1 is the darkest shade in light mode, but the lightest shade in dark mode. Different design systems have different numbering schemes, but a good mental model for this one is that light mode is the canonical color mode, and the number of a given color refers to its lightness.

There are also 2 transparent variants for each color: transparent and extra-transparent. These are based on shade 5, but with varying opacities.

The variables for these colors all use the standard --color- prefix, followed by the color name and shade. For example, the color red with lightness 1 is defined as --color-red-1, while red with high transparency is defined as --color-red-extra-transparent. Below is an example of how to reference these colors in a stylesheet:

.red {
  background-color: var(--color-red-1);
}

.transparent-red {
  background-color: var(--color-red-extra-transparent);
}

Below are samples of all the colors in shades 1 through 9:

Semantic Colors

In addition to the standard palette, the stylesheet defines a set of “semantic” colors. These colors are named after their intended use cases and do not have multiple shades.