Color
| Token | Value | Role |
|---|---|---|
| color/blue11 | ||
--color-blue-100 | #f6faff | A raw value nothing else points at |
--color-blue-125 | #e8f1fd | A raw value nothing else points at |
--color-blue-150 | #b8d4f8 | A raw value nothing else points at |
--color-blue-200 | #96bff4 | A raw value nothing else points at |
--color-blue-300 | #66a1f0 | A raw value nothing else points at |
--color-blue-400 | #488fed | A raw value nothing else points at |
--color-blue-500 | #1a73e8 | A raw value nothing else points at |
--color-blue-600 | #1869d3 | A raw value nothing else points at |
--color-blue-700 | #1252a5 | A raw value nothing else points at |
--color-blue-800 | #0e3f80 | A raw value nothing else points at |
--color-blue-900 | #0b3061 | A raw value nothing else points at |
| color/brand11 | ||
--color-brand-100 | #ebeff5 | Used by 2 tokens |
--color-brand-125 | #e6eaf1 | Used by 4 tokens |
--color-brand-150 | #b0bfd3 | Used by 4 tokens |
--color-brand-200 | #8a9fbd | Used by 2 tokens |
--color-brand-300 | #54749f | Used by 2 tokens |
--color-brand-400 | #33598d | Used by 4 tokens |
--color-brand-500 | #002e6f | Used by 3 tokens |
--color-brand-600 | #002b66 | Used by 3 tokens |
--color-brand-700 | #002150 | Used by 2 tokens |
--color-brand-800 | #001a3e | Used by 3 tokens |
--color-brand-900 | #00142f | Used by 3 tokens |
| color/crimson11 | ||
--color-crimson-100 | #fffbfb | A raw value nothing else points at |
--color-crimson-125 | #fff8f9 | A raw value nothing else points at |
--color-crimson-150 | #fee9ea | A raw value nothing else points at |
--color-crimson-200 | #fdc7ca | A raw value nothing else points at |
--color-crimson-300 | #fca6aa | A raw value nothing else points at |
--color-crimson-400 | #fa8086 | A raw value nothing else points at |
--color-crimson-500 | #f94b53 | A raw value nothing else points at |
--color-crimson-600 | #d3323a | A raw value nothing else points at |
--color-crimson-700 | #b32b31 | A raw value nothing else points at |
--color-crimson-800 | #902228 | A raw value nothing else points at |
--color-crimson-900 | #6b1a1d | A raw value nothing else points at |
| color/foundations2 | ||
--color-foundations-black | #111111 | Used by 1 token |
--color-foundations-white | #ffffff | Used by 1 token |
| color/foundations/transparent-black10 | ||
--color-foundations-transparent-black-100 | #00000000 | A raw value nothing else points at |
--color-foundations-transparent-black-150 | #00000026 | A raw value nothing else points at |
--color-foundations-transparent-black-200 | #00000033 | A raw value nothing else points at |
--color-foundations-transparent-black-300 | #0000004d | A raw value nothing else points at |
--color-foundations-transparent-black-400 | #00000066 | A raw value nothing else points at |
--color-foundations-transparent-black-500 | #00000080 | A raw value nothing else points at |
--color-foundations-transparent-black-600 | #00000099 | A raw value nothing else points at |
--color-foundations-transparent-black-700 | #000000b3 | A raw value nothing else points at |
--color-foundations-transparent-black-800 | #000000cc | A raw value nothing else points at |
--color-foundations-transparent-black-900 | #000000e6 | A raw value nothing else points at |
| color/foundations/transparent-white10 | ||
--color-foundations-transparent-white-100 | #ffffff00 | A raw value nothing else points at |
--color-foundations-transparent-white-150 | #ffffff26 | A raw value nothing else points at |
--color-foundations-transparent-white-200 | #ffffff33 | A raw value nothing else points at |
--color-foundations-transparent-white-300 | #ffffff4d | A raw value nothing else points at |
--color-foundations-transparent-white-400 | #ffffff66 | A raw value nothing else points at |
--color-foundations-transparent-white-500 | #ffffff80 | A raw value nothing else points at |
--color-foundations-transparent-white-600 | #ffffff99 | A raw value nothing else points at |
--color-foundations-transparent-white-700 | #ffffffb3 | A raw value nothing else points at |
--color-foundations-transparent-white-800 | #ffffffcc | A raw value nothing else points at |
--color-foundations-transparent-white-900 | #ffffffe6 | A raw value nothing else points at |
| color/green11 | ||
--color-green-100 | #f7fdfc | Used by 1 token |
--color-green-125 | #f3fcfa | Used by 1 token |
--color-green-150 | #d8f4ed | Used by 1 token |
--color-green-200 | #9de2d1 | Used by 1 token |
--color-green-300 | #5ed0b4 | Used by 1 token |
--color-green-400 | #16ba92 | Used by 1 token |
--color-green-500 | #009e77 | Used by 1 token |
--color-green-600 | #008161 | Used by 1 token |
--color-green-700 | #006d52 | Used by 1 token |
--color-green-800 | #005742 | Used by 1 token |
--color-green-900 | #004131 | Used by 1 token |
| color/orange11 | ||
--color-orange-100 | #fffbf6 | Used by 1 token |
--color-orange-125 | #fff9f2 | Used by 1 token |
--color-orange-150 | #feebd2 | Used by 1 token |
--color-orange-200 | #fdcc8e | Used by 1 token |
--color-orange-300 | #fcac47 | Used by 1 token |
--color-orange-400 | #f68900 | Used by 1 token |
--color-orange-500 | #cf7400 | Used by 1 token |
--color-orange-600 | #a95e00 | Used by 1 token |
--color-orange-700 | #8f5000 | Used by 1 token |
--color-orange-800 | #734000 | Used by 1 token |
--color-orange-900 | #552f00 | Used by 1 token |
| color/red11 | ||
--color-red-100 | #fdeeee | Used by 2 tokens |
--color-red-125 | #fbe6e6 | Used by 2 tokens |
--color-red-150 | #f3b0b0 | Used by 2 tokens |
--color-red-200 | #ed8a8a | Used by 2 tokens |
--color-red-300 | #e55454 | Used by 2 tokens |
--color-red-400 | #e03333 | Used by 2 tokens |
--color-red-500 | #d80000 | Used by 2 tokens |
--color-red-600 | #c50000 | Used by 2 tokens |
--color-red-700 | #990000 | Used by 2 tokens |
--color-red-800 | #770000 | Used by 2 tokens |
--color-red-900 | #5b0000 | Used by 2 tokens |
| color/slate11 | ||
--color-slate-100 | #f5f6f6 | Used by 1 token |
--color-slate-125 | #f0f1f2 | Used by 1 token |
--color-slate-150 | #d1d3d8 | Used by 1 token |
--color-slate-200 | #bbbec5 | Used by 4 tokens |
--color-slate-300 | #9ca1aa | Used by 1 token |
--color-slate-400 | #898e99 | Used by 1 token |
--color-slate-500 | #6b7280 | Used by 3 tokens |
--color-slate-600 | #616874 | Used by 1 token |
--color-slate-700 | #4c515b | Used by 4 tokens |
--color-slate-800 | #3b3f46 | Used by 1 token |
--color-slate-900 | #2d3036 | Used by 1 token |
| color/yellow11 | ||
--color-yellow-100 | #fffcf1 | Used by 1 token |
--color-yellow-125 | #fffaeb | Used by 3 tokens |
--color-yellow-150 | #fdf1c6 | Used by 2 tokens |
--color-yellow-200 | #fceaaa | A raw value nothing else points at |
--color-yellow-300 | #fae084 | A raw value nothing else points at |
--color-yellow-400 | #f9da6c | Used by 3 tokens |
--color-yellow-500 | #f8d147 | Used by 2 tokens |
--color-yellow-600 | #e2be41 | Used by 1 token |
--color-yellow-700 | #b09432 | A raw value nothing else points at |
--color-yellow-800 | #887327 | Used by 1 token |
--color-yellow-900 | #68581e | Used by 2 tokens |
Semantic
Colour79
| Token | Value | Role |
|---|---|---|
| semantic/brand11 | ||
--semantic-brand-100 | #ebeff5 | Points at color-brand-100 |
--semantic-brand-125 | #e6eaf1 | Points at color-brand-125 |
--semantic-brand-150 | #b0bfd3 | Points at color-brand-150 |
--semantic-brand-200 | #8a9fbd | Points at color-brand-200 |
--semantic-brand-300 | #54749f | Points at color-brand-300 |
--semantic-brand-400 | #33598d | Points at color-brand-400 |
--semantic-brand-500 | #002e6f | Points at color-brand-500 |
--semantic-brand-600 | #002b66 | Points at color-brand-600 |
--semantic-brand-700 | #002150 | Points at color-brand-700 |
--semantic-brand-800 | #001a3e | Points at color-brand-800 |
--semantic-brand-900 | #00142f | Points at color-brand-900 |
| semantic/discount11 | ||
--semantic-discount-100 | #fdeeee | Points at color-red-100 |
--semantic-discount-125 | #fbe6e6 | Points at color-red-125 |
--semantic-discount-150 | #f3b0b0 | Points at color-red-150 |
--semantic-discount-200 | #ed8a8a | Points at color-red-200 |
--semantic-discount-300 | #e55454 | Points at color-red-300 |
--semantic-discount-400 | #e03333 | Points at color-red-400 |
--semantic-discount-500 | #d80000 | Points at color-red-500 |
--semantic-discount-600 | #c50000 | Points at color-red-600 |
--semantic-discount-700 | #990000 | Points at color-red-700 |
--semantic-discount-800 | #770000 | Points at color-red-800 |
--semantic-discount-900 | #5b0000 | Points at color-red-900 |
| semantic/error11 | ||
--semantic-error-100 | #fdeeee | Points at color-red-100 |
--semantic-error-125 | #fbe6e6 | Points at color-red-125 |
--semantic-error-150 | #f3b0b0 | Points at color-red-150 |
--semantic-error-200 | #ed8a8a | Points at color-red-200 |
--semantic-error-300 | #e55454 | Points at color-red-300 |
--semantic-error-400 | #e03333 | Points at color-red-400 |
--semantic-error-500 | #d80000 | Points at color-red-500 |
--semantic-error-600 | #c50000 | Points at color-red-600 |
--semantic-error-700 | #990000 | Points at color-red-700 |
--semantic-error-800 | #770000 | Points at color-red-800 |
--semantic-error-900 | #5b0000 | Points at color-red-900 |
| semantic/foundation2 | ||
--semantic-foundation-black | #111111 | Points at color-foundations-black |
--semantic-foundation-white | #ffffff | Points at color-foundations-white |
| semantic/information11 | ||
--semantic-information-100 | #ebeff5 | Points at color-brand-100 |
--semantic-information-125 | #e6eaf1 | Points at color-brand-125 |
--semantic-information-150 | #b0bfd3 | Points at color-brand-150 |
--semantic-information-200 | #8a9fbd | Points at color-brand-200 |
--semantic-information-300 | #54749f | Points at color-brand-300 |
--semantic-information-400 | #33598d | Points at color-brand-400 |
--semantic-information-500 | #002e6f | Points at color-brand-500 |
--semantic-information-600 | #002b66 | Points at color-brand-600 |
--semantic-information-700 | #002150 | Points at color-brand-700 |
--semantic-information-800 | #001a3e | Points at color-brand-800 |
--semantic-information-900 | #00142f | Points at color-brand-900 |
| semantic/neutral11 | ||
--semantic-neutral-100 | #f5f6f6 | Points at color-slate-100 |
--semantic-neutral-125 | #f0f1f2 | Points at color-slate-125 |
--semantic-neutral-150 | #d1d3d8 | Points at color-slate-150 |
--semantic-neutral-200 | #bbbec5 | Points at color-slate-200 |
--semantic-neutral-300 | #9ca1aa | Points at color-slate-300 |
--semantic-neutral-400 | #898e99 | Points at color-slate-400 |
--semantic-neutral-500 | #6b7280 | Points at color-slate-500 |
--semantic-neutral-600 | #616874 | Points at color-slate-600 |
--semantic-neutral-700 | #4c515b | Points at color-slate-700 |
--semantic-neutral-800 | #3b3f46 | Points at color-slate-800 |
--semantic-neutral-900 | #2d3036 | Points at color-slate-900 |
| semantic/success11 | ||
--semantic-success-100 | #f7fdfc | Points at color-green-100 |
--semantic-success-125 | #f3fcfa | Points at color-green-125 |
--semantic-success-150 | #d8f4ed | Points at color-green-150 |
--semantic-success-200 | #9de2d1 | Points at color-green-200 |
--semantic-success-300 | #5ed0b4 | Points at color-green-300 |
--semantic-success-400 | #16ba92 | Points at color-green-400 |
--semantic-success-500 | #009e77 | Points at color-green-500 |
--semantic-success-600 | #008161 | Points at color-green-600 |
--semantic-success-700 | #006d52 | Points at color-green-700 |
--semantic-success-800 | #005742 | Points at color-green-800 |
--semantic-success-900 | #004131 | Points at color-green-900 |
| semantic/warning11 | ||
--semantic-warning-100 | #fffbf6 | Points at color-orange-100 |
--semantic-warning-125 | #fff9f2 | Points at color-orange-125 |
--semantic-warning-150 | #feebd2 | Points at color-orange-150 |
--semantic-warning-200 | #fdcc8e | Points at color-orange-200 |
--semantic-warning-300 | #fcac47 | Points at color-orange-300 |
--semantic-warning-400 | #f68900 | Points at color-orange-400 |
--semantic-warning-500 | #cf7400 | Points at color-orange-500 |
--semantic-warning-600 | #a95e00 | Points at color-orange-600 |
--semantic-warning-700 | #8f5000 | Points at color-orange-700 |
--semantic-warning-800 | #734000 | Points at color-orange-800 |
--semantic-warning-900 | #552f00 | Points at color-orange-900 |
Sizes13
| Token | Value | Role | Scale |
|---|---|---|---|
--semantic-border-radius-none | 0 | Points at size-0 | |
--semantic-border-width-none | 0 | Points at size-0 | |
--semantic-border-width-25 | 1px | Points at size-25 | |
--semantic-border-radius-50 | 2px | Points at size-50 | |
--semantic-border-width-50 | 2px | Points at size-50 | |
--semantic-border-radius-100 | 4px | Points at size-100 | |
--semantic-border-width-100 | 4px | Points at size-100 | |
--semantic-border-radius-150 | 6px | Points at size-150 | |
--semantic-border-width-150 | 6px | Points at size-150 | |
--semantic-border-radius-200 | 8px | Points at size-200 | |
--semantic-border-radius-400 | 16px | Points at size-400 | |
--semantic-border-radius-800 | 28px | Points at size-800 | |
--semantic-border-radius-round | 512px | Points at size-1800 |
Fonts2
| Token | Value | Role |
|---|---|---|
--semantic-font-georgia | Manrope | Points at font-2-manrope |
--semantic-font-proxima-nova | Manrope | Points at font-1-manrope |
Mapped
| Token | Value | Role |
|---|---|---|
| border/brand8 | ||
--border-brand-active | #8a9fbd | Points at semantic-brand-200 |
--border-brand-default | #002e6f | Points at semantic-brand-500 |
--border-brand-default-hover | #002150 | Points at semantic-brand-700 |
--border-brand-default-subtle | #e6eaf1 | Points at semantic-brand-125 |
--border-brand-default-subtle-hover | #b0bfd3 | Points at semantic-brand-150 |
--border-brand-focus | #33598d | Points at semantic-brand-400 |
--border-brand-high-contrast | #001a3e | Points at semantic-brand-800 |
--border-brand-on-color | #ffffff | Points at semantic-foundation-white |
| border/brand-primary8 | ||
--border-brand-primary-active | #8a9fbd | Points at semantic-brand-200 |
--border-brand-primary-default | #002e6f | Points at semantic-brand-500 |
--border-brand-primary-default-hover | #002150 | Points at semantic-brand-700 |
--border-brand-primary-default-subtle | #e6eaf1 | Points at semantic-brand-125 |
--border-brand-primary-default-subtle-hover | #b0bfd3 | Points at semantic-brand-150 |
--border-brand-primary-focus | #33598d | Points at semantic-brand-400 |
--border-brand-primary-high-contrast | #001a3e | Points at semantic-brand-800 |
--border-brand-primary-on-color | #ffffff | Points at semantic-foundation-white |
| border/default7 | ||
--border-default-card | #ffffff | Points at semantic-foundation-white |
--border-default-card-secondary | #f0f1f2 | Points at semantic-neutral-125 |
--border-default-default | #898e99 | Points at semantic-neutral-400 |
--border-default-high-contrast | #3b3f46 | Points at semantic-neutral-800 |
--border-default-low-contrast | #d1d3d8 | Points at semantic-neutral-150 |
--border-default-on-color | #ffffff | Points at semantic-foundation-white |
--border-default-page-secondary | #f0f1f2 | Points at semantic-neutral-125 |
| border/disabled2 | ||
--border-disabled-disabled | #d1d3d8 | Points at semantic-neutral-150 |
--border-disabled-focus | #f0f1f2 | Points at semantic-neutral-125 |
| border/discount7 | ||
--border-discount-active | #ed8a8a | Points at semantic-discount-200 |
--border-discount-default | #c50000 | Points at semantic-discount-600 |
--border-discount-default-hover | #e03333 | Points at semantic-discount-400 |
--border-discount-focus | #e03333 | Points at semantic-discount-400 |
--border-discount-high-contrast | #5b0000 | Points at semantic-discount-900 |
--border-discount-on-color | #ffffff | Points at semantic-foundation-white |
--border-discount-on-color-hover | #fbe6e6 | Points at semantic-discount-125 |
| border/error6 | ||
--border-error-default | #f3b0b0 | Points at semantic-error-150 |
--border-error-default-hover | #e03333 | Points at semantic-error-400 |
--border-error-default-subtle | #fbe6e6 | Points at semantic-error-125 |
--border-error-default-subtle-hover | #f3b0b0 | Points at semantic-error-150 |
--border-error-focus | #d80000 | Points at semantic-error-500 |
--border-error-high-contrast | #770000 | Points at semantic-error-800 |
| border/information5 | ||
--border-information-default | #b0bfd3 | Points at semantic-brand-150 |
--border-information-default-hover | #33598d | Points at semantic-brand-400 |
--border-information-default-subtle | #e6eaf1 | Points at semantic-brand-125 |
--border-information-default-subtle-hover | #b0bfd3 | Points at semantic-brand-150 |
--border-information-high-contrast | #001a3e | Points at semantic-brand-800 |
| border/page4 | ||
--border-page-card | #ffffff | Points at semantic-foundation-white |
--border-page-card-secondary | #f0f1f2 | Points at semantic-neutral-125 |
--border-page-page | #898e99 | Points at semantic-neutral-400 |
--border-page-page-secondary | #f0f1f2 | Points at semantic-neutral-125 |
| border/success8 | ||
--border-success-active | #9de2d1 | Points at semantic-success-200 |
--border-success-default | #9de2d1 | Points at semantic-success-200 |
--border-success-default-hover | #16ba92 | Points at semantic-success-400 |
--border-success-default-subtle | #f3fcfa | Points at semantic-success-125 |
--border-success-default-subtle-hover | #d8f4ed | Points at semantic-success-150 |
--border-success-focus | #16ba92 | Points at semantic-success-400 |
--border-success-high-contrast | #005742 | Points at semantic-success-800 |
--border-success-on-color | #ffffff | Points at semantic-foundation-white |
| border/warning5 | ||
--border-warning-default | #fdcc8e | Points at semantic-warning-200 |
--border-warning-default-subtle | #fff9f2 | Points at semantic-warning-125 |
--border-warning-default-subtle-hover | #feebd2 | Points at semantic-warning-150 |
--border-warning-high-contrast | #734000 | Points at semantic-warning-800 |
--border-warning-hover | #f68900 | Points at semantic-warning-400 |
| icon/brand4 | ||
--icon-brand-default | #002e6f | Points at semantic-brand-500 |
--icon-brand-default-hover | #002150 | Points at semantic-brand-700 |
--icon-brand-on-color | #ffffff | Points at semantic-foundation-white |
--icon-brand-on-color-hover | #ffffff | Points at semantic-foundation-white |
| icon/brand-primary4 | ||
--icon-brand-primary-default | #002e6f | Points at icon-brand-default |
--icon-brand-primary-default-hover | #002150 | Points at icon-brand-default-hover |
--icon-brand-primary-on-color | #ffffff | Points at semantic-foundation-white |
--icon-brand-primary-on-color-hover | #ffffff | Points at semantic-foundation-white |
| icon/default4 | ||
--icon-default-default | #111111 | Points at semantic-foundation-black |
--icon-default-hint | #6b7280 | Points at color-slate-500 |
--icon-default-on-color | #ffffff | Points at semantic-foundation-white |
--icon-default-placeholder | #4c515b | Points at color-slate-700 |
| icon/disabled2 | ||
--icon-disabled-default | #6b7280 | Points at semantic-neutral-500 |
--icon-disabled-on-color | #bbbec5 | Points at semantic-neutral-200 |
| icon/discount5 | ||
--icon-discount-default | #c50000 | Points at semantic-discount-600 |
--icon-discount-default-hover | #e03333 | Points at semantic-discount-400 |
--icon-discount-high-contrast | #5b0000 | Points at semantic-discount-900 |
--icon-discount-on-color | #ffffff | Points at semantic-foundation-white |
--icon-discount-on-color-hover | #fbe6e6 | Points at semantic-discount-125 |
| icon/error5 | ||
--icon-error-default | #c50000 | Points at semantic-error-600 |
--icon-error-default-hover | #e03333 | Points at semantic-error-400 |
--icon-error-high-contrast | #5b0000 | Points at semantic-error-900 |
--icon-error-on-color | #f3b0b0 | Points at semantic-error-150 |
--icon-error-on-color-hover | #fbe6e6 | Points at semantic-error-125 |
| icon/information5 | ||
--icon-information-default | #002e6f | Points at color-brand-500 |
--icon-information-default-hover | #33598d | Points at color-brand-400 |
--icon-information-high-contrast | #001a3e | Points at color-brand-800 |
--icon-information-on-color | #b0bfd3 | Points at color-brand-150 |
--icon-information-on-color-hover | #e6eaf1 | Points at color-brand-125 |
| icon/on-color4 | ||
--icon-on-color-body | #ffffff | Points at semantic-foundation-white |
--icon-on-color-caption | #ffffff | Points at semantic-foundation-white |
--icon-on-color-heading | #ffffff | Points at semantic-foundation-white |
--icon-on-color-placeholder | #bbbec5 | Points at color-slate-200 |
| icon/promotion5 | ||
--icon-promotion-default | #f8d147 | Points at color-yellow-500 |
--icon-promotion-default-hover | #f9da6c | Points at color-yellow-400 |
--icon-promotion-default-subtle | #fffaeb | Points at color-yellow-125 |
--icon-promotion-default-subtle-hover | #fdf1c6 | Points at color-yellow-150 |
--icon-promotion-high-contrast | #68581e | Points at color-yellow-900 |
| icon/success5 | ||
--icon-success-default | #008161 | Points at semantic-success-600 |
--icon-success-default-hover | #008161 | Points at semantic-success-600 |
--icon-success-high-contrast | #005742 | Points at semantic-success-800 |
--icon-success-on-color | #ffffff | Points at semantic-foundation-white |
--icon-success-on-color-hover | #f3fcfa | Points at semantic-success-125 |
| icon/warning5 | ||
--icon-warning-default | #a95e00 | Points at semantic-warning-600 |
--icon-warning-default-hover | #f68900 | Points at semantic-warning-400 |
--icon-warning-high-contrast | #734000 | Points at semantic-warning-800 |
--icon-warning-on-color | #feebd2 | Points at semantic-warning-150 |
--icon-warning-on-color-hover | #fff9f2 | Points at semantic-warning-125 |
| surface/brand9 | ||
--surface-brand-active | #8a9fbd | Points at semantic-brand-200 |
--surface-brand-default | #002e6f | Points at semantic-brand-500 |
--surface-brand-default-hover | #002150 | Points at semantic-brand-700 |
--surface-brand-default-subtle | #ebeff5 | Points at semantic-brand-100 |
--surface-brand-default-subtle-hover | #e6eaf1 | Points at semantic-brand-125 |
--surface-brand-high-contrast | #001a3e | Points at semantic-brand-800 |
--surface-brand-on-color | #ffffff | Points at semantic-foundation-white |
--surface-brand-on-color-hover | #f5f6f6 | Points at semantic-neutral-100 |
--surface-brand-on-color-selected | #f0f1f2 | Points at semantic-neutral-125 |
| surface/brand-primary9 | ||
--surface-brand-primary-active | #8a9fbd | Points at semantic-brand-200 |
--surface-brand-primary-default | #002e6f | Points at semantic-brand-500 |
--surface-brand-primary-default-hover | #002150 | Points at semantic-brand-700 |
--surface-brand-primary-default-subtle | #ebeff5 | Points at semantic-brand-100 |
--surface-brand-primary-default-subtle-hover | #e6eaf1 | Points at semantic-brand-125 |
--surface-brand-primary-high-contrast | #001a3e | Points at semantic-brand-800 |
--surface-brand-primary-on-color | #ffffff | Points at semantic-foundation-white |
--surface-brand-primary-on-color-hover | #f5f6f6 | Points at semantic-neutral-100 |
--surface-brand-primary-on-color-selected | #f0f1f2 | Points at semantic-neutral-125 |
| surface/default7 | ||
--surface-default-card | #ffffff | Points at semantic-foundation-white |
--surface-default-card-secondary | #f5f6f6 | Points at semantic-neutral-100 |
--surface-default-default | #f5f6f6 | Points at semantic-neutral-100 |
--surface-default-high-contrast | #3b3f46 | Points at semantic-neutral-800 |
--surface-default-on-color | #ffffff | Points at semantic-foundation-white |
--surface-default-page | #ffffff | Points at semantic-foundation-white |
--surface-default-page-secondary | #f0f1f2 | Points at semantic-neutral-125 |
| surface/disabled1 | ||
--surface-disabled-disabled | #f0f1f2 | Points at semantic-neutral-125 |
| surface/discount6 | ||
--surface-discount-active | #ed8a8a | Points at semantic-discount-200 |
--surface-discount-default | #c50000 | Points at semantic-discount-600 |
--surface-discount-default-hover | #990000 | Points at semantic-discount-700 |
--surface-discount-high-contrast | #770000 | Points at semantic-discount-800 |
--surface-discount-on-color | #f3b0b0 | Points at semantic-discount-150 |
--surface-discount-on-color-hover | #fbe6e6 | Points at semantic-discount-125 |
| surface/error5 | ||
--surface-error-default | #d80000 | Points at semantic-error-500 |
--surface-error-default-hover | #e03333 | Points at semantic-error-400 |
--surface-error-default-subtle | #fbe6e6 | Points at semantic-error-125 |
--surface-error-default-subtle-hover | #fdeeee | Points at semantic-error-100 |
--surface-error-high-contrast | #770000 | Points at semantic-error-800 |
| surface/information5 | ||
--surface-information-default | #002e6f | Points at semantic-brand-500 |
--surface-information-default-hover | #33598d | Points at semantic-brand-400 |
--surface-information-default-subtle | #e6eaf1 | Points at semantic-brand-125 |
--surface-information-default-subtle-hover | #ebeff5 | Points at semantic-brand-100 |
--surface-information-high-contrast | #001a3e | Points at semantic-brand-800 |
| surface/on-color5 | ||
--surface-on-color-body | #ffffff | Points at semantic-foundation-white |
--surface-on-color-caption | #ffffff | Points at semantic-foundation-white |
--surface-on-color-heading | #ffffff | Points at semantic-foundation-white |
--surface-on-color-high-contrast | #3b3f46 | Points at semantic-neutral-800 |
--surface-on-color-placeholder | #bbbec5 | Points at color-slate-200 |
| surface/promotion5 | ||
--surface-promotion-default | #f8d147 | Points at color-yellow-500 |
--surface-promotion-default-hover | #f9da6c | Points at color-yellow-400 |
--surface-promotion-default-subtle | #fffaeb | Points at color-yellow-125 |
--surface-promotion-default-subtle-hover | #fffcf1 | Points at color-yellow-100 |
--surface-promotion-high-contrast | #887327 | Points at color-yellow-800 |
| surface/success6 | ||
--surface-success-active | #9de2d1 | Points at semantic-success-200 |
--surface-success-default | #008161 | Points at semantic-success-600 |
--surface-success-default-hover | #006d52 | Points at semantic-success-700 |
--surface-success-default-subtle | #f3fcfa | Points at semantic-success-125 |
--surface-success-default-subtle-hover | #f7fdfc | Points at semantic-success-100 |
--surface-success-high-contrast | #005742 | Points at semantic-success-800 |
| surface/warning5 | ||
--surface-warning-default | #cf7400 | Points at semantic-warning-500 |
--surface-warning-default-hover | #f68900 | Points at semantic-warning-400 |
--surface-warning-default-subtle | #fff9f2 | Points at semantic-warning-125 |
--surface-warning-default-subtle-hover | #fffbf6 | Points at semantic-warning-100 |
--surface-warning-high-contrast | #734000 | Points at semantic-warning-800 |
| text/brand5 | ||
--text-brand-active | #ffffff | Points at semantic-foundation-white |
--text-brand-default | #002e6f | Points at semantic-brand-500 |
--text-brand-default-hover | #002150 | Points at semantic-brand-700 |
--text-brand-on-color | #ffffff | Points at semantic-foundation-white |
--text-brand-on-color-hover | #ffffff | Points at semantic-foundation-white |
| text/default7 | ||
--text-default-caption | #111111 | Points at semantic-foundation-black |
--text-default-default | #111111 | Points at semantic-foundation-black |
--text-default-default-hover | #4c515b | Points at color-slate-700 |
--text-default-display | #111111 | Points at semantic-foundation-black |
--text-default-heading | #111111 | Points at semantic-foundation-black |
--text-default-hint | #6b7280 | Points at color-slate-500 |
--text-default-placeholder | #4c515b | Points at color-slate-700 |
| text/disabled2 | ||
--text-disabled-default | #616874 | Points at semantic-neutral-600 |
--text-disabled-on-color | #bbbec5 | Points at semantic-neutral-200 |
| text/discount5 | ||
--text-discount-default | #c50000 | Points at semantic-discount-600 |
--text-discount-default-hover | #e03333 | Points at semantic-discount-400 |
--text-discount-high-contrast | #5b0000 | Points at semantic-discount-900 |
--text-discount-on-color | #ffffff | Points at semantic-foundation-white |
--text-discount-on-color-hover | #fbe6e6 | Points at semantic-discount-125 |
| text/error5 | ||
--text-error-default | #c50000 | Points at semantic-error-600 |
--text-error-default-hover | #e03333 | Points at semantic-error-400 |
--text-error-high-contrast | #5b0000 | Points at semantic-error-900 |
--text-error-on-color | #f3b0b0 | Points at semantic-error-150 |
--text-error-on-color-hover | #fbe6e6 | Points at semantic-error-125 |
| text/information5 | ||
--text-information-default | #002b66 | Points at color-brand-600 |
--text-information-default-hover | #33598d | Points at color-brand-400 |
--text-information-high-contrast | #00142f | Points at color-brand-900 |
--text-information-on-color | #b0bfd3 | Points at color-brand-150 |
--text-information-on-color-hover | #e6eaf1 | Points at color-brand-125 |
| text/on-color4 | ||
--text-on-color-body | #ffffff | Points at semantic-foundation-white |
--text-on-color-caption | #ffffff | Points at semantic-foundation-white |
--text-on-color-heading | #ffffff | Points at semantic-foundation-white |
--text-on-color-placeholder | #bbbec5 | Points at color-slate-200 |
| text/promotion5 | ||
--text-promotion-default | #e2be41 | Points at color-yellow-600 |
--text-promotion-default-hover | #f9da6c | Points at color-yellow-400 |
--text-promotion-default-subtle | #fffaeb | Points at color-yellow-125 |
--text-promotion-default-subtle-hover | #fdf1c6 | Points at color-yellow-150 |
--text-promotion-high-contrast | #68581e | Points at color-yellow-900 |
| text/success5 | ||
--text-success-default | #008161 | Points at semantic-success-600 |
--text-success-default-hover | #008161 | Points at semantic-success-600 |
--text-success-high-contrast | #004131 | Points at semantic-success-900 |
--text-success-on-color | #ffffff | Points at semantic-foundation-white |
--text-success-on-color-hover | #f3fcfa | Points at semantic-success-125 |
| text/warning5 | ||
--text-warning-default | #a95e00 | Points at semantic-warning-600 |
--text-warning-default-hover | #f68900 | Points at semantic-warning-400 |
--text-warning-high-contrast | #552f00 | Points at semantic-warning-900 |
--text-warning-on-color | #feebd2 | Points at semantic-warning-150 |
--text-warning-on-color-hover | #fff9f2 | Points at semantic-warning-125 |
Typography Settings
Sizes72
| Token | Value | Role | Scale |
|---|---|---|---|
--body-12-letter-spacing | 0 | Points at size-0 | |
--body-12-paragraph | 0 | A raw value nothing else points at | |
--body-13-paragraph | 0 | A raw value nothing else points at | |
--body-14-letter-spacing | 0 | Used by 2 tokens | |
--body-14-paragraph | 0 | A raw value nothing else points at | |
--body-16-letter-spacing | 0 | Points at size-0 | |
--body-16-paragraph | 0 | A raw value nothing else points at | |
--body-18-letter-spacing | 0 | Used by 2 tokens | |
--body-18-paragraph | 0 | A raw value nothing else points at | |
--display-l-letter-spacing | 0 | Used by 1 token | |
--display-l-paragraph | 0 | A raw value nothing else points at | |
--display-m-letter-spacing | 0 | Points at size-0 | |
--display-m-paragraph | 0 | A raw value nothing else points at | |
--display-xl-letter-spacing | 0 | Used by 1 token | |
--display-xl-paragraph | 0 | A raw value nothing else points at | |
--display-xxl-letter-spacing | 0 | Used by 1 token | |
--display-xxl-paragraph | 0 | A raw value nothing else points at | |
--display-xxxl-letter-spacing | 0 | Used by 1 token | |
--display-xxxl-paragraph | 0 | A raw value nothing else points at | |
--headline-1-letter-spacing | 0 | Used by 1 token | |
--headline-1-paragraph | 0 | A raw value nothing else points at | |
--headline-2-letter-spacing | 0 | Used by 1 token | |
--headline-2-paragraph | 0 | A raw value nothing else points at | |
--headline-3-letter-spacing | 0 | Used by 1 token | |
--headline-3-paragraph | 0 | A raw value nothing else points at | |
--headline-4-letter-spacing | 0 | Used by 1 token | |
--headline-4-paragraph | 0 | A raw value nothing else points at | |
--headline-5-6-letter-spacing | 0 | Used by 2 tokens | |
--headline-5-6-paragraph | 0 | A raw value nothing else points at | |
--helper-text-12-letter-spacing | 0 | Points at size-0 | |
--helper-text-12-paragraph | 0 | A raw value nothing else points at | |
--subtitle-14-letter-spacing | 0 | Points at size-0 | |
--subtitle-14-paragraph | 0 | A raw value nothing else points at | |
--subtitle-18-letter-spacing | 0 | Points at size-0 | |
--subtitle-18-paragraph | 0 | A raw value nothing else points at | |
--body-13-letter-spacing | 1px | Points at size-25 | |
--body-12-size | 12px | Points at size-300 | |
--helper-text-12-size | 12px | Points at size-300 | |
--body-13-size | 13px | Used by 2 tokens | |
--body-14-size | 14px | Used by 2 tokens | |
--subtitle-14-size | 14px | Used by 2 tokens | |
--body-12-line-height | 16px | Points at size-400 | |
--body-16-size | 16px | Points at size-400 | |
--headline-5-6-size | 16px | Points at size-400 | |
--helper-text-12-line-height | 16px | Points at size-400 | |
--body-18-size | 18px | Used by 2 tokens | |
--headline-4-size | 18px | Used by 1 token | |
--subtitle-18-size | 18px | Used by 2 tokens | |
--body-13-line-height | 20px | Points at size-500 | |
--body-14-line-height | 20px | Points at size-500 | |
--display-m-size | 20px | Points at size-500 | |
--headline-3-size | 20px | Points at size-500 | |
--subtitle-14-line-height | 20px | Points at size-500 | |
--subtitle-18-line-height | 20px | Points at size-500 | |
--body-16-line-height | 24px | Points at size-700 | |
--body-18-line-height | 24px | Points at size-700 | |
--display-m-line-height | 24px | Points at size-700 | |
--headline-2-size | 24px | Points at size-700 | |
--headline-4-line-height | 24px | Points at size-700 | |
--headline-5-6-line-height | 24px | Points at size-700 | |
--headline-1-size | 28px | Points at size-800 | |
--headline-3-line-height | 28px | Points at size-800 | |
--display-l-size | 32px | Points at size-900 | |
--headline-2-line-height | 32px | Points at size-900 | |
--display-xl-size | 36px | Points at size-950 | |
--headline-1-line-height | 36px | Points at size-950 | |
--display-l-line-height | 40px | Points at size-1000 | |
--display-xxl-size | 40px | Points at size-1000 | |
--display-xl-line-height | 44px | Used by 1 token | |
--display-xxl-line-height | 48px | Points at size-1100 | |
--display-xxxl-size | 72px | Points at size-1400 | |
--display-xxxl-line-height | 88px | Points at size-1475 |
Fonts18
| Token | Value | Role |
|---|---|---|
--body-12-font-family | Manrope | Points at font-1-manrope |
--body-13-font-family | Manrope | Points at font-1-manrope |
--body-14-font-family | Manrope | Points at font-1-manrope |
--body-16-font-family | Manrope | Points at font-1-manrope |
--body-18-font-family | Manrope | Points at font-1-manrope |
--display-l-font-family | Manrope | Points at font-1-manrope |
--display-m-font-family | Manrope | Points at font-1-manrope |
--display-xl-font-family | Manrope | Points at font-1-manrope |
--display-xxl-font-family | Manrope | Points at font-1-manrope |
--display-xxxl-font-family | Manrope | Points at font-1-manrope |
--headline-1-font-family | Manrope | Points at font-2-manrope |
--headline-2-font-family | Manrope | Points at font-2-manrope |
--headline-3-font-family | Manrope | Points at font-2-manrope |
--headline-4-font-family | Manrope | Points at font-2-manrope |
--headline-5-6-font-family | Manrope | Points at font-2-manrope |
--helper-text-12-font-family | Manrope | Points at font-1-manrope |
--subtitle-14-font-family | Manrope | Points at font-1-manrope |
--subtitle-18-font-family | Manrope | Points at font-1-manrope |
Weights26
| Token | Value | Role |
|---|---|---|
--body-12-font-weight-1 | 400 | Points at font-1-regular |
--body-12-font-weight-2 | 600 | Points at font-1-semibold |
--body-13-font-weight-1 | 400 | Points at font-1-regular |
--body-13-font-weight-2 | 600 | Points at font-1-semibold |
--body-14-font-weight-1 | 400 | Points at font-1-regular |
--body-14-font-weight-2 | 600 | Points at font-1-semibold |
--body-16-font-weight-1 | 400 | Points at font-1-regular |
--body-16-font-weight-2 | 600 | Points at font-1-semibold |
--body-18-font-weight-1 | 400 | Points at font-1-regular |
--body-18-font-weight-2 | 700 | Points at font-1-bold |
--display-l-font-weight | 800 | Points at font-1-extrabold |
--display-m-font-weight | 700 | Points at font-1-bold |
--display-xl-font-weight | 800 | Points at font-1-extrabold |
--display-xxl-font-weight | 800 | Points at font-1-extrabold |
--display-xxxl-font-weight | 800 | Points at font-1-extrabold |
--headline-1-font-weight | 700 | Points at font-2-bold |
--headline-2-font-weight | 700 | Points at font-2-bold |
--headline-3-font-weight | 700 | Points at font-2-bold |
--headline-4-font-weight | 700 | Points at font-2-bold |
--headline-5-6-font-weight | 700 | Points at font-2-bold |
--helper-text-12-font-weight-1 | 400 | Points at font-1-regular |
--helper-text-12-font-weight-2 | 600 | Points at font-1-semibold |
--subtitle-14-font-weight-1 | 400 | Points at font-1-regular |
--subtitle-14-font-weight-2 | 700 | Points at font-1-bold |
--subtitle-18-font-weight-1 | 400 | Points at font-1-regular |
--subtitle-18-font-weight-2 | 700 | Points at font-1-bold |
Size
| Token | Value | Role | Scale |
|---|---|---|---|
--size-0 | 0 | Used by 8 tokens | |
--size-25 | 1px | Used by 3 tokens | |
--size-50 | 2px | Used by 2 tokens | |
--size-100 | 4px | Used by 2 tokens | |
--size-150 | 6px | Used by 2 tokens | |
--size-200 | 8px | Used by 1 token | |
--size-300 | 12px | Used by 2 tokens | |
--size-400 | 16px | Used by 5 tokens | |
--size-500 | 20px | Used by 7 tokens | |
--size-700 | 24px | Used by 7 tokens | |
--size-800 | 28px | Used by 6 tokens | |
--size-900 | 32px | Used by 5 tokens | |
--size-950 | 36px | Used by 4 tokens | |
--size-1000 | 40px | Used by 3 tokens | |
--size-1100 | 48px | Used by 2 tokens | |
--size-1200 | 56px | Used by 2 tokens | |
--size-1300 | 64px | Used by 1 token | |
--size-1400 | 72px | Used by 2 tokens | |
--size-1425 | 76px | A raw value nothing else points at | |
--size-1450 | 80px | A raw value nothing else points at | |
--size-1475 | 88px | Used by 1 token | |
--size-1500 | 96px | A raw value nothing else points at | |
--size-1600 | 128px | A raw value nothing else points at | |
--size-1700 | 256px | A raw value nothing else points at | |
--size-1800 | 512px | Used by 1 token |
Typography
Fonts2
| Token | Value | Role |
|---|---|---|
--font-1-manrope | Manrope | Used by 14 tokens |
--font-2-manrope | Manrope | Used by 6 tokens |
Weights11
| Token | Value | Role |
|---|---|---|
--font-1-bold | 700 | Used by 4 tokens |
--font-1-extrabold | 800 | Used by 4 tokens |
--font-1-extralight | 200 | A raw value nothing else points at |
--font-1-light | 300 | A raw value nothing else points at |
--font-1-medium | 500 | A raw value nothing else points at |
--font-1-regular | 400 | Used by 8 tokens |
--font-1-semibold | 600 | Used by 5 tokens |
--font-2-bold | 700 | Used by 5 tokens |
--font-2-light | 300 | A raw value nothing else points at |
--font-2-regular | 400 | A raw value nothing else points at |
--font-2-semibold | 600 | A raw value nothing else points at |
Text styles
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
Gradients
| Token | Value | Role |
|---|---|---|
--gradient-1 | linear-gradient(128deg, #f1ce28 26%, #349456 75%) | Test Gradien 1 |
Effect styles
Effects1
--beautiful-shadowBlurs2
| Token | Value | Role |
|---|---|---|
--background-blur | blur(38.9px) | Background Blur |
--layer-blur | blur(26.2px) | Layer blur |
Accessibility
| Token | On the lightest surface | On the darkest surface |
|---|---|---|
icon-discount-default-hover | 4.48:1 surface-on-color-heading | 3.85:1 surface-brand-high-contrast |
icon-error-default-hover | 4.48:1 surface-on-color-heading | 3.85:1 surface-brand-high-contrast |
text-discount-default-hover | 4.48:1 surface-on-color-heading | 3.85:1 surface-brand-high-contrast |
text-error-default-hover | 4.48:1 surface-on-color-heading | 3.85:1 surface-brand-high-contrast |
Measured against the extremes of this document, so no other surface would rescue a failure. Pairing text with a particular background is something Figma does not record, so nothing here guesses at combinations.