Tokens

All design tokens are defined as CSS Custom Properties (also known as “CSS Variables”). You should reference these properties when creating custom styles.

This page walks through each type of token and includes examples for each option.

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, sky, blue, purple, magenta, and gray.

There are 9 shades for each color, ranging from 1 to 9. Lower numbers will have the most contrast with the page background, while higher numbers will have the least. In other words, shade 1 is the darkest shade in light mode, but the lightest shade in dark mode.

There are also 2 transparent variants for each color: transparent and extra-transparent.

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-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:

Unlike standard palette colors, these don’t come in multiple shades.

Shadows

The variables for shadows are all prefixed with --shadow-. They are designed to be used with the box-shadow property and are given T-shirt sizes describing how large the shadow should be.

Font Sizes

The variables for font sizes are all prefixed with --font-size-, which is followed by a T-shirt size between xs and 4xl. For example, the font size m represents a medium size for text and can be referenced as --font-size-m.

Font Weights

The variables for font weights are all prefixed with --font-weight-. For example, the font weight normal can be referenced as --font-weight-normal.

Font Families

The variables for font families are all prefixed with --font-family-. For example, the font family body can be referenced as --font-family-body.

Spacing

Most spacing tokens scale with the screen width, becoming slightly more spread out as the screen widens. The variables for spacing are prefixed with --space- and are implemented as T-shirt sizes between 3xs and 3xl, plus 3 additional sizes: none, body-x, and body-y. The none size is used to represent no spacing, while body-x and body-y are used to define the padding around the edges of the app.

Radii

The variables for radii are all prefixed with --radius-. They’re designed to be used with the border-radius property.

Border Widths

The variables for border widths are all prefixed with --border-. They’re designed to be used with the border-width property.