1. Design System
2. Foundations
3. Tokens

Tokens

Design tokens are the CSS custom properties behind our color, spacing, type, and more. Reach for a token instead of a hand-picked value.

Build on the same variables the whole system is made from.

Design tokens are named CSS custom properties that hold the values behind our look and feel: color, spacing, type, and more. Reach for a token instead of a hand-picked value so your work stays consistent with the system and updates with it.

Use a token anywhere you would write a raw value:

.card {
  padding: var(--pl-space-l);
  border-radius: var(--pl-border-radius);
  color: var(--pl-color-fg-default);
}

Color

Color tokens come in two layers: a raw palette and the semantic roles built on top of it. Reach for the roles, like --pl-color-fg-default and --pl-color-bg-accent, rather than naming a specific color.

See Color for the full palette, the foreground and background roles, and contrast guidance.

Spacing

Use spacing tokens for margin, padding, and gap so the rhythm of your layout matches the rest of the system. For the utility classes built on these tokens, see CSS utilities.

--pl-space-3xs

0.125rem

--pl-space-2xs

0.25rem

--pl-space-xs

0.5rem

--pl-space-s

0.75rem

--pl-space-m

1rem

--pl-space-l

1.5rem

--pl-space-xl

2rem

--pl-space-2xl

3rem

--pl-space-3xl

4rem

Font size

Set type from our scale so sizes stay consistent across spaces. To style a whole region's type at once, see Typeset.

--pl-font-size-xs

0.75rem

--pl-font-size-s

0.875rem

--pl-font-size-m

1rem

--pl-font-size-l

1.125rem

--pl-font-size-xl

1.25rem

--pl-font-size-2xl

1.5rem

--pl-font-size-3xl

2rem

--pl-font-size-4xl

2.5rem

--pl-font-size-5xl

3.5rem

The base font size is set on the root:

--pl-font-size

16px

Font family

--pl-font-sans-serif

proxima-nova, system-ui, sans-serif

--pl-font-serif

'Perpetua', serif

--pl-font-family

The default family applied to text. Set to --pl-font-sans-serif.

Links

These tokens style the underline on links so it stays consistent and legible.

--pl-link-text-underline-offset

0.2em

--pl-link-text-decoration-thickness

1px

--pl-link-hover-text-decoration-thickness

2px

Border radius

Round corners with a token so boxes, cards, and images share the same shape. For the utility classes, see CSS utilities.

--pl-border-radius

1rem

--pl-border-radius-subtle

0.25rem

Focus

Apply this token to a custom component's :focus-visible state so its focus ring matches everything else in the system.

--pl-focus-box-shadow

0 0 0 2px var(--pl-color-bg-accent), 0 0 0 4px var(--pl-color-fg-default)

Page frame

These tokens control the width and gutters of the centered page frame applied by .pl-viewport-margins. The gutter widens on larger screens.

--pl-viewport-margins-max-width

1440px

--pl-viewport-margins-gutter

1em, and 3em at 768px and wider