All tokens
List of all tokens
Border Radius
| Name | Value | Description | |
|---|---|---|---|
--c-size-radius-button-top-left | var(--s-size-radius-none) | — | |
--c-size-radius-button-top-right | var(--s-size-radius-none) | — | |
--c-size-radius-button-bottom-left | var(--s-size-radius-none) | — | |
--c-size-radius-button-bottom-right | var(--s-size-radius-none) | — | |
--inline-notification-border-radius-top-left | 0px | — | |
--inline-notification-border-radius-top-right | 0px | — | |
--inline-notification-border-radius-bottom-left | 0px | — | |
--inline-notification-border-radius-bottom-right | 0px | — | |
--s-size-radius-medium | var(--p-size-static-050) | — | |
--s-size-radius-none | var(--p-size-static-none) | — |
Color
| Name | Value | Description | |
|---|---|---|---|
--b-color-primary-default | var(--p-color-brand-500) | — | |
--b-color-primary-dark | var(--p-color-brand-600) | — | |
--b-color-primary-darker | var(--p-color-brand-700) | — | |
--b-color-secondary | var(--p-color-monochrome-black) | — | |
--b-color-error-default | var(--p-color-brand-500) | — | |
--b-color-error-light | var(--p-color-brand-100) | — | |
--b-color-info-default | var(--p-color-aqua-400) | — | |
--b-color-info-light | var(--p-color-aqua-100) | — | |
--b-color-succes-default | var(--p-color-grass-500) | — | |
--b-color-succes-light | var(--p-color-grass-100) | — | |
--b-color-warning-default | var(--p-color-corn-500) | — | |
--b-color-warning-light | var(--p-color-corn-100) | — | |
--b-color-supportive-light | var(--p-color-sand-200) | — | |
--b-color-supportive-default | var(--p-color-sand-300) | — | |
--b-color-supportive-dark | var(--p-color-sand-500) | — | |
--b-color-neutral-default | var(--p-color-stone-300) | — | |
--b-color-neutral-darker | var(--p-color-stone-800) | — | |
--b-color-neutral-dark | var(--p-color-stone-500) | — | |
--b-color-neutral-light | var(--p-color-stone-200) | — | |
--b-color-neutral-lighter | var(--p-color-stone-100) | — | |
--b-color-black | var(--p-color-monochrome-black) | — | |
--b-color-white | var(--p-color-monochrome-white) | — | |
--color-c-t-a-tertiary-hover | var(--color-base-primary) | Hover state tertiary | |
--c-color-text-button | var(--s-color-text-on-dark-default) | — | |
--c-color-text-link-black-default | var(--s-color-text-display) | — | |
--c-color-text-link-black-hover | var(--s-color-cta-default) | — | |
--c-color-text-link-brand-default | var(--s-color-cta-default) | — | |
--c-color-text-link-brand-hover | var(--s-color-text-display) | — | |
--c-color-text-link-white-default | var(--s-color-text-on-dark-default) | — | |
--c-color-text-link-white-hover | var(--s-color-text-on-dark-default) | — | |
--info-release-palette-1 | #0280AF | ⚠️ Used only for Figma thumbnail template | |
--info-release-palette-2 | #F2EEE6 | ⚠️ Used only for Figma thumbnail template | |
--info-release-palette-3 | #153163 | ⚠️ Used only for Figma thumbnail template | |
--info-release-palette-4 | #ACA8A6 | ⚠️ Used only for Figma thumbnail template | |
--info-release-palette-5 | #BD2650 | ⚠️ Used only for Figma thumbnail template | |
--p-color-brand-100 | #F8E2E2 | — | |
--p-color-brand-200 | #EAA4A4 | — | |
--p-color-brand-300 | #DE6363 | — | |
--p-color-brand-400 | #DC2828 | — | |
--p-color-brand-500 | #CE0303 | — | |
--p-color-brand-600 | #AA0303 | — | |
--p-color-brand-700 | #8D0202 | — | |
--p-color-brand-800 | #790202 | — | |
--p-color-brand-900 | #690202 | — | |
--p-color-sand-100 | #F7F5F2 | — | |
--p-color-sand-200 | #F0ECE4 | — | |
--p-color-sand-300 | #E8E2D7 | — | |
--p-color-sand-400 | #E1DACC | — | |
--p-color-sand-500 | #DAD0BE | — | |
--p-color-sand-600 | #D0C6B3 | — | |
--p-color-sand-700 | #C7BDA9 | — | |
--p-color-sand-800 | #BBB19F | — | |
--p-color-sand-900 | #AEA696 | — | |
--p-color-aqua-100 | #E5F2F6 | — | |
--p-color-aqua-200 | #89BDCC | — | |
--p-color-aqua-300 | #4091AA | — | |
--p-color-aqua-400 | #0C7392 | — | |
--p-color-aqua-500 | #005C77 | — | |
--p-color-aqua-600 | #004F66 | — | |
--p-color-aqua-700 | #004357 | — | |
--p-color-aqua-800 | #003B4D | — | |
--p-color-aqua-900 | #003342 | — | |
--p-color-corn-100 | #FDF4CE | — | |
--p-color-corn-200 | #FBE58E | — | |
--p-color-corn-300 | #F9D752 | — | |
--p-color-corn-400 | #F7CC22 | — | |
--p-color-corn-500 | #ECBE09 | — | |
--p-color-corn-600 | #D9AE08 | — | |
--p-color-corn-700 | #CEA608 | — | |
--p-color-corn-800 | #C59F07 | — | |
--p-color-corn-900 | #BD9807 | — | |
--p-color-grass-100 | #DCEADF | — | |
--p-color-grass-200 | #A6C9AE | — | |
--p-color-grass-300 | #74AA80 | — | |
--p-color-grass-400 | #4E8D5C | — | |
--p-color-grass-500 | #3C7749 | — | |
--p-color-grass-600 | #30643B | — | |
--p-color-grass-700 | #275431 | — | |
--p-color-grass-800 | #214A2A | — | |
--p-color-grass-900 | #1C3F24 | — | |
--p-color-stone-100 | #F2F2F2 | — | |
--p-color-stone-200 | #E8E8E8 | — | |
--p-color-stone-300 | #D1D1D1 | — | |
--p-color-stone-400 | #949494 | — | |
--p-color-stone-500 | #767676 | — | |
--p-color-stone-600 | #636363 | — | |
--p-color-stone-700 | #575757 | — | |
--p-color-stone-800 | #4D4D4D | — | |
--p-color-stone-900 | #424242 | — | |
--p-color-monochrome-black | #222222 | — | |
--p-color-monochrome-white | #FFFFFF | — | |
--s-color-cta-default | var(--b-color-primary-default) | — | |
--s-color-cta-disabled | var(--b-color-neutral-default) | — | |
--s-color-cta-focus | var(--b-color-primary-darker) | — | |
--s-color-cta-hover | var(--b-color-primary-dark) | — | |
--s-color-cta-active | var(--b-color-primary-darker) | — | |
--s-color-cta-primary-default | var(--b-color-primary-default) | — | |
--s-color-cta-on-dark-default | var(--b-color-white) | — | |
--s-color-cta-on-dark-hover | var(--b-color-neutral-lighter) | — | |
--s-color-cta-on-dark-focus | var(--b-color-neutral-default) | — | |
--s-color-text-default | var(--b-color-black) | — | |
--s-color-text-contrast | var(--b-color-neutral-darker) | — | |
--s-color-text-disabled | var(--b-color-neutral-dark) | — | |
--s-color-text-display | var(--b-color-black) | — | |
--s-color-text-link-default | var(--p-color-aqua-500) | — | |
--s-color-text-link-visited | var(--b-color-neutral-darker) | — | |
--s-color-text-on-dark-default | var(--b-color-white) | — | |
--s-color-text-on-dark-disabled | var(--b-color-neutral-default) | — | |
--s-color-text-cta-default | var(--b-color-primary-default) | — | |
--s-color-text-cta-disabled | var(--b-color-neutral-default) | — | |
--s-color-text-cta-hover | var(--b-color-primary-dark) | — | |
--s-color-background-default-default | var(--b-color-white) | — | |
--s-color-background-default-disabled | var(--b-color-neutral-light) | — | |
--s-color-background-default-focus | var(--b-color-neutral-light) | — | |
--s-color-background-default-pressed | var(--b-color-neutral-light) | — | |
--s-color-background-brand | var(--b-color-primary-default) | — | |
--s-color-background-contrast | var(--b-color-neutral-darker) | — | |
--s-color-background-section | var(--b-color-neutral-lighter) | — | |
--s-color-background-tertiary | var(--b-color-neutral-light) | — | |
--s-color-background-cta-default | var(--b-color-primary-default) | — | |
--s-color-background-cta-disabled | var(--b-color-neutral-default) | — | |
--s-color-background-form-disabled | var(--b-color-neutral-default) | — | |
--s-color-border-default | var(--b-color-neutral-dark) | — | |
--s-color-border-divider | var(--b-color-neutral-default) | — | |
--s-color-border-error | var(--b-color-error-default) | — | |
--s-color-border-info | var(--b-color-info-default) | — | |
--s-color-border-succes | var(--b-color-succes-default) | — | |
--s-color-border-warning | var(--b-color-warning-default) | — | |
--s-color-border-cta-default | var(--b-color-primary-default) | — | |
--s-color-border-cta-disabled | var(--b-color-neutral-default) | — | |
--s-color-border-form-disabled | var(--b-color-neutral-default) | — | |
--s-color-border-interaction | var(--b-color-primary-default) | — | |
--s-color-border-on-dark | var(--b-color-white) | — | |
--s-color-outline-default | var(--b-color-black) | — | |
--s-color-outline-focus-ring | var(--b-color-black) | — | |
--s-color-outline-aura-hover | var(--b-color-supportive-default) | — | |
--s-color-outline-aura-pressed | var(--b-color-supportive-dark) | — | |
--s-color-icon-default | var(--b-color-black) | — | |
--s-color-icon-hover | var(--b-color-neutral-darker) | — | |
--s-color-icon-on-dark | var(--b-color-white) | — | |
--s-color-icon-system | var(--b-color-black) | — | |
--s-color-icon-variant | var(--b-color-primary-default) | — | |
--s-color-icon-brand | var(--b-color-primary-default) | — | |
--s-color-loading | var(--b-color-neutral-default) | — |
Font Family
| Name | Value | Description | |
|---|---|---|---|
Commerce | --b-font-family-primary | var(--p-font-family-brand) | — |
Commerce | --b-font-family-secondary | var(--p-font-family-plain) | — |
Commerce | --p-font-family-brand | 27 Sans | — |
Commerce | --p-font-family-plain | Fira Sans | — |
Commerce | --s-font-family-heading | var(--b-font-family-primary) | — |
Commerce | --s-font-family-paragraph | var(--b-font-family-secondary) | — |
Font Size
| Name | Value | Description | |
|---|---|---|---|
Aa | --s-size-text-heading-xsmall-default | var(--p-size-dynamic-250) | — |
Aa | --s-size-text-heading-xsmall-mobile | var(--p-size-dynamic-250) | — |
Aa | --s-size-text-heading-small-default | var(--p-size-dynamic-300) | — |
Aa | --s-size-text-heading-small-mobile | var(--p-size-dynamic-300) | — |
Aa | --s-size-text-heading-medium-default | var(--p-size-dynamic-400) | — |
Aa | --s-size-text-heading-medium-mobile | var(--p-size-dynamic-400) | — |
Aa | --s-size-text-heading-large-default | var(--p-size-dynamic-600) | — |
Aa | --s-size-text-heading-large-mobile | var(--p-size-dynamic-500) | — |
Aa | --s-size-text-heading-xlarge-default | var(--p-size-dynamic-800) | — |
Aa | --s-size-text-heading-xlarge-mobile | var(--p-size-dynamic-600) | — |
Aa | --s-size-text-default | var(--p-size-dynamic-200) | — |
Aa | --s-size-text-small | var(--p-size-dynamic-150) | — |
Font Weight
| Name | Value | Description | |
|---|---|---|---|
Aa | --s-font-weight-heading-default | Light | — |
Aa | --s-font-weight-heading-emphasized | Bold | — |
Aa | --s-font-weight-paragraph-default | Regular | — |
Aa | --s-font-weight-paragraph-emphasized | Bold | — |
Aa | --s-font-weight-label-default | 300 | — |
Line Height
| Name | Value | Description | |
|---|---|---|---|
Hello World | --s-size-line-height-heading-xlarge-default | var(--p-size-dynamic-900) | — |
Hello World | --s-size-line-height-heading-xlarge-mobile | var(--p-size-dynamic-700) | — |
Hello World | --s-size-line-height-heading-large-default | var(--p-size-dynamic-700) | — |
Hello World | --s-size-line-height-heading-large-mobile | var(--p-size-dynamic-600) | — |
Hello World | --s-size-line-height-heading-medium-default | var(--p-size-dynamic-500) | — |
Hello World | --s-size-line-height-heading-medium-mobile | var(--p-size-dynamic-500) | — |
Hello World | --s-size-line-height-heading-small-default | var(--p-size-dynamic-400) | — |
Hello World | --s-size-line-height-heading-small-mobile | var(--p-size-dynamic-400) | — |
Hello World | --s-size-line-height-heading-xsmall-default | var(--p-size-dynamic-300) | — |
Hello World | --s-size-line-height-heading-xsmall-mobile | var(--p-size-dynamic-300) | — |
Hello World | --s-size-line-height-paragraph | var(--p-size-dynamic-300) | — |
Hello World | --s-size-line-height-tiny | var(--p-size-dynamic-200) | — |
Hello World | --s-size-line-height-compact | 100% | — |
Other
| Name | Value | Description | |
|---|---|---|---|
--actionbar-flex-direction | column | — | |
--info-brand | "Global" | — | |
--info-anchor version | 'v3.3.8' | — |
Spacing
| Name | Value | Description | |
|---|---|---|---|
--b-size-border-width-small | var(--p-size-static-0125) | — | |
--b-size-border-width-medium | var(--p-size-static-025) | — | |
--b-size-border-width-large | var(--p-size-static-050) | — | |
--b-size-layout-xsmall | var(--p-size-static-100) | — | |
--b-size-layout-small | var(--p-size-static-200) | — | |
--b-size-layout-medium | var(--p-size-static-300) | — | |
--b-size-layout-large | var(--p-size-static-500) | — | |
--b-size-layout-xlarge | var(--p-size-static-800) | — | |
--b-size-layout-xxlarge | var(--p-size-static-1300) | — | |
--bm-extra-small | 16px | — | |
--bm-small | 32px | — | |
--bm-medium | 100% | — | |
--bm-large | 200px | — | |
--bm-extra-large | 100% | — | |
--bp-extra-small | 599px | — | |
--bp-small | 904px | — | |
--bp-medium | 1239px | — | |
--bp-large | 1439px | — | |
--cw-extra-small | 100% | — | |
--cw-small | 100% | — | |
--cw-medium | 840px | — | |
--cw-large | 100% | — | |
--cw-extra-large | 1140px | — | |
--col-extra-small | 4 | — | |
--col-small | 8 | — | |
--col-medium | 12 | — | |
--col-large | 12 | — | |
--col-extra-large | 12 | — | |
--p-size-static-100 | 8 | — | |
--p-size-static-125 | 10 | — | |
--p-size-static-150 | 12 | — | |
--p-size-static-200 | 16 | — | |
--p-size-static-250 | 20 | — | |
--p-size-static-300 | 24 | — | |
--p-size-static-400 | 32 | — | |
--p-size-static-500 | 40 | — | |
--p-size-static-600 | 48 | — | |
--p-size-static-800 | 64 | — | |
--p-size-static-1300 | 104 | — | |
--p-size-static-none | 0 | — | |
--p-size-static-0125 | 1 | — | |
--p-size-static-025 | 2 | — | |
--p-size-static-050 | 4 | — | |
--p-size-static-075 | 6 | — | |
--p-size-dynamic-100 | 0.5 | — | |
--p-size-dynamic-125 | 0.625 | — | |
--p-size-dynamic-150 | 0.75 | — | |
--p-size-dynamic-200 | 1 | — | |
--p-size-dynamic-250 | 1.25 | — | |
--p-size-dynamic-300 | 1.5 | — | |
--p-size-dynamic-400 | 2 | — | |
--p-size-dynamic-500 | 2.5 | — | |
--p-size-dynamic-600 | 3 | — | |
--p-size-dynamic-700 | 3.5 | — | |
--p-size-dynamic-800 | 4 | — | |
--p-size-dynamic-900 | 4.5 | — | |
--s-size-border-width-default | var(--p-size-static-025) | — | |
--s-size-border-width-active | var(--p-size-static-0125) | — | |
--s-size-layout-gap-component | var(--b-size-layout-medium) | — | |
--s-size-outline-focus-ring-width | var(--p-size-static-025) | — | |
--s-size-outline-focus-ring-offset | var(--p-size-static-025) | — | |
--s-size-outline-aura-width | var(--p-size-static-100) | — | |
--s-size-outline-aura-offset | 0 | — | |
--s-size-stroke-icon-default | 1.5px | — |