| 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-60#6f6f6f | gray-70#525252 |
|
| border-subtle-selected-01 | gray-30#c6c6c6 | gray-30#c6c6c6 | gray-50#8d8d8d | gray-60#6f6f6f |
|
| border-subtle-02 | gray-20#e0e0e0 | gray-30#c6c6c6 | gray-50#8d8d8d | gray-60#6f6f6f |
|
| border-subtle-selected-02 | gray-30#c6c6c6 | gray-30#c6c6c6 | gray-40#a8a8a8 | gray-50#8d8d8d |
|
| 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-inverse-visited | purple-40#be95ff | purple-40#be95ff | purple-60#8a3ffc | purple-60#8a3ffc |
|
| 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 |
|
| ai-popover-background | white-0#ffffff | white-0#ffffff | gray-100#161616 | gray-100#161616 |
|
| ai-popover-shadow-outer-01 | —rgba(0, 67, 206, 0.06) | —rgba(0, 67, 206, 0.06) | —rgba(0, 0, 0, 0.12) | —rgba(0, 0, 0, 0.12) |
|
| ai-popover-shadow-outer-02 | —rgba(0, 0, 0, 0.04) | —rgba(0, 0, 0, 0.04) | —rgba(0, 0, 0, 0.08) | —rgba(0, 0, 0, 0.08) |
|
| ai-inner-shadow | —rgba(69, 137, 255, 0.1) | —rgba(69, 137, 255, 0.1) | —rgba(69, 137, 255, 0.16) | —rgba(69, 137, 255, 0.16) |
|
| ai-aura-start-sm | —rgba(69, 137, 255, 0.16) | —rgba(69, 137, 255, 0.16) | —rgba(69, 137, 255, 0.16) | —rgba(69, 137, 255, 0.16) |
|
| ai-aura-start | —rgba(69, 137, 255, 0.1) | —rgba(69, 137, 255, 0.1) | —rgba(69, 137, 255, 0.1) | —rgba(69, 137, 255, 0.1) |
|
| ai-aura-end | —rgba(255, 255, 255, 0) | —rgba(255, 255, 255, 0) | —rgba(0, 0, 0, 0) | —rgba(0, 0, 0, 0) |
|
| ai-aura-hover-background | blue-10#edf5ff | blue-10#edf5ff | gray-hover-80#474747 | gray-hover-90#333333 |
|
| ai-aura-hover-start | —rgba(69, 137, 255, 0.32) | —rgba(69, 137, 255, 0.32) | —rgba(69, 137, 255, 0.4) | —rgba(69, 137, 255, 0.4) |
|
| ai-aura-hover-end | —rgba(255, 255, 255, 0) | —rgba(255, 255, 255, 0) | —rgba(0, 0, 0, 0) | —rgba(0, 0, 0, 0) |
|
| ai-border-strong | blue-50#4589ff | blue-50#4589ff | blue-40#78a9ff | blue-40#78a9ff |
|
| ai-border-start | —rgba(166, 200, 255, 0.64) | —rgba(166, 200, 255, 0.64) | —rgba(166, 200, 255, 0.36) | —rgba(166, 200, 255, 0.36) |
|
| ai-border-end | blue-40#78a9ff | blue-40#78a9ff | blue-50#4589ff | blue-50#4589ff |
|
| ai-drop-shadow | —rgba(15, 98, 254, 0.1) | —rgba(15, 98, 254, 0.1) | —rgba(0, 0, 0, 0.28) | —rgba(0, 0, 0, 0.28) |
|
| ai-skeleton-background | blue-20#d0e2ff | blue-20#d0e2ff | —rgba(120, 169, 255, 0.5) | —rgba(120, 169, 255, 0.5) |
|
| ai-skeleton-element-background | blue-50#4589ff | blue-50#4589ff | —rgba(120, 169, 255, 0.3) | —rgba(120, 169, 255, 0.3) |
|
| ai-overlay | —rgba(0, 17, 65, 0.5) | —rgba(0, 17, 65, 0.5) | —rgba(0, 0, 0, 0.5) | —rgba(0, 0, 0, 0.5) |
|
| ai-popover-caret-center | —#A0C3FF | —#A0C3FF | —#4870B5 | —#4870B5 |
|
| ai-popover-caret-bottom | blue-40#78a9ff | blue-40#78a9ff | blue-50#4589ff | blue-50#4589ff |
|
| ai-popover-caret-bottom-background | —#EAF1FF | —#EAF1FF | —#202D45 | —#202D45 |
|
| ai-popover-caret-bottom-background-actions | —#E9EFFA | —#E9EFFA | —#1E283A | —#1E283A |
|
| chat-prompt-background | white-0#ffffff | white-0#ffffff | gray-100#161616 | gray-100#161616 |
|
| chat-prompt-border-start | gray-10#f4f4f4 | gray-10#f4f4f4 | gray-90#262626 | gray-90#262626 |
|
| chat-prompt-border-end | —rgba(244, 244, 244, 0) | —rgba(244, 244, 244, 0) | —rgba(38, 38, 38, 0) | —rgba(38, 38, 38, 0) |
|
| chat-bubble-user | gray-20#e0e0e0 | gray-20#e0e0e0 | gray-80#393939 | gray-80#393939 |
|
| chat-bubble-agent | white-0#ffffff | white-0#ffffff | gray-90#262626 | gray-90#262626 |
|
| chat-bubble-border | gray-20#e0e0e0 | gray-20#e0e0e0 | gray-70#525252 | gray-70#525252 |
|
| chat-avatar-bot | gray-60#6f6f6f | gray-60#6f6f6f | gray-50#8d8d8d | gray-50#8d8d8d |
|
| chat-avatar-agent | gray-80#393939 | gray-80#393939 | gray-30#c6c6c6 | gray-30#c6c6c6 |
|
| chat-avatar-user | blue-60#0f62fe | blue-60#0f62fe | blue-50#4589ff | blue-50#4589ff |
|
| chat-shell-background | white-0#ffffff | white-0#ffffff | gray-90#262626 | gray-90#262626 |
|
| chat-header-background | white-0#ffffff | white-0#ffffff | gray-90#262626 | gray-90#262626 |
|
| chat-button | blue-60#0f62fe | blue-60#0f62fe | blue-40#78a9ff | blue-40#78a9ff |
|
| chat-button-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) |
|
| chat-button-text-hover | blue-70#0043ce | blue-70#0043ce | blue-30#a6c8ff | blue-30#a6c8ff |
|
| chat-button-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) |
|
| chat-button-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) |
|
| chat-button-text-selected | gray-70#525252 | gray-70#525252 | gray-30#c6c6c6 | gray-30#c6c6c6 |
|
| highlight | blue-20#d0e2ff | blue-20#d0e2ff | blue-80#002d9c | blue-90#001d6c | - |
| 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 |
|