Design Tokens | Mozilla Protocol

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)`

Colors

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