All tokens
List of all tokens
Type
Tier
All expanded
| Name | Value | Description | |
|---|---|---|---|
| c --c-size-radius-button-top-left | 104px | — | |
| c --c-size-radius-button-top-right | 104px | — | |
| c --c-size-radius-button-bottom-left | 104px | — | |
| c --c-size-radius-button-bottom-right | 104px | — | |
--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 --s-size-radius-medium | 6px | — | |
| s --s-size-radius-large | 12px | — | |
| s --s-size-radius-full | 104px | — | |
| s --s-size-radius-none | 0px | — |
| Name | Value | Description | |
|---|---|---|---|
| b --b-color-primary-lighter | #fae6e6 | — | |
| b --b-color-primary-accent | #fae6e6 | — | |
| b --b-color-primary-light | #fae6e6 | — | |
| b --b-color-primary-default | #ce0303 | — | |
| b --b-color-primary-dark | #8d0202 | — | |
| b --b-color-primary-darker | #790202 | — | |
| b --b-color-secondary | #222222 | — | |
| b --b-color-error-default | #ff0101 | — | |
| b --b-color-error-light | #ffe0e0 | — | |
| b --b-color-info-default | #0c7392 | — | |
| b --b-color-info-light | #f2fcff | — | |
| b --b-color-succes-default | #008a1e | — | |
| b --b-color-succes-light | #ecf1ec | — | |
| b --b-color-warning-default | #ecbe09 | — | |
| b --b-color-warning-light | #fcf8e8 | — | |
| b --b-color-supportive-light | #f8f6f2 | — | |
| b --b-color-supportive-default | #f8f6f2 | — | |
| b --b-color-supportive-dark | #eae8e2 | — | |
| b --b-color-neutral-default | #d9d9d9 | — | |
| b --b-color-neutral-darker | #666666 | — | |
| b --b-color-neutral-dark | #666666 | — | |
| b --b-color-neutral-light | #fafafa | — | |
| b --b-color-neutral-lighter | #fafafa | — | |
| b --b-color-black | #222222 | — | |
| b --b-color-white | #ffffff | — | |
--color-c-t-a-tertiary-hover | var(--color-base-primary) | Hover state tertiary | |
| c --c-color-text-button-default | #ffffff | — | |
| c --c-color-text-button-disabled | #ffffff | — | |
| c --c-color-text-cta-tertiary-default | #ce0303 | — | |
| c --c-color-text-cta-tertiary-hover | #ce0303 | — | |
| c --c-color-text-link-black-default | #222222 | — | |
| c --c-color-text-link-black-hover | #ce0303 | — | |
| c --c-color-text-link-brand-default | #790202 | — | |
| c --c-color-text-link-brand-hover | #ce0303 | — | |
| c --c-color-text-link-white-default | #ffffff | — | |
| c --c-color-text-link-white-hover | #ffffff | — | |
--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 --p-color-brand-100 | #FAE6E6 | — | |
| p --p-color-brand-200 | var(--p-color-brand-100) | — | |
| p --p-color-brand-300 | #E68181 | — | |
| p --p-color-brand-400 | var(--p-color-brand-500) | — | |
| p --p-color-brand-500 | #CE0303 | — | |
| p --p-color-brand-600 | var(--p-color-brand-500) | — | |
| p --p-color-brand-700 | var(--p-color-brand-800) | — | |
| p --p-color-brand-800 | #8D0202 | — | |
| p --p-color-brand-900 | #790202 | — | |
| p --p-color-sand-100 | var(--p-color-sand-200) | — | |
| p --p-color-sand-200 | #F8F6F2 | — | |
| p --p-color-sand-300 | var(--p-color-sand-200) | — | |
| p --p-color-sand-400 | var(--p-color-sand-300) | — | |
| p --p-color-sand-500 | #EAE8E2 | — | |
| p --p-color-sand-600 | var(--p-color-sand-500) | — | |
| p --p-color-sand-700 | var(--p-color-sand-600) | — | |
| p --p-color-sand-800 | var(--p-color-sand-700) | — | |
| p --p-color-sand-900 | var(--p-color-sand-800) | — | |
| p --p-color-aqua-100 | #F2FCFF | — | |
| p --p-color-aqua-200 | var(--p-color-aqua-100) | — | |
| p --p-color-aqua-300 | var(--p-color-aqua-400) | — | |
| p --p-color-aqua-400 | var(--p-color-aqua-500) | — | |
| p --p-color-aqua-500 | #0C7392 | — | |
| p --p-color-aqua-600 | var(--p-color-aqua-500) | — | |
| p --p-color-aqua-700 | var(--p-color-aqua-600) | — | |
| p --p-color-aqua-800 | var(--p-color-aqua-700) | — | |
| p --p-color-aqua-900 | var(--p-color-aqua-800) | — | |
| p --p-color-corn-100 | #FCF8E8 | — | |
| p --p-color-corn-200 | var(--p-color-corn-100) | — | |
| p --p-color-corn-300 | var(--p-color-corn-400) | — | |
| p --p-color-corn-400 | var(--p-color-corn-500) | — | |
| p --p-color-corn-500 | #ECBE09 | — | |
| p --p-color-corn-600 | var(--p-color-corn-500) | — | |
| p --p-color-corn-700 | var(--p-color-corn-600) | — | |
| p --p-color-corn-800 | var(--p-color-corn-700) | — | |
| p --p-color-corn-900 | var(--p-color-corn-800) | — | |
| p --p-color-grass-100 | #ECf1EC | — | |
| p --p-color-grass-200 | var(--p-color-grass-100) | — | |
| p --p-color-grass-300 | var(--p-color-grass-400) | — | |
| p --p-color-grass-400 | var(--p-color-grass-500) | — | |
| p --p-color-grass-500 | #008A1E | — | |
| p --p-color-grass-600 | var(--p-color-grass-500) | — | |
| p --p-color-grass-700 | var(--p-color-grass-600) | — | |
| p --p-color-grass-800 | var(--p-color-grass-700) | — | |
| p --p-color-grass-900 | var(--p-color-grass-800) | — | |
| p --p-color-stone-100 | #FAFAFA | — | |
| p --p-color-stone-200 | var(--p-color-stone-100) | — | |
| p --p-color-stone-300 | #D9D9D9 | — | |
| p --p-color-stone-400 | var(--p-color-stone-300) | — | |
| p --p-color-stone-500 | #666666 | — | |
| p --p-color-stone-600 | var(--p-color-stone-500) | — | |
| p --p-color-stone-700 | var(--p-color-stone-600) | — | |
| p --p-color-stone-800 | var(--p-color-stone-700) | — | |
| p --p-color-stone-900 | var(--p-color-stone-800) | — | |
| p --p-color-monochrome-black | #222222 | — | |
| p --p-color-monochrome-white | #ffffff | — | |
| s --s-color-cta-default | #ce0303 | — | |
| s --s-color-cta-disabled | #fae6e6 | — | |
| s --s-color-cta-focus | #790202 | — | |
| s --s-color-cta-hover | #8d0202 | — | |
| s --s-color-cta-active | #790202 | — | |
| s --s-color-cta-primary-default | #ce0303 | — | |
| s --s-color-cta-secondary-default | #f8f6f2 | — | |
| s --s-color-cta-secondary-hover | #eae8e2 | — | |
| s --s-color-cta-secondary-active | #eae8e2 | — | |
| s --s-color-cta-on-dark-default | #ffffff | — | |
| s --s-color-cta-on-dark-hover | #fafafa | — | |
| s --s-color-cta-on-dark-focus | #d9d9d9 | — | |
| s --s-color-text-default | #222222 | — | |
| s --s-color-text-contrast | #666666 | — | |
| s --s-color-text-disabled | #666666 | — | |
| s --s-color-text-display | #222222 | — | |
| s --s-color-text-link-default | #0c7392 | — | |
| s --s-color-text-link-visited | #666666 | — | |
| s --s-color-text-on-dark-default | #ffffff | — | |
| s --s-color-text-on-dark-disabled | #d9d9d9 | — | |
| s --s-color-text-cta-default | #ce0303 | — | |
| s --s-color-text-cta-disabled | #d9d9d9 | — | |
| s --s-color-text-cta-hover | #ce0303 | — | |
| s --s-color-background-default-default | #ffffff | — | |
| s --s-color-background-default-disabled | #fafafa | — | |
| s --s-color-background-default-focus | #fafafa | — | |
| s --s-color-background-default-pressed | #fafafa | — | |
| s --s-color-background-brand | #ce0303 | — | |
| s --s-color-background-contrast | #666666 | — | |
| s --s-color-background-section | #f8f6f2 | — | |
| s --s-color-background-tertiary | #fafafa | — | |
| s --s-color-background-cta-default | #ce0303 | — | |
| s --s-color-background-cta-disabled | #d9d9d9 | — | |
| s --s-color-background-form-disabled | #d9d9d9 | — | |
| s --s-color-background-accent-light | #fae6e6 | — | |
| s --s-color-background-accent | #fae6e6 | — | |
| s --s-color-background-supportive-default | #f8f6f2 | — | |
| s --s-color-background-supportive-light | #f8f6f2 | — | |
| s --s-color-background-supportive-dark | #eae8e2 | — | |
| s --s-color-border-default | #666666 | — | |
| s --s-color-border-divider | #d9d9d9 | — | |
| s --s-color-border-divider-contrast | #222222 | — | |
| s --s-color-border-error | #ff0101 | — | |
| s --s-color-border-info | #0c7392 | — | |
| s --s-color-border-succes | #008a1e | — | |
| s --s-color-border-warning | #ecbe09 | — | |
| s --s-color-border-cta-default | #222222 | — | |
| s --s-color-border-cta-hover | #8d0202 | — | |
| s --s-color-border-cta-pressed | #790202 | — | |
| s --s-color-border-cta-disabled | #666666 | — | |
| s --s-color-border-cta-on-dark-default | #ffffff | — | |
| s --s-color-border-form-disabled | #d9d9d9 | — | |
| s --s-color-border-interaction | #ce0303 | — | |
| s --s-color-border-on-dark | #ffffff | — | |
| s --s-color-outline-default | #222222 | — | |
| s --s-color-outline-focus-ring | #222222 | — | |
| s --s-color-outline-aura-hover | #f8f6f2 | — | |
| s --s-color-outline-aura-pressed | #eae8e2 | — | |
| s --s-color-icon-default | #222222 | — | |
| s --s-color-icon-hover | #666666 | — | |
| s --s-color-icon-on-dark | #ffffff | — | |
| s --s-color-icon-system | #222222 | — | |
| s --s-color-icon-variant | #8d0202 | — | |
| s --s-color-icon-brand | #ce0303 | — | |
| s --s-color-loading | #d9d9d9 | — |
| Name | Value | Description | |
|---|---|---|---|
Commerce | b --b-font-family-primary | '27 Sans' | — |
Commerce | b --b-font-family-secondary | 'Source Sans Pro' | — |
Commerce | p --p-font-family-brand | '27 Sans' | — |
Commerce | p --p-font-family-plain | 'Source Sans Pro' | — |
Commerce | s --s-font-family-heading | '27 Sans' | — |
Commerce | s --s-font-family-paragraph | 'Source Sans Pro' | — |
| Name | Value | Description | |
|---|---|---|---|
Aa | s --s-size-text-heading-xsmall-default | 1.25rem | — |
Aa | s --s-size-text-heading-xsmall-tablet | 1.125rem | — |
Aa | s --s-size-text-heading-xsmall-mobile | 1rem | — |
Aa | s --s-size-text-heading-small-default | 1.25rem | — |
Aa | s --s-size-text-heading-small-tablet | 1.125rem | — |
Aa | s --s-size-text-heading-small-mobile | 1rem | — |
Aa | s --s-size-text-heading-medium-default | 2rem | — |
Aa | s --s-size-text-heading-medium-tablet | 1.75rem | — |
Aa | s --s-size-text-heading-medium-mobile | 1.5rem | — |
Aa | s --s-size-text-heading-large-default | 3rem | — |
Aa | s --s-size-text-heading-large-tablet | 2rem | — |
Aa | s --s-size-text-heading-large-mobile | 1.75rem | — |
Aa | s --s-size-text-heading-xlarge-default | 3.5rem | — |
Aa | s --s-size-text-heading-xlarge-tablet | 2.5rem | — |
Aa | s --s-size-text-heading-xlarge-mobile | 2rem | — |
Aa | s --s-size-text-tiny-default | 0.75rem | — |
Aa | s --s-size-text-tiny-tablet | 0.75rem | — |
Aa | s --s-size-text-tiny-small | 0.75rem | — |
Aa | s --s-size-text-default | 1rem | — |
Aa | s --s-size-text-tablet | 0.875rem | — |
Aa | s --s-size-text-small | 0.875rem | — |
| Name | Value | Description | |
|---|---|---|---|
Aa | s --s-font-weight-heading-default | Light | — |
Aa | s --s-font-weight-heading-emphasized | 600 | — |
Aa | s --s-font-weight-paragraph-default | Regular | — |
Aa | s --s-font-weight-paragraph-emphasized | 600 | — |
Aa | s --s-font-weight-label-default | 300 | — |
| Name | Value | Description | |
|---|---|---|---|
Hello World | s --s-size-line-height-heading-xlarge-default | 4.5rem | — |
Hello World | s --s-size-line-height-heading-xlarge-mobile | 3.5rem | — |
Hello World | s --s-size-line-height-heading-large-default | 3.5rem | — |
Hello World | s --s-size-line-height-heading-large-mobile | 3rem | — |
Hello World | s --s-size-line-height-heading-medium-default | 2.5rem | — |
Hello World | s --s-size-line-height-heading-medium-mobile | 2.5rem | — |
Hello World | s --s-size-line-height-heading-small-default | 2rem | — |
Hello World | s --s-size-line-height-heading-small-mobile | 2rem | — |
Hello World | s --s-size-line-height-heading-xsmall-default | 1.5rem | — |
Hello World | s --s-size-line-height-heading-xsmall-mobile | 1.5rem | — |
Hello World | s --s-size-line-height-paragraph | 1.5rem | — |
Hello World | s --s-size-line-height-tiny | 1rem | — |
Hello World | s --s-size-line-height-compact | 100% | — |
| Name | Value | Description | |
|---|---|---|---|
--actionbar-flex-direction | column | — | |
--info-brand | "Global" | — | |
--info-anchor version | 'v3.7.4' | — |
| Name | Value | Description | |
|---|---|---|---|
| b --b-size-border-width-small | 1px | — | |
| b --b-size-border-width-medium | 2px | — | |
| b --b-size-border-width-large | 4px | — | |
| b --b-size-layout-xsmall | 8px | — | |
| b --b-size-layout-small | 16px | — | |
| b --b-size-layout-medium | 24px | — | |
| b --b-size-layout-large | 40px | — | |
| b --b-size-layout-xlarge | 64px | — | |
| b --b-size-layout-xxlarge | 104px | — | |
--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 --p-size-static-100 | 8 | — | |
| p --p-size-static-125 | 10 | — | |
| p --p-size-static-150 | 12 | — | |
| p --p-size-static-200 | 16 | — | |
| p --p-size-static-250 | 20 | — | |
| p --p-size-static-300 | 24 | — | |
| p --p-size-static-400 | 32 | — | |
| p --p-size-static-500 | 40 | — | |
| p --p-size-static-600 | 48 | — | |
| p --p-size-static-800 | 64 | — | |
| p --p-size-static-1200 | 96 | — | |
| p --p-size-static-1300 | 104 | — | |
| p --p-size-static-none | 0px | — | |
| p --p-size-static-0125 | 1 | — | |
| p --p-size-static-025 | 2 | — | |
| p --p-size-static-050 | 4 | — | |
| p --p-size-static-075 | 6 | — | |
| p --p-size-dynamic-100 | 0.5 | — | |
| p --p-size-dynamic-125 | 0.625 | — | |
| p --p-size-dynamic-150 | 0.75 | — | |
| p --p-size-dynamic-175 | 0.875 | — | |
| p --p-size-dynamic-200 | 1 | — | |
| p --p-size-dynamic-225 | 1.125 | — | |
| p --p-size-dynamic-250 | 1.25 | — | |
| p --p-size-dynamic-300 | 1.5 | — | |
| p --p-size-dynamic-350 | 1.75 | — | |
| p --p-size-dynamic-400 | 2 | — | |
| p --p-size-dynamic-500 | 2.5 | — | |
| p --p-size-dynamic-600 | 3 | — | |
| p --p-size-dynamic-700 | 3.5 | — | |
| p --p-size-dynamic-800 | 4 | — | |
| p --p-size-dynamic-900 | 4.5 | — | |
| s --s-size-border-width-default | 2px | — | |
| s --s-size-border-width-active | 1px | — | |
| s --s-size-layout-gap-component | 24px | — | |
| s --s-size-outline-focus-ring-width | 2px | — | |
| s --s-size-outline-focus-ring-offset | 2px | — | |
| s --s-size-outline-aura-width | 8px | — | |
| s --s-size-outline-aura-offset | 0 | — | |
| s --s-size-stroke-icon-default | 1.5px | — |