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.

Every token is a named CSS custom property, so anything you build with them stays consistent with the system and updates when it does.

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.

Custom property	Value
--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.

Custom property	Value
--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:

Custom property	Value
--pl-font-size	16px

Font family

Custom property	Value
--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.

Custom property	Value
--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.

Custom property	Value
--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.

Custom property	Value
--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.

Custom property	Value
--pl-viewport-margins-max-width	1440px
--pl-viewport-margins-gutter	1em, and 3em at 768px and wider