Token reference
Every variable read from the design library, mapped to the CSS custom property that carries it. Token paths are preserved so a value in the browser can be traced back to a value in the library without guesswork.
How to use this reference
Each row gives the variable name as it appears in the design library, the CSS custom property that carries it, and its value. Names are preserved exactly so a token in the browser can be traced back to a token in the library.
Build against the property, never the literal value — several tokens resolve to different values per breakpoint, and a hard-coded value opts out of that.
Link tokens.css before any other stylesheet. It declares
nothing but custom properties, so it can sit in front of an existing framework without
conflicting with it.
Colour
| Design token | CSS custom property | Value |
|---|---|---|
| Global/background/1/Rest | --global-background-1-rest | #ffffff |
| Global/background/2/Rest | --global-background-2-rest | #f5f5f5 |
| Global/background/3/Rest | --global-background-3-rest | #f0f0f0 |
| Global/background/1/Hover | --global-background-1-hover | #f5f5f5 |
| Global/background/4/Rest | --global-background-4-rest | #e5e5e5 |
| Global/background/5/Rest | --global-background-5-rest | #0a0a0a |
| Global/Foreground/1/Rest | --global-foreground-1-rest | #2e2e2e |
| Global/Foreground/2/Generic/Rest | --global-foreground-2-rest | #424242 |
| Global/Foreground/3/Rest | --global-foreground-3-rest | #616161 |
| Global/Foreground/On brand/Rest | --global-foreground-on-brand-rest | #ffffff |
| Global/Stroke/1/Global/Rest (Banner) | --global-stroke-1-global-rest | #dbdbdb |
| Global/Stroke/1/Global/Rest (Product-card) | --global-stroke-1-global-rest-alt | #e0e0e0 |
| Brand/background/1/Rest | --brand-background-1-rest | #a30000 |
| Brand/background/1/Hover | --brand-background-1-hover | #8a0000 |
| Brand/background/1/Pressed | --brand-background-1-pressed | #700000 |
| Brand/Foreground/1/Rest | --brand-foreground-1-rest | #a30000 |
| Brand/Stroke/1/Rest | --brand-stroke-1-rest | #a30000 |
| Brand/Stroke/2/Selected | --brand-stroke-2-selected | #a30000 |
| Brand/Stroke/Compound/Rest | --brand-stroke-compound-rest | #a30000 |
| Brand/background/2/Rest | --brand-background-2-rest | #fff5f5 |
| Brand/Stroke/2/Rest | --brand-stroke-2-rest | #ffcccc |
| Global/background/1/Selected | --global-background-1-selected | #ebebeb |
| Global/Stroke/1/Global/Selected | --global-stroke-1-global-selected | #cccccc |
| Global/Stroke/1/Global/Hover | --global-stroke-1-global-hover | #d6d6d6 |
| Global/background/Subtle/Rest | --global-background-subtle-rest | #ffffff00 |
| Legacy collection — bound by the PLP card only | ||
| Red / Dark Red | --legacy-red-dark | #bf0000 |
| Red / Base Red | --legacy-red-base | #f20000 |
| Text color - light background / Base Text Gray | --legacy-text-base-gray | #5e5e5e |
| logo Gray | --legacy-logo-gray | #717171 |
| Back Ground / Deep Gray - Dark mode | --legacy-bg-dark-mode | #1e1e1e |
| Back Ground / Light Gray - Base | --legacy-bg-base-light-gray | #f2f2f2 |
| Back Ground / Secondary | --legacy-bg-secondary | #e5e5e5 |
| Helvetica LT (Form only) | --legacy-font-helvetica | Helvetica LT |
| Text color - light background / Deep Gray | --legacy-text-deep-gray | #3d3d3d |
| Back Ground / Secondray - Light | --legacy-bg-secondary-light | #f9f9f9 |
| Text color - Dark background / Base | --legacy-text-on-dark | #ffffff |
| “Web/” collection — a parallel type system, same style names, different values | ||
| Web / Title / Title 3 | --web-title-3 | 24px / 32px, Bold 700 |
| Web / Body / Body 2 | --web-body-2 | 14px / 20px, Regular 400 |
| Generic / Foreground / On brand | --generic-foreground-on-brand | #ffffff |
Typography
| Design token | CSS custom property | Large | Small |
|---|---|---|---|
| Font/Roboto | --font-roboto | Roboto | |
| Font/Title/Out-container/2 | --font-title-out-container-2 | 32px / 38px, ExtraBold 800 | |
| Font/Title/In-container/3 | --font-title-in-container-3 | 26px / 30px, ExtraBold 800 | |
| Font/Title/In-container/2 | --font-title-in-container-2 | 28px / 32px, ExtraBold 800 | |
| Font/Title/In-container/4 | --font-title-in-container-4 | 20px / 22px, ExtraBold 800 | |
| Font/Subtitle/1/Strong | --font-subtitle-1-strong | 20px / 100%, Bold 700 | |
| overline | --font-overline | 12px / 100%, Regular 400, 1.5px tracking | |
| Font/Caption/Caption 1 | --font-caption-1 | 12px / 14px | |
| type system/Body/Body 2 Strong | --font-body-2-strong | 14px / 18px, Medium 500 | |
| Font/Title/Out-container/5 | --font-title-out-container-5 | 20px / 100%, ExtraBold 800 | |
| Font/Title/In-container/5 | --font-title-in-container-5 | 18px / 22px, ExtraBold 800 | |
| Font/Title/In-container/1 | --font-title-in-container-1 | 32px | 28px |
| — weight (ExtraBold) | --font-title-in-container-1-weight | 800 | |
| — line height | --font-title-in-container-1-line-height | 100% | |
| Font/Subtitle/Sbutitle 2 | --font-subtitle-2 | 18px | 14px |
| Font/Line Height/Subtitle 2 | --font-line-height-subtitle-2 | 22px | 16px |
| — weight (SemiBold) | --font-subtitle-2-weight | 600 | |
| Font/Body/1/Regular | --font-body-1-regular | 16px | 14px |
| — line height | --font-line-height-body-1 | 20px | 20px |
| — weight (Regular) | --font-body-1-weight | 400 | |
Spacing, stroke and radius
| Design token | CSS custom property | Value |
|---|---|---|
| Padding/None | --padding-none | 0px |
| Small | --space-small | 4px |
| Padding/XX-Small | --padding-xx-small | 6px |
| Padding/X-Small | --padding-x-small | 8px |
| Padding/Medium | --padding-medium | 16px |
| Padding/X-Large | --padding-x-large | 24px |
| Padding/XX-Large | --padding-xx-large | 32px |
| Thin | --stroke-thin | 1px |
| Thick | --stroke-thick | 2px |
| Size/Corner radious/4 | --size-corner-radius-4 | 4px |
| Main icon / if the object was large | --icon-main-large | 24px → 20px |
| Text-wrapper / if the object was large | --icon-text-wrapper-large | 24px → 20px |
Frames
| Design token | CSS custom property | Large | Medium | Small |
|---|---|---|---|---|
| Frame Size/Section/Extra | --frame-section-extra | 1400 | 992 | 576 |
| Frame Size/Section/Defualt | --frame-section-default | 1200 | 768 | 358 |
| Frame Size/Container/Extra | --frame-container-extra | 1320 | 928 | 540 |
| Frame Size/Container/Defualt | --frame-container-default | 1140 | 720 | 326 |
| banner-001/wrapper/Extra | --banner-001-wrapper-extra | 656 | 560 | 540 |
| banner-001/wrapper/Defualt | --banner-001-wrapper-default | 566 | 480 | 326 |
| banner-001/content-wrapper/Extra | --banner-001-content-wrapper-extra | 1320 | 928 | 540 |
| banner-001/content-wrapper/Defualt | --banner-001-content-wrapper-default | 1140 | 720 | 326 |
| Home page/text-wrapper-padding/Extra | --banner-text-wrapper-padding-extra | 32 | 24 | 24 |
Using the tokens
Link tokens.css before any other stylesheet. It declares
nothing but custom properties, so it can sit in front of an existing framework without
conflicting with it.
<link rel="stylesheet" href="css/tokens.css?v=28">
<link rel="stylesheet" href="css/styleguide.css?v=28">
/* Then build against roles, never against values */
.promo {
background: var(--global-background-2-rest);
color: var(--global-foreground-1-rest);
padding: var(--padding-xx-large);
border: var(--stroke-thin) solid var(--global-stroke-1-global-rest);
border-radius: var(--size-corner-radius-4);
}