| Token | White | g10 | g90 | g100 | Properties |
|---|---|---|---|---|---|
| background | white-0#ffffff | gray-10#f4f4f4 | gray-90#262626 | gray-100#161616 |
|
| background-active | —rgba(141, 141, 141, 0.5) | —rgba(141, 141, 141, 0.5) | —rgba(141, 141, 141, 0.4) | —rgba(141, 141, 141, 0.4) |
|
| background-selected | —rgba(141, 141, 141, 0.2) | —rgba(141, 141, 141, 0.2) | —rgba(141, 141, 141, 0.24) | —rgba(141, 141, 141, 0.24) |
|
| background-selected-hover | —rgba(141, 141, 141, 0.32) | —rgba(141, 141, 141, 0.32) | —rgba(141, 141, 141, 0.32) | —rgba(141, 141, 141, 0.32) |
|
| background-hover | —rgba(141, 141, 141, 0.12) | —rgba(141, 141, 141, 0.12) | —rgba(141, 141, 141, 0.16) | —rgba(141, 141, 141, 0.16) |
|
| background-brand | blue-60#0f62fe | blue-60#0f62fe | blue-60#0f62fe | blue-60#0f62fe |
|
| background-inverse | gray-80#393939 | gray-80#393939 | gray-10#f4f4f4 | gray-10#f4f4f4 |
|
| background-inverse-hover | gray-hover-80#474747 | gray-hover-80#474747 | gray-hover-10#e8e8e8 | gray-hover-10#e8e8e8 |
|
| layer-01 | gray-10#f4f4f4 | white-0#ffffff | gray-80#393939 | gray-90#262626 |
|
| layer-active-01 | gray-30#c6c6c6 | gray-30#c6c6c6 | gray-60#6f6f6f | gray-70#525252 |
|
| layer-hover-01 | gray-hover-10#e8e8e8 | gray-hover-10#e8e8e8 | gray-hover-80#474747 | gray-hover-90#333333 |
|
| layer-selected-01 | gray-20#e0e0e0 | gray-20#e0e0e0 | gray-70#525252 | gray-80#393939 |
|
| layer-selected-hover-01 | gray-hover-20#d1d1d1 | gray-hover-20#d1d1d1 | gray-hover-70#636363 | gray-hover-80#474747 |
|
| layer-02 | white-0#ffffff | gray-10#f4f4f4 | gray-70#525252 | gray-80#393939 |
|
| layer-active-02 | gray-30#c6c6c6 | gray-30#c6c6c6 | gray-50#8d8d8d | gray-60#6f6f6f |
|
| layer-hover-02 | gray-hover-10#e8e8e8 | gray-hover-10#e8e8e8 | gray-hover-70#636363 | gray-hover-80#474747 |
|
| layer-selected-02 | gray-20#e0e0e0 | gray-20#e0e0e0 | gray-60#6f6f6f | gray-70#525252 |
|
| layer-selected-hover-02 | gray-hover-20#d1d1d1 | gray-hover-20#d1d1d1 | gray-hover-60#5e5e5e | gray-hover-70#636363 |
|
| layer-03 | gray-10#f4f4f4 | white-0#ffffff | gray-60#6f6f6f | gray-70#525252 |
|
| layer-active-03 | gray-30#c6c6c6 | gray-30#c6c6c6 | gray-80#393939 | gray-50#8d8d8d |
|
| layer-hover-03 | gray-hover-10#e8e8e8 | gray-hover-10#e8e8e8 | gray-hover-60#5e5e5e | gray-hover-70#636363 |
|
| layer-selected-03 | gray-20#e0e0e0 | gray-20#e0e0e0 | gray-70#525252 | gray-60#6f6f6f |
|
| layer-selected-hover-03 | gray-hover-20#d1d1d1 | gray-hover-20#d1d1d1 | gray-hover-70#636363 | gray-hover-60#5e5e5e |
|
| layer-selected-inverse | gray-100#161616 | gray-100#161616 | gray-10#f4f4f4 | gray-10#f4f4f4 |
|
| layer-selected-disabled | gray-50#8d8d8d | gray-50#8d8d8d | gray-40#a8a8a8 | gray-40#a8a8a8 |
|
| layer-accent-01 | gray-20#e0e0e0 | gray-20#e0e0e0 | gray-70#525252 | gray-80#393939 |
|
| layer-accent-active-01 | gray-40#a8a8a8 | gray-40#a8a8a8 | gray-50#8d8d8d | gray-60#6f6f6f |
|
| layer-accent-hover-01 | gray-hover-20#d1d1d1 | gray-hover-20#d1d1d1 | gray-hover-70#636363 | gray-hover-80#474747 |
|
| layer-accent-02 | gray-20#e0e0e0 | gray-20#e0e0e0 | gray-60#6f6f6f | gray-70#525252 |
|
| layer-accent-active-02 | gray-40#a8a8a8 | gray-40#a8a8a8 | gray-80#393939 | gray-50#8d8d8d |
|
| layer-accent-hover-02 | gray-hover-20#d1d1d1 | gray-hover-20#d1d1d1 | gray-hover-60#5e5e5e | gray-hover-70#636363 |
|
| layer-accent-03 | gray-20#e0e0e0 | gray-20#e0e0e0 | gray-50#8d8d8d | gray-60#6f6f6f |
|
| layer-accent-active-03 | gray-40#a8a8a8 | gray-40#a8a8a8 | gray-70#525252 | gray-80#393939 |
|
| layer-accent-hover-03 | gray-hover-20#d1d1d1 | gray-hover-20#d1d1d1 | gray-hover-50#7a7a7a | gray-hover-60#5e5e5e |
|
| field-01 | gray-10#f4f4f4 | white-0#ffffff | gray-80#393939 | gray-90#262626 |
|
| field-hover-01 | gray-hover-10#e8e8e8 | gray-hover-10#e8e8e8 | gray-hover-80#474747 | gray-hover-90#333333 |
|
| field-02 | white-0#ffffff | gray-10#f4f4f4 | gray-70#525252 | gray-80#393939 |
|
| field-hover-02 | gray-hover-10#e8e8e8 | gray-hover-10#e8e8e8 | gray-hover-70#636363 | gray-hover-80#474747 |
|
| field-03 | gray-10#f4f4f4 | white-0#ffffff | gray-60#6f6f6f | gray-70#525252 |
|
| field-hover-03 | gray-hover-10#e8e8e8 | gray-hover-10#e8e8e8 | gray-hover-60#5e5e5e | gray-hover-70#636363 |
|
| interactive | blue-60#0f62fe | blue-60#0f62fe | blue-50#4589ff | blue-50#4589ff |
|
| border-subtle-00 | gray-20#e0e0e0 | gray-30#c6c6c6 | gray-70#525252 | gray-80#393939 |
|
| border-subtle-01 | gray-30#c6c6c6 | gray-20#e0e0e0 | gray-70#525252 | gray-80#393939 |
|
| border-subtle-selected-01 | gray-30#c6c6c6 | gray-30#c6c6c6 | gray-60#6f6f6f | gray-70#525252 |
|
| border-subtle-02 | gray-20#e0e0e0 | gray-30#c6c6c6 | gray-60#6f6f6f | gray-70#525252 |
|
| border-subtle-selected-02 | gray-30#c6c6c6 | gray-30#c6c6c6 | gray-50#8d8d8d | gray-60#6f6f6f |
|
| border-subtle-03 | gray-30#c6c6c6 | gray-20#e0e0e0 | gray-50#8d8d8d | gray-60#6f6f6f |
|
| border-subtle-selected-03 | gray-30#c6c6c6 | gray-30#c6c6c6 | gray-40#a8a8a8 | gray-50#8d8d8d |
|
| border-strong-01 | gray-50#8d8d8d | gray-50#8d8d8d | gray-50#8d8d8d | gray-60#6f6f6f |
|
| border-strong-02 | gray-50#8d8d8d | gray-50#8d8d8d | gray-40#a8a8a8 | gray-50#8d8d8d |
|
| border-strong-03 | gray-50#8d8d8d | gray-50#8d8d8d | gray-30#c6c6c6 | gray-40#a8a8a8 |
|
| border-tile-01 | gray-30#c6c6c6 | gray-40#a8a8a8 | gray-60#6f6f6f | gray-70#525252 |
|
| border-tile-02 | gray-40#a8a8a8 | gray-30#c6c6c6 | gray-50#8d8d8d | gray-60#6f6f6f |
|
| border-tile-03 | gray-30#c6c6c6 | gray-40#a8a8a8 | gray-40#a8a8a8 | gray-50#8d8d8d |
|
| border-inverse | gray-100#161616 | gray-100#161616 | gray-10#f4f4f4 | gray-10#f4f4f4 |
|
| border-interactive | blue-60#0f62fe | blue-60#0f62fe | blue-50#4589ff | blue-50#4589ff |
|
| border-disabled | gray-30#c6c6c6 | gray-30#c6c6c6 | —rgba(141, 141, 141, 0.5) | —rgba(141, 141, 141, 0.5) |
|
| text-primary | gray-100#161616 | gray-100#161616 | gray-10#f4f4f4 | gray-10#f4f4f4 |
|
| text-secondary | gray-70#525252 | gray-70#525252 | gray-30#c6c6c6 | gray-30#c6c6c6 |
|
| text-placeholder | —rgba(22, 22, 22, 0.4) | —rgba(22, 22, 22, 0.4) | —rgba(244, 244, 244, 0.4) | —rgba(244, 244, 244, 0.4) |
|
| text-helper | gray-60#6f6f6f | gray-60#6f6f6f | gray-30#c6c6c6 | gray-40#a8a8a8 |
|
| text-error | red-60#da1e28 | red-60#da1e28 | red-30#ffb3b8 | red-40#ff8389 |
|
| text-inverse | white-0#ffffff | white-0#ffffff | gray-100#161616 | gray-100#161616 |
|
| text-on-color | white-0#ffffff | white-0#ffffff | white-0#ffffff | white-0#ffffff |
|
| text-on-color-disabled | gray-50#8d8d8d | gray-50#8d8d8d | —rgba(255, 255, 255, 0.25) | —rgba(255, 255, 255, 0.25) |
|
| text-disabled | —rgba(22, 22, 22, 0.25) | —rgba(22, 22, 22, 0.25) | —rgba(244, 244, 244, 0.25) | —rgba(244, 244, 244, 0.25) |
|
| link-primary | blue-60#0f62fe | blue-60#0f62fe | blue-40#78a9ff | blue-40#78a9ff |
|
| link-primary-hover | blue-70#0043ce | blue-70#0043ce | blue-30#a6c8ff | blue-30#a6c8ff |
|
| link-secondary | blue-70#0043ce | blue-70#0043ce | blue-30#a6c8ff | blue-30#a6c8ff |
|
| link-visited | purple-60#8a3ffc | purple-60#8a3ffc | purple-40#be95ff | purple-40#be95ff |
|
| link-inverse | blue-40#78a9ff | blue-40#78a9ff | blue-60#0f62fe | blue-60#0f62fe |
|
| link-inverse-active | gray-10#f4f4f4 | gray-10#f4f4f4 | gray-100#161616 | gray-100#161616 |
|
| link-inverse-hover | blue-30#a6c8ff | blue-30#a6c8ff | blue-70#0043ce | blue-70#0043ce |
|
| icon-primary | gray-100#161616 | gray-100#161616 | gray-10#f4f4f4 | gray-10#f4f4f4 |
|
| icon-secondary | gray-70#525252 | gray-70#525252 | gray-30#c6c6c6 | gray-30#c6c6c6 |
|
| icon-inverse | white-0#ffffff | white-0#ffffff | gray-100#161616 | gray-100#161616 |
|
| icon-on-color | white-0#ffffff | white-0#ffffff | white-0#ffffff | white-0#ffffff |
|
| icon-on-color-disabled | gray-50#8d8d8d | gray-50#8d8d8d | —rgba(255, 255, 255, 0.25) | —rgba(255, 255, 255, 0.25) |
|
| icon-disabled | —rgba(22, 22, 22, 0.25) | —rgba(22, 22, 22, 0.25) | —rgba(244, 244, 244, 0.25) | —rgba(244, 244, 244, 0.25) |
|
| icon-interactive | blue-60#0f62fe | blue-60#0f62fe | white-0#ffffff | white-0#ffffff |
|
| support-error | red-60#da1e28 | red-60#da1e28 | red-40#ff8389 | red-50#fa4d56 |
|
| support-success | green-50#24a148 | green-50#24a148 | green-40#42be65 | green-40#42be65 |
|
| support-warning | yellow-30#f1c21b | yellow-30#f1c21b | yellow-30#f1c21b | yellow-30#f1c21b |
|
| support-info | blue-70#0043ce | blue-70#0043ce | blue-50#4589ff | blue-50#4589ff |
|
| support-error-inverse | red-50#fa4d56 | red-50#fa4d56 | red-60#da1e28 | red-60#da1e28 |
|
| support-success-inverse | green-40#42be65 | green-40#42be65 | green-50#24a148 | green-50#24a148 |
|
| support-warning-inverse | yellow-30#f1c21b | yellow-30#f1c21b | yellow-30#f1c21b | yellow-30#f1c21b |
|
| support-info-inverse | blue-50#4589ff | blue-50#4589ff | blue-70#0043ce | blue-70#0043ce |
|
| support-caution-major | orange-40#ff832b | orange-40#ff832b | orange-40#ff832b | orange-40#ff832b |
|
| support-caution-minor | yellow-30#f1c21b | yellow-30#f1c21b | yellow-30#f1c21b | yellow-30#f1c21b |
|
| support-caution-undefined | purple-60#8a3ffc | purple-60#8a3ffc | purple-50#a56eff | purple-50#a56eff |
|
| slug-background | gray-70#525252 | gray-70#525252 | gray-30#c6c6c6 | gray-30#c6c6c6 |
|
| slug-gradient | —#161616 linear-gradient(135deg, #a8a8a8 0%, rgba(#ffffff, 0) 100%) | —#161616 linear-gradient(135deg, #a8a8a8 0%, rgba(#ffffff, 0) 100%) | —#8d8d8d linear-gradient(135deg, #f4f4f4 0%, rgba(#ffffff, 0) 100%) | —#8d8d8d linear-gradient(135deg, #f4f4f4 0%, rgba(#ffffff, 0) 100%) |
|
| slug-background-hover | gray-60#6f6f6f | gray-60#6f6f6f | gray-20#e0e0e0 | gray-20#e0e0e0 |
|
| slug-gradient-hover | —#161616 linear-gradient(135deg, #d1d1d1 0%, rgba(#ffffff, 0) 100%) | —#161616 linear-gradient(135deg, #d1d1d1 0%, rgba(#ffffff, 0) 100%) | —#a8a8a8 linear-gradient(135deg, #ffffff 0%, rgba(#ffffff, 0) 100%) | —#a8a8a8 linear-gradient(135deg, #ffffff 0%, rgba(#ffffff, 0) 100%) |
|
| slug-hollow-hover | gray-hover-80#474747 | gray-hover-80#474747 | gray-hover-30#b5b5b5 | gray-hover-30#b5b5b5 |
|
| slug-callout-gradient-top | —rgba(244, 244, 244, 0.85) | —rgba(244, 244, 244, 0.85) | —rgba(22, 22, 22, 0.85) | —rgba(22, 22, 22, 0.85) |
|
| slug-callout-gradient-bottom | —rgba(224, 224, 224, 0.85) | —rgba(224, 224, 224, 0.85) | —rgba(38, 38, 38, 0.85) | —rgba(38, 38, 38, 0.85) |
|
| slug-callout-aura-start | —rgba(237, 245, 255, 0.6) | —rgba(237, 245, 255, 0.6) | —rgba(208, 226, 255, 0.2) | —rgba(208, 226, 255, 0.2) |
|
| slug-callout-aura-end | —rgba(255, 255, 255, 0) | —rgba(255, 255, 255, 0) | —rgba(22, 22, 22, 0) | —rgba(22, 22, 22, 0) |
|
| ai-gradient-start-01 | —rgba(242, 244, 248, 0.5) | —rgba(242, 244, 248, 0.5) | —rgba(208, 226, 255, 0.2) | —rgba(208, 226, 255, 0.2) |
|
| ai-gradient-start-02 | —rgba(237, 245, 255, 0.5) | —rgba(237, 245, 255, 0.5) | —transparent | —transparent |
|
| ai-gradient-end | —rgba(255, 255, 255, 0) | —rgba(255, 255, 255, 0) | —rgba(38, 38, 38, 0) | —rgba(38, 38, 38, 0) |
|
| highlight | blue-20#d0e2ff | blue-20#d0e2ff | blue-70#0043ce | blue-80#002d9c | - |
| overlay | —rgba(22, 22, 22, 0.5) | —rgba(22, 22, 22, 0.5) | —rgba(0, 0, 0, 0.65) | —rgba(0, 0, 0, 0.65) |
|
| toggle-off | gray-50#8d8d8d | gray-50#8d8d8d | gray-50#8d8d8d | gray-60#6f6f6f | - |
| shadow | —rgba(0, 0, 0, 0.3) | —rgba(0, 0, 0, 0.3) | —rgba(0, 0, 0, 0.8) | —rgba(0, 0, 0, 0.8) | - |
| focus | blue-60#0f62fe | blue-60#0f62fe | white-0#ffffff | white-0#ffffff |
|
| focus-inset | white-0#ffffff | white-0#ffffff | gray-100#161616 | gray-100#161616 |
|
| focus-inverse | white-0#ffffff | white-0#ffffff | blue-60#0f62fe | blue-60#0f62fe |
|
| skeleton-background | gray-hover-10#e8e8e8 | gray-hover-10#e8e8e8 | gray-hover-90#333333 | gray-hover-100#292929 |
|
| skeleton-element | gray-30#c6c6c6 | gray-30#c6c6c6 | gray-70#525252 | gray-80#393939 |
|