Design Tokens

Design tokens are named entities that store visual design information. These are used in place of hard-coded values (such as hex values for color or pixels for spacing) in order to maintain a scalable, consistent system for UI development.

Border radii

Token Value Example
$border-radius-xs 2px
$border-radius-sm 4px
$border-radius-md 8px
$border-radius-lg 16px

Box shadows

Shadows consist of three layers of different spreads and opacities. The RGBA colors are equivalent to the tokens $color-ink-90, $color-blue-90, and $color-ink-90.

Token Value Example
$box-shadow-sm 0 8px 12px 1px rgba(29, 17, 51, .04), 0 3px 16px 2px rgba(9, 32, 77, .12), 0 5px 10px -3px rgba(29, 17, 51, .12)
$box-shadow-md 0 16px 24px 2px rgba(29, 17, 51, .04), 0 6px 32px 4px rgba(9, 32, 77, .12), 0 8px 12px -5px rgba(29, 17, 51, .12)
$box-shadow-lg 0 24px 38px 3px rgba(29, 17, 51, .04), 0 10px 48px 8px rgba(9, 32, 77, .12), 0 12px 16px -6px rgba(29, 17, 51, .12)


Protocol has a broad coloe palette, each with a token variable. See the Color page for the complete list.

Spacing units

Protocol has two types of tokens used for spacing units (margins and padding). The $spacing-* tokens are smaller and generally intended for tighter spacing within components. The $layout-* tokens are larger and intended for more generous spaces between components.

Token Value Example
$spacing-xs 4px
$spacing-sm 8px
$spacing-md 16px
$spacing-lg 24px
$spacing-xl 32px
$spacing-2xl 48px
$layout-2xs 16px
$layout-xs 24px
$layout-sm 32px
$layout-md 48px
$layout-lg 64px
$layout-xl 96px
$layout-2xl 192px

Content widths

These are used to set the width of various content containers at different responsive breakpoints. They’re based on common device screen widths with some allowances for outer margins between the content and viewport edge.

Token Value
$content-xs 304px
$content-sm 432px
$content-md 688px
$content-lg 928px
$content-xl 1152px
$content-max 1440px

Screen widths

These are used in media queries to set breakpoints at which layouts can adjust to fit different devices and browser windows.

Token Value
$screen-xs 320px
$screen-sm 480px
$screen-md 768px
$screen-lg 1024px
$screen-xl 1312px

Media queries

Usage: @media #{$mq-md} { ... }

Token Value
$mq-xs (min-width: $screen-xs)
$mq-sm (min-width: $screen-sm)
$mq-md (min-width: $screen-md)
$mq-lg (min-width: $screen-lg)
$mq-xl (min-width: $screen-xl)
$mq-short (max-height: 599px)
$mq-tall (min-height: 600px)
$mq-high-res only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), only screen and (min-resolution: 144dpi)

Font stacks

Token Value
$font-stack-base Inter, X-LocaleSpecific, sans-serif
$font-stack-firefox Metropolis, Inter, X-LocaleSpecific, sans-serif
$font-stack-mono Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace
$font-stack-mozilla 'Zilla Slab', Inter, X-LocaleSpecific, sans-serif

The font name “X-LocaleSpecific” can be used as an alias to define an alternative font for specific languages, especially those with non-Latin alphabets. For example, in a style sheet served only to pages in Arabic:

@font-face {
    font-family: X-LocaleSpecific;
    font-weight: normal;
    font-display: swap;
    src: url('/media/fonts/l10n/DroidNaskh-Regular.woff') format('woff');