Tokens

Tokens are the sizes and fonts shared by every theme. They live in tokens.css. Colors are not here: they belong to the themes.

Pixel

--pix-pixel is one logical pixel. Every other size is a whole multiple of it, which keeps everything on the same grid.

Change it to scale the whole system at once.

:root {
  --pix-pixel: 3px;
}

For a size that has no token, multiply the pixel instead of writing a fixed number.

.avatar {
  width: calc(var(--pix-pixel) * 16);
  height: calc(var(--pix-pixel) * 16);
}

Spacing

Use for padding, margin and gap.

Font families

The display font is for headings only. It is too wide for running text.

Font sizes

heading and title are meant for the display font,small and body for the body font.

Border