| Token | White | g10 | g90 | g100 | Properties |
|---|---|---|---|---|---|
| background | white-0#ffffff | gray-10#f4f4f4 | gray-90#262626 | gray-90#161616 |
|
| background-active | gray-30#c6c6c6 | gray-30#c6c6c6 | gray-80#393939 | gray-80#393939 |
|
| background-selected | gray-20#e0e0e0 | gray-20#e0e0e0 | gray-80#393939 | gray-80#262626 |
|
| background-selected-hover | gray-hover-20#d1d1d1 | gray-hover-20#d1d1d1 | gray-hover-80#474747 | gray-hover-80#333333 |
|
| background-hover | white-hover#e8e8e8 | gray-hover-10#e8e8e8 | gray-hover-90#333333 | gray-hover-90#292929 |
|
| 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-80#262626 |
|
| layer-active-01 | gray-30#c6c6c6 | gray-30#c6c6c6 | gray-60#6f6f6f | gray-60#525252 |
|
| layer-hover-01 | white-hover#e8e8e8 | gray-hover-10#e8e8e8 | gray-hover-80#474747 | gray-hover-80#333333 |
|
| layer-selected-01 | gray-20#e0e0e0 | gray-20#e0e0e0 | gray-70#525252 | gray-70#393939 |
|
| layer-selected-hover-01 | gray-hover-20#d1d1d1 | gray-hover-20#d1d1d1 | gray-hover-70#636363 | gray-hover-70#474747 |
|
| layer-02 | white-0#ffffff | gray-10#f4f4f4 | gray-70#525252 | gray-70#393939 |
|
| layer-active-02 | gray-30#c6c6c6 | gray-30#c6c6c6 | gray-50#8d8d8d | gray-50#6f6f6f |
|
| layer-hover-02 | white-hover#e8e8e8 | gray-hover-10#e8e8e8 | gray-hover-70#636363 | gray-hover-70#474747 |
|
| layer-selected-02 | gray-20#e0e0e0 | gray-20#e0e0e0 | gray-60#6f6f6f | gray-60#525252 |
|
| layer-selected-hover-02 | gray-hover-20#d1d1d1 | gray-hover-20#d1d1d1 | gray-hover-60#5e5e5e | gray-hover-60#636363 |
|
| layer-03 | gray-10#f4f4f4 | white-0#ffffff | gray-60#6f6f6f | gray-60#525252 |
|
| layer-active-03 | gray-30#c6c6c6 | gray-30#c6c6c6 | gray-80#393939 | gray-80#8d8d8d |
|
| layer-hover-03 | white-hover#e8e8e8 | gray-hover-10#e8e8e8 | gray-hover-60#5e5e5e | gray-hover-60#636363 |
|
| layer-selected-03 | gray-20#e0e0e0 | gray-20#e0e0e0 | gray-50#8d8d8d | gray-50#6f6f6f |
|
| layer-selected-hover-03 | gray-hover-20#d1d1d1 | gray-hover-20#d1d1d1 | gray-hover-50#7a7a7a | gray-hover-50#5e5e5e |
|
| layer-disabled | gray-10#f4f4f4 | white-0#ffffff | gray-80#393939 | gray-80#262626 |
|
| 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-70#393939 |
|
| layer-accent-active-01 | gray-40#a8a8a8 | gray-40#a8a8a8 | gray-50#8d8d8d | gray-50#6f6f6f |
|
| layer-accent-hover-01 | gray-hover-20#d1d1d1 | gray-hover-20#d1d1d1 | gray-hover-70#636363 | gray-hover-70#474747 |
|
| layer-accent-02 | gray-20#e0e0e0 | gray-20#e0e0e0 | gray-60#6f6f6f | gray-60#525252 |
|
| layer-accent-active-02 | gray-40#a8a8a8 | gray-40#a8a8a8 | gray-80#393939 | gray-80#8d8d8d |
|
| layer-accent-hover-02 | gray-hover-20#d1d1d1 | gray-hover-20#d1d1d1 | —#404040 | —#636363 |
|
| layer-accent-03 | gray-20#e0e0e0 | gray-20#e0e0e0 | gray-50#8d8d8d | gray-50#6f6f6f |
|
| layer-accent-active-03 | gray-40#a8a8a8 | gray-40#a8a8a8 | gray-70#525252 | gray-70#393939 |
|
| layer-accent-hover-03 | gray-hover-20#d1d1d1 | gray-hover-20#d1d1d1 | gray-hover-50#7a7a7a | gray-hover-50#5e5e5e |
|
| field-01 | gray-10#f4f4f4 | white-0#ffffff | gray-80#393939 | gray-80#262626 |
|
| field-hover-01 | white-hover#e8e8e8 | gray-hover-10#e8e8e8 | gray-hover-80#474747 | gray-hover-80#333333 |
|
| field-02 | white-0#ffffff | gray-10#f4f4f4 | gray-70#525252 | gray-70#393939 |
|
| field-hover-02 | white-hover#e8e8e8 | gray-hover-10#e8e8e8 | gray-hover-70#636363 | gray-hover-70#474747 |
|
| field-03 | gray-10#f4f4f4 | white-0#ffffff | gray-60#6f6f6f | gray-60#525252 |
|
| field-hover-03 | white-hover#e8e8e8 | gray-hover-10#e8e8e8 | gray-hover-60#5e5e5e | gray-hover-60#636363 |
|
| field-disabled | gray-10#f4f4f4 | white-0#ffffff | gray-80#393939 | gray-80#393939 |
|
| interactive | blue-60#0f62fe | blue-60#0f62fe | blue-50#4589ff | blue-50#4589ff |
|
| border-subtle-00 | gray-20#e0e0e0 | gray-20#e0e0e0 | gray-70#525252 | gray-70#393939 |
|
| border-subtle-01 | gray-20#e0e0e0 | gray-20#e0e0e0 | gray-70#525252 | gray-70#393939 |
|
| border-subtle-selected-01 | gray-30#c6c6c6 | gray-30#c6c6c6 | gray-60#6f6f6f | gray-60#525252 |
|
| border-subtle-02 | gray-20#e0e0e0 | gray-20#e0e0e0 | gray-60#6f6f6f | gray-60#525252 |
|
| border-subtle-selected-02 | gray-30#c6c6c6 | gray-30#c6c6c6 | gray-50#8d8d8d | gray-50#6f6f6f |
|
| border-subtle-03 | gray-20#e0e0e0 | gray-20#e0e0e0 | gray-50#8d8d8d | gray-50#6f6f6f |
|
| border-subtle-selected-03 | gray-30#c6c6c6 | gray-30#c6c6c6 | gray-40#a8a8a8 | gray-40#8d8d8d |
|
| border-strong-01 | gray-50#8d8d8d | gray-50#8d8d8d | gray-50#8d8d8d | gray-50#6f6f6f |
|
| border-strong-02 | gray-50#8d8d8d | gray-50#8d8d8d | gray-40#a8a8a8 | gray-40#8d8d8d |
|
| border-strong-03 | gray-50#8d8d8d | gray-50#8d8d8d | gray-30#c6c6c6 | gray-30#a8a8a8 |
|
| 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-10#f4f4f4 | white-0#ffffff | gray-80#393939 | gray-80#262626 |
|
| 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 | gray-40#a8a8a8 | gray-40#a8a8a8 | gray-60#6f6f6f | gray-60#6f6f6f |
|
| text-helper | gray-60#6f6f6f | gray-60#6f6f6f | gray-50#8d8d8d | gray-50#8d8d8d |
|
| text-error | red-60#da1e28 | red-60#da1e28 | red-30#ffb3b8 | red-30#ffb3b8 |
|
| 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 | gray-40#a8a8a8 | gray-40#a8a8a8 |
|
| text-disabled | gray-30#c6c6c6 | gray-30#c6c6c6 | gray-60#6f6f6f | gray-60#525252 |
|
| 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-inverse | blue-40#78a9ff | blue-40#78a9ff | blue-60#0f62fe | blue-60#0f62fe |
|
| link-visited | purple-60#8a3ffc | purple-60#8a3ffc | purple-40#be95ff | purple-40#be95ff |
|
| 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 | gray-40#a8a8a8 | gray-40#a8a8a8 |
|
| icon-disabled | gray-30#c6c6c6 | gray-30#c6c6c6 | gray-60#6f6f6f | gray-60#525252 |
|
| support-error | red-60#da1e28 | red-60#da1e28 | red-40#ff8389 | red-40#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-60#0f62fe | blue-60#0f62fe |
|
| 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 |
|
| highlight | blue-20#d0e2ff | blue-20#d0e2ff | blue-70#0043ce | blue-70#d0e2ff | - |
| overlay | —rgba(22, 22, 22, 0.5) | —rgba(22, 22, 22, 0.5) | —rgba(22, 22, 22, 0.7) | —rgba(22, 22, 22, 0.5) |
|
| toggle-off | gray-50#8d8d8d | gray-50#8d8d8d | gray-50#8d8d8d | gray-50#8d8d8d | - |
| 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 | white-hover#e8e8e8 | gray-hover-10#e8e8e8 | gray-hover-90#333333 | gray-hover-90#292929 |
|
| skeleton-element | gray-30#c6c6c6 | gray-30#c6c6c6 | gray-70#525252 | gray-70#393939 |
|