Design tokens are the single source of truth for every visual decision in the system. They capture color, typography, spacing, and border values as reusable variables so that design and code stay in sync. This page lists every token defined in design-system.css for quick reference.
Tokens are organised into two layers: primitive tokens (raw values) and semantic tokens (intent-based aliases that reference primitives). Always prefer semantic tokens in production code.
Every token, value, and hex on this page is a click-to-copy chip. The convention is intentionally explicit so the syntax in the markdown source matches what you copy:
`var(--token-name)`→ CSS variable, copies`.class-name`→ utility class, copies`#abc123`→ hex colour, copies and renders a swatch
Brand Tokens
Brand tokens are the primitives a brand's theme overrides. The engine (design-system.css) defines them with neutral defaults; the values below are By Default's active values, resolved through the engine defaults plus cms/brands/bydefault/assets/theme.css (instance 0). A brand instance replaces them in its own theme file, never in the engine.
Font Families
The four typeface stacks used across the system.
| Token | Value | Description |
|---|---|---|
"Zalando Sans", system-ui, … |
Body text and UI | |
"ES Face", "Zalando Sans", … |
Headings and display | |
"Bugrino", sans-serif |
Brand display, eyebrows, buttons, badges | |
"IBM Plex Mono", monospace |
Code and monospace |
Brand Colors
Core palette colors that define the brand identity.
| Token | Value | Description |
|---|---|---|
Light brand color (resolves through --neutral-50) |
||
| Warm light tone | ||
| Dark brand color | ||
Near-black (resolves through --neutral-900) |
||
| Lighter red (backgrounds) | ||
| Light red | ||
| Accent red | ||
| Dark red | ||
| Lighter blue (backgrounds) | ||
| Light blue | ||
| Accent blue | ||
| Dark blue | ||
| Lighter yellow (backgrounds) | ||
| Light yellow | ||
| Accent yellow | ||
| Dark yellow | ||
| Lighter green (backgrounds) | ||
| Light green | ||
| Accent green | ||
| Dark green | ||
| Lighter purple (backgrounds) | ||
| Light purple | ||
| Accent purple | ||
| Dark purple |
Typography
Font Sizes
The full type scale from 10px to 72px, defined in rem.
| Token | Value | px Equivalent |
|---|---|---|
0.625rem |
10px |
|
0.75rem |
12px |
|
0.875rem |
14px |
|
1rem |
16px |
|
1.125rem |
18px |
|
1.25rem |
20px |
|
1.375rem |
22px |
|
1.5rem |
24px |
|
1.75rem |
28px |
|
2rem |
32px |
|
2.25rem |
36px |
|
2.5rem |
40px |
|
3rem |
48px |
|
3.5rem |
56px |
|
4rem |
64px |
|
4.5rem |
72px |
Semantic Font Sizes
Named aliases that map to the type scale for specific UI roles.
| Token | Value | Description |
|---|---|---|
| Global body text size | ||
| Default button text | ||
| Small button text |
Line Heights
Vertical rhythm values from tight display text to loose body copy.
| Token | Value | Description |
|---|---|---|
0.7 |
Tight display text | |
1 |
Compact headings | |
1.2 |
Default headings | |
1.4 |
Short paragraphs | |
1.6 |
Body text | |
1.8 |
Loose body text |
Font Weights
Available weight values from light to black.
| Token | Value | Description |
|---|---|---|
300 |
Light | |
400 |
Regular | |
500 |
Medium | |
600 |
Semi-bold | |
700 |
Bold | |
800 |
Extra-bold | |
900 |
Black |
Letter Spacing
Tracking values for labels, eyebrows, and display text.
| Token | Value | Description |
|---|---|---|
0.03em |
Subtle tracking | |
0.06em |
Medium tracking | |
0.12em |
Wide tracking | |
0.24em |
Extra-wide (eyebrows, labels) |
Colors
Neutral Scale
Warm grey ramp from lightest (50) to near-black (990).
| Token | Value |
|---|---|
Black Alpha Scale
Semi-transparent black values for overlays, borders, and tints.
| Token | Value | Opacity |
|---|---|---|
| 100% | ||
| 3% | ||
| 5% | ||
| 10% | ||
| 15% | ||
| 20% | ||
| 30% | ||
| 40% | ||
| 50% | ||
| 60% | ||
| 70% | ||
| 80% | ||
| 90% | ||
| 95% |
White Alpha Scale
Semi-transparent white values for highlights and light overlays.
| Token | Value | Opacity |
|---|---|---|
| 100% | ||
| 5% | ||
| 10% | ||
| 15% | ||
| 20% | ||
| 30% | ||
| 40% | ||
| 50% | ||
| 60% | ||
| 70% | ||
| 80% | ||
| 90% | ||
| 95% |
Color-Mix Alpha Scale
Transparency values used with color-mix() to create translucent variants of any color.
| Token | Value |
|---|---|
transparent 5% |
|
transparent 10% |
|
transparent 15% |
|
transparent 20% |
|
transparent 25% |
|
transparent 30% |
|
transparent 35% |
|
transparent 40% |
|
transparent 45% |
|
transparent 50% |
|
transparent 55% |
|
transparent 60% |
|
transparent 65% |
|
transparent 70% |
|
transparent 75% |
|
transparent 80% |
|
transparent 85% |
|
transparent 90% |
|
transparent 95% |
Text Colors
Semantic tokens that control text color by intent, not by value.
| Token | Value | Description |
|---|---|---|
| Primary body text | ||
| Secondary/supporting text | ||
| Pure black text | ||
| De-emphasised text (AA-safe on white) | ||
| Accent/highlight text | ||
| Link text | ||
| Text on dark backgrounds | ||
| Sidebar navigation text | ||
| Top nav text |
Background Colors
Semantic tokens for surface fills, from primary to overlays.
| Token | Value | Description |
|---|---|---|
| Main page background | ||
| Secondary/alternate background | ||
| Clean white background | ||
| Subtle tinted background | ||
| Darker tinted background | ||
| Lighter overlay background | ||
rgba(0, 0, 0, 0.75) |
Modal backdrop | |
| Sidebar background | ||
| Top nav background |
Border Colors
Semantic tokens for border color by visual weight.
| Token | Value | Description |
|---|---|---|
| Strong/prominent borders | ||
| Medium borders | ||
| Subtle/light borders |
Selection Colors
Text and background colors applied to user-selected content.
| Token | Value | Description |
|---|---|---|
| Text color when selected | ||
| Highlight color when selected |
Component Tokens
Button
Fill and text colors for primary, secondary, and ghost button variants.
| Token | Value | Description |
|---|---|---|
| Primary button background | ||
| Primary button text | ||
| Secondary button background | ||
| Secondary button text | ||
| Faded/ghost button background |
Status
Semantic colors for informational, success, warning, danger, and accent states. Each status is a text/surface pair: the -dark primitive as text on the -lighter primitive as surface. In dark mode the pair flips together — text moves to the -light primitive and each surface is derived from the page ground pulled 15% toward the status colour (color-mix(in srgb, var(--status-*), var(--background-primary) 85%)).
| Token | Value (Light) | Value (Dark) | Description |
|---|---|---|---|
| Informational | |||
| derived from ground | Info background | ||
| Success | |||
| derived from ground | Success background | ||
| Warning | |||
| derived from ground | Warning background | ||
| Danger/error | |||
| derived from ground | Danger background |
Form
Colors, geometry and motion for inputs, checkboxes, toggle switches and the segmented control across all states.
| Token | Value | Description |
|---|---|---|
| Input border | ||
| Input background | ||
| Input text | ||
| Placeholder text | ||
| Focus ring color | ||
| Disabled input background | ||
| Disabled input text | ||
| Checkbox background | ||
| Checkbox selected fill | ||
| Checkbox border | ||
| Checkmark color | ||
| Toggle track background | ||
| Toggle knob | ||
| Toggle selected track | ||
| Toggle selected knob | ||
| Segmented thumb variant: track fill | ||
3px |
Segmented thumb variant: track inset | |
| Segmented thumb variant: track radius | ||
| Segmented selected surface — thumb and flat , both forms | ||
| Text on the segmented selected surface | ||
transparent |
Optional thumb border, aesthetic only | |
| track radius − track padding | Segmented thumb radius, concentric with the track | |
| Segmented thumb travel |
Card
Surface, border, and hover colors for the card component.
| Token | Value | Description |
|---|---|---|
| Card background | ||
| Card border | ||
| Card border on hover |
Tabs
Active, inactive, and indicator colors for the tab component.
| Token | Value | Description |
|---|---|---|
| Active tab text | ||
| Inactive tab text | ||
| Tab underline indicator |
Progress
Shared palette for the progress bar and ring, plus the ring's geometry.
| Token | Value | Description |
|---|---|---|
| Track color, bar and ring | ||
| Fill color, bar and ring | ||
0px |
Bar corner radius | |
| Bar height | ||
| Value-change travel, bar and ring | ||
48px |
Ring rendered diameter | |
4px |
Ring stroke width (viewBox units) |
Skeleton
Fill and pulse for the skeleton loading primitives.
| Token | Value | Description |
|---|---|---|
| Placeholder fill | ||
| Placeholder corner radius | ||
| One pulse cycle |
Divider
Line color for horizontal dividers.
| Token | Value | Description |
|---|---|---|
| Divider line color |
Dropdown
Surface, border, and hover colors for dropdown menus.
| Token | Value | Description |
|---|---|---|
| Dropdown background | ||
| Dropdown border | ||
| Hovered item background | ||
250px |
Menu width floor. A knob because it is what overflows a 375px screen — a narrow context re-points it to 0 rather than overriding the rule |
Tag
Background and border colors for inline tags.
| Token | Value | Description |
|---|---|---|
| Tag background | ||
| Tag border |
Dialog
Surface, border, shadow, and backdrop colors for modal dialogs.
| Token | Value | Description |
|---|---|---|
| Dialog background | ||
560px |
Dialog maximum width | |
0 8px 32px var(--black-alpha-20) |
Dialog drop shadow | |
| Dialog backdrop overlay |
Drawer
Surface, shadow, backdrop, and geometry for edge-docked panels.
| Token | Value | Description |
|---|---|---|
| Drawer background | ||
0 8px 32px var(--black-alpha-20) |
Drawer drop shadow | |
0 |
Drawer corner radius | |
| Drawer backdrop overlay | ||
25rem |
Width on inline edges, height on block edges | |
100% |
Distance travelled when closed |
Slider
Track, fill, and thumb colors for range sliders.
| Token | Value | Description |
|---|---|---|
| Slider track | ||
| Slider filled portion | ||
| Thumb fill | ||
| Thumb border |
Rating
Star colors and sizing for the rating component.
| Token | Value | Description |
|---|---|---|
| Filled star color | ||
| Empty star color | ||
1.5rem |
Star size |
Bar
Chrome and spacing for the bar component. --bar-height applies to data-density="regular" only — at any other density the bar is as tall as its tallest control.
| Token | Value | Description |
|---|---|---|
| Bar fill | ||
var(--border-s) solid var(--border-faded) |
The rule under the bar | |
| Space between groups, and between content and actions | ||
| Space inside a group, and between actions | ||
| Inline padding | ||
| Block padding. Both density presets zero it | ||
70px |
Fixed height of data-density="regular" |
|
36px |
Every control in the bar's content region resolves to this (actions-cluster menu cells and the close stretch full-height instead). Clears the 24px WCAG 2.5.8 AA target; page forms keep their own 44px | |
4.5rem |
Width of a number field in the bar | |
20rem |
Ceiling for a menu opened from the bar below 768px | |
Stacking order when data-sticky="true" |
||
0px |
Where a docked bar sits; a shell with a header re-points it |
Docked bars (stacking order)
Anything docked to the top of the viewport competes for the same space. The order is a relationship between components, not a property of any one of them, so it lives in one place and the bar's own --bar-z points at it. A page stacking two bars re-points --bar-z locally on the upper one.
| Token | Value | Description |
|---|---|---|
40 |
The bar — page context and control bars | |
100 |
Site header — outranks it |
Spacing
Unit Scale
The base spacing ramp from 0 to 160px, used as building blocks for all spacing.
| Token | Value | px Equivalent |
|---|---|---|
0 |
0px |
|
0.125rem |
2px |
|
0.25rem |
4px |
|
0.5rem |
8px |
|
0.75rem |
12px |
|
1rem |
16px |
|
1.5rem |
24px |
|
2rem |
32px |
|
2.5rem |
40px |
|
3rem |
48px |
|
3.5rem |
56px |
|
4rem |
64px |
|
4.5rem |
72px |
|
5rem |
80px |
|
5.5rem |
88px |
|
6rem |
96px |
|
6.5rem |
104px |
|
7rem |
112px |
|
7.5rem |
120px |
|
10rem |
160px |
Space Tokens
Semantic spacing aliases that reference the unit scale. Use these in layouts and components.
| Token | Value | px Equivalent |
|---|---|---|
0px |
||
2px |
||
4px |
||
8px |
||
12px |
||
16px |
||
24px |
||
32px |
||
40px |
||
48px |
||
56px |
||
64px |
||
72px |
||
80px |
||
88px |
||
96px |
||
104px |
||
112px |
||
120px |
||
160px |
Section Spacing
Vertical rhythm tokens for macro-level section padding.
| Token | Value | px Equivalent |
|---|---|---|
24px |
||
32px |
||
64px |
||
96px |
||
160px |
Borders
Border Widths
Available thickness values for the composable border system.
| Token | Value | Description |
|---|---|---|
1.5px |
Default/thin border | |
2px |
Medium border | |
4px |
Thick/accent border |
Border Composition
Default values applied when using structural border classes like or .
| Token | Value | Description |
|---|---|---|
| Default border width | ||
solid |
Default border style | |
| Default border color |
Border Radius
Rounding scale from subtle corners to fully rounded pills.
| Token | Value | Description |
|---|---|---|
4px |
Subtle rounding | |
6px |
Small rounding | |
10px |
Medium rounding | |
16px |
Large rounding | |
24px |
Extra-large rounding | |
999px |
Fully rounded / pill shape |