Contextual Colors
Surface Colors
surface.light
.cur-bg-surface-light
var(--cur-color-surface-light)
#f6f5e9
surface.light.hover
.cur-bg-surface-light-hover
var(--cur-color-interactive-states-surface-hover-light)
#e0dfd4
surface.light.selected
.cur-bg-surface-light-selected
var(--cur-color-interactive-states-surface-selected-light)
#afaea5
surface.white
.cur-bg-surface-white
var(--cur-color-surface-white)
#ffffff
surface.white.hover
.cur-bg-surface-white-hover
var(--cur-color-interactive-states-surface-hover-white)
#f2f2f2
surface.white.selected
.cur-bg-surface-white-selected
var(--cur-color-interactive-states-surface-selected-white)
#ececec
surface.dark-bold
.cur-bg-surface-dark-bold
var(--cur-color-surface-dark-bold)
#1d1d44
surface.dark-bold.hover
.cur-bg-surface-dark-bold-hover
var(--cur-color-interactive-states-surface-hover-dark-bold)
#4a4a69
surface.dark-bold.selected
.cur-bg-surface-dark-bold-selected
var(--cur-color-interactive-states-surface-selected-dark-bold)
#686882
surface.brand-bold
.cur-bg-surface-brand-bold
var(--cur-color-surface-brand-bold)
#6f5cff
surface.brand-bold.hover
.cur-bg-surface-brand-bold-hover
var(--cur-color-interactive-states-surface-hover-brand-bold)
#6554e8
surface.brand-bold.selected
.cur-bg-surface-brand-bold-selected
var(--cur-color-interactive-states-surface-selected-brand-bold)
#3d338c
surface.brand-light
.cur-bg-surface-brand-light
var(--cur-color-surface-brand-light)
#9ca9ff
surface.brand-light.hover
.cur-bg-surface-brand-light-hover
var(--cur-color-interactive-states-surface-hover-brand-light)
#8e9ae8
surface.brand-light.selected
.cur-bg-surface-brand-light-selected
var(--cur-color-interactive-states-surface-selected-brand-light)
#6f78b5
surface.brand-lightest
.cur-bg-surface-brand-lightest
var(--cur-color-surface-brand-lightest)
#d2d9ff
surface.brand-lightest.hover
.cur-bg-surface-brand-lightest-hover
var(--cur-color-interactive-states-surface-hover-brand-lightest)
#bfc5e8
surface.brand-lightest.selected
.cur-bg-surface-brand-lightest-selected
var(--cur-color-interactive-states-surface-selected-brand-lightest)
#959ab5
surface.orange-accent
.cur-bg-surface-orange-accent
var(--cur-color-surface-orange-accent)
#ff824f
Surface Status Colors
surface.critical
.cur-bg-surface-critical
var(--cur-color-surface-critical)
#faeaea
surface.critical.hover
.cur-bg-surface-critical-hover
var(--cur-color-interactive-states-surface-hover-critical)
#f0bcbc
surface.critical.selected
.cur-bg-surface-critical-selected
var(--cur-color-interactive-states-surface-selected-critical)
#e99c9c
surface.success
.cur-bg-surface-success
var(--cur-color-surface-success)
#e7f2e6
surface.success.hover
.cur-bg-surface-success-hover
var(--cur-color-interactive-states-surface-hover-success)
#b6d5b0
surface.success.selected
.cur-bg-surface-success-selected
var(--cur-color-interactive-states-surface-selected-success)
#92c18a
surface.warning
.cur-bg-surface-warning
var(--cur-color-surface-warning)
#fff3ed
surface.warning.hover
.cur-bg-surface-warning-hover
var(--cur-color-interactive-states-surface-hover-warning)
#f7d1af
surface.warning.selected
.cur-bg-surface-warning-selected
var(--cur-color-interactive-states-surface-selected-warning)
#f19f70
surface.highlight
.cur-bg-surface-highlight
var(--cur-color-surface-highlight)
#f1efff
surface.highlight.hover
.cur-bg-surface-highlight-hover
var(--cur-color-interactive-states-surface-hover-highlight)
#d2ccff
surface.highlight.selected
.cur-bg-surface-highlight-selected
var(--cur-color-interactive-states-surface-selected-highlight)
#bdb4ff
surface.critical-bold
.cur-bg-surface-critical-bold
var(--cur-color-surface-critical-bold)
#cf2828
surface.critical-bold.hover
.cur-bg-surface-critical-bold-hover
var(--cur-color-interactive-states-surface-hover-critical-bold)
#bc2424
surface.critical-bold.selected
.cur-bg-surface-critical-bold-selected
var(--cur-color-interactive-states-surface-selected-critical-bold)
#931c1c
surface.success-bold
.cur-bg-surface-success-bold
var(--cur-color-surface-success-bold)
#127801
surface.success-bold.hover
.cur-bg-surface-success-bold-hover
var(--cur-color-interactive-states-surface-hover-success-bold)
#106d01
surface.success-bold.selected
.cur-bg-surface-success-bold-selected
var(--cur-color-interactive-states-surface-selected-success-bold)
#0d5501
surface.disabled
.cur-bg-surface-disabled
var(--cur-color-surface-disabled)
#f2f2f2
Text Colors
text.default
.cur-text
var(--cur-color-text-default)
#1d1d44
text.subtle
.cur-text-subtle
var(--cur-color-text-subtle)
#4a4a69
text.brand
.cur-text-brand
var(--cur-color-text-brand)
#6f5cff
text.inverse
.cur-text-inverse
var(--cur-color-text-inverse)
#ffffff
Text Status Colors
text.critical
.cur-text-critical
var(--cur-color-text-critical)
#931c1c
text.warning
.cur-text-warning
var(--cur-color-text-warning)
#8c482b
text.success
.cur-text-success
var(--cur-color-text-success)
#0d5501
text.highlight
.cur-text-highlight
var(--cur-color-text-highlight)
#4f41b5
text.disabled
.cur-text-disabled
var(--cur-color-text-disabled)
#b9b9c5
Border Colors
border.dark
.cur-border-dark
var(--cur-color-border-dark)
#1d1d44
border.dark.hover
.cur-border-dark-hover
var(--cur-color-interactive-states-border-hover-dark)
#4a4a69
border.dark.selected
.cur-border-dark-hover
var(--cur-color-interactive-states-border-selected-dark)
#686882
border.subtle
.cur-border-subtle
var(--cur-color-border-subtle)
#878780
border.subtle.hover
.cur-border-subtle-hover
var(--cur-color-interactive-states-border-hover-subtle)
#676762
border.subtle.selected
.cur-border-subtle-hover
var(--cur-color-interactive-states-border-selected-subtle)
#676762
border.brand
.cur-border-brand
var(--cur-color-border-brand)
#6f5cff
border.brand.hover
.cur-border-brand-hover
var(--cur-color-interactive-states-border-hover-brand)
#4f41b5
border.brand.selected
.cur-border-brand-hover
var(--cur-color-interactive-states-border-selected-brand)
#3d338c
border.brand-light
.cur-border-brand-light
var(--cur-color-border-brand-light)
#9ca9ff
border.inverse
.cur-border-inverse
var(--cur-color-border-inverse)
#ffffff
Border Status Colors
border.critical
.cur-border-critical
var(--cur-color-border-critical)
#cf2828
border.critical.hover
.cur-border-critical-hover
var(--cur-color-interactive-states-border-hover-critical)
#bc2424
border.critical.selected
.cur-border-critical-hover
var(--cur-color-interactive-states-border-selected-critical)
#931c1c
border.success
.cur-border-success
var(--cur-color-border-success)
#127801
border.success.hover
.cur-border-success-hover
var(--cur-color-interactive-states-border-hover-success)
#106d01
border.success.selected
.cur-border-success-hover
var(--cur-color-interactive-states-border-selected-success)
#0d5501
border.warning
.cur-border-warning
var(--cur-color-border-warning)
#b55c38
border.warning.hover
.cur-border-warning-hover
var(--cur-color-interactive-states-border-hover-warning)
#8c482b
border.warning.selected
.cur-border-warning-hover
var(--cur-color-interactive-states-border-selected-warning)
#6b3721
border.highlight
.cur-border-highlight
var(--cur-color-border-highlight)
#6f5cff
border.highlight.hover
.cur-border-highlight-hover
var(--cur-color-interactive-states-border-hover-highlight)
#4f41b5
border.highlight.selected
.cur-border-highlight-hover
var(--cur-color-interactive-states-border-selected-highlight)
#3d338c
border.disabled
.cur-border-disabled
var(--cur-color-border-disabled)
#e4e4e4
Icon Colors
icon.dark
.cur-bg-icon-dark
var(--cur-color-icon-dark)
#1d1d44
icon.brand
.cur-bg-icon-brand
var(--cur-color-icon-brand)
#6c5df6
icon.inverse
.cur-bg-icon-inverse
var(--cur-color-icon-inverse)
#ffffff
icon.orange-accent
.cur-bg-icon-orange-accent
var(--cur-color-icon-orange-accent)
#ff824f
Icon Status Colors
icon.critical
.cur-bg-icon-critical
var(--cur-color-icon-critical)
#cf2828
icon.success
.cur-bg-icon-success
var(--cur-color-icon-success)
#158a02
icon.warning
.cur-bg-icon-warning
var(--cur-color-icon-warning)
#b55c38
icon.highlight
.cur-bg-icon-highlight
var(--cur-color-icon-highlight)
#6f5cff
icon.disabled
.cur-bg-icon-disabled
var(--cur-color-icon-disabled)
#b9b9c5