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 talks through each type of token and shows examples of what each value looks like.

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 the following set of base colors: brand, red, orange, yellow, green, sky, blue, purple, magenta, andgray.

For each of the base colors, there are 9 lightnesses and 2 transparent shades. The lightensses go from 1 to 9, where 1 has the most contrast with the page background (i.e., the darkest shade in light mode and the lightest shade in dark mode) and 9 has the least. The transparent shades are based on lightness 5, with transparent having a medium transparency and extra-transparent having a high transparency.

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);
}

1 2 3 4 5 6 7 8 9 brand

1 2 3 4 5 6 7 8 9 red

1 2 3 4 5 6 7 8 9 orange

1 2 3 4 5 6 7 8 9 yellow

1 2 3 4 5 6 7 8 9 green

1 2 3 4 5 6 7 8 9 sky

1 2 3 4 5 6 7 8 9 blue

1 2 3 4 5 6 7 8 9 purple

1 2 3 4 5 6 7 8 9 magenta

1 2 3 4 5 6 7 8 9 gray

Semantic Colors

In addition to the standard palette, the stylesheet defines a set of semantic colors. These colors are used for specific purposes and are named after their use case.

body the primary background color for the document

body-alt the secondary backgroud color, used on surfaces like cards

body-text the primary text color for the document

body-text-alt the secondary text color for the document

shadow a transparent gray used for box shadows

outline a gray used for borders and outlines

Unline standard palette colors, these don't come in multiple shades.

Shadows

shadow-none

shadow-s

shadow-m

shadow-l

shadow-xl

Font Sizes

The variables for font sizes are all prefixed with --font-size-. For example, the font size m can be referenced as --font-size-m.

This text has a size of xs.

This text has a size of s.

This text has a size of m.

This text has a size of l.

This text has a size of xl.

This text has a size of 2xl.

This text has a size of 3xl.

This text has a size of 4xl.

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.

This text has a weight of light.

This text has a weight of normal.

This text has a weight of semibold.

This text has a weight of bold.

This text has a weight of black.

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.

This text has a font family of body.

This text has a font family of heading.

This text has a font family of mono.

Spacing

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.

There's also a token called space-body that scales from xs on small screens to m on large screens. This token is used for the margins around the app.

3xs

2xs

2xl

3xl

Radii

radius-none

radius-s

radius-m

radius-l

radius-xl

radius-2xl

radius-full

Border Widths

border-none

border-s

border-m

border-l

border-xl