Colors

Semantic color tokens for backgrounds, fills, text, and borders. Each token has a light and a dark value, and the values on this page are read from the theme, so they stay current.

Background

Surfaces from the page base up to the most raised layer, plus tinted backgrounds for status and accents.

bg-bg-base
Light
#ffffff
Dark
#121110
bg-bg-primary
Light
#ffffff
Dark
#171615
bg-bg-secondary
Light
#fafafa
Dark
#1e1d1c
bg-bg-tertiary
Light
#f5f5f5
Dark
#272625
bg-bg-quaternary
Light
#e8e8e8
Dark
#31302e
bg-bg-sidebar
Light
#fafafa
Dark
#121110
bg-bg-header
Light
color-mix(in srgb, #ffffff 70%, transparent)
Dark
color-mix(in srgb, #121110 70%, transparent)
bg-bg-overlay
Light
rgba(0, 0, 0, 0.03)
Dark
rgba(0, 0, 0, 0.03)
bg-bg-tooltip
Light
rgba(24, 24, 26, 0.9)
Dark
rgba(46, 45, 43, 0.9)
bg-bg-educational-tooltip
Light
#3b82f6
Dark
#3b82f6
bg-bg-transparent
Light
transparent
Dark
transparent
bg-bg-blue
Light
oklch(97% 0.014 254.604)
Dark
oklch(0.282 0.091 267.935 / 0.7)
bg-bg-purple
Light
oklch(97.7% 0.014 308.299)
Dark
oklch(0.291 0.149 302.717 / 0.5)
bg-bg-red
Light
oklch(97.1% 0.013 17.38)
Dark
oklch(0.258 0.092 26.042 / 0.7)
bg-bg-red-hover
Light
color-mix(in oklch, oklch(63.7% 0.237 25.331) 10%, transparent)
Dark
color-mix(in oklch, oklch(0.704 0.191 22.216) 10%, transparent)
bg-bg-green
Light
oklch(96.861% 0.02956 154.903)
Dark
oklch(0.266 0.065 152.934 / 0.7)
bg-bg-green-hover
Light
color-mix(in oklch, oklch(62.695% 0.18045 148.232) 10%, transparent)
Dark
color-mix(in oklch, oklch(0.792 0.209 151.711) 10%, transparent)
bg-bg-orange
Light
oklch(98% 0.016 73.684)
Dark
oklch(0.266 0.079 36.259 / 0.7)
bg-bg-orange-hover
Light
color-mix(in oklch, oklch(70.5% 0.213 47.604) 10%, transparent)
Dark
color-mix(in oklch, oklch(0.75 0.183 55.934) 10%, transparent)
bg-bg-amber
Light
oklch(98.7% 0.022 95.277)
Dark
oklch(0.279 0.077 45.635 / 0.7)
bg-bg-cyan
Light
oklch(97% 0.02 200)
Dark
oklch(0.28 0.08 200 / 0.7)
bg-bg-pink
Light
oklch(97.5% 0.018 0)
Dark
oklch(0.28 0.06 0 / 0.7)
--color-dot-grid
Light
#cccccc
Dark
#cccccc

Fill

Solid fills for controls, icons, and indicators.

fill-fill-primary
Light
#18181a
Dark
#f5f4f2
fill-fill-primary-hover
Light
#2c2c2e
Dark
#ecebe9
fill-fill-secondary
Light
#969696
Dark
#75736f
fill-fill-tertiary
Light
#d4d4d8
Dark
#5a5855
fill-fill-quaternary
Light
#e8e8e8
Dark
#232221
fill-fill-quinary
Light
#f0f0f0
Dark
#2b2a28
fill-fill-inverse
Light
#ffffff
Dark
#121110
fill-fill-green
Light
oklch(62.695% 0.18045 148.232)
Dark
oklch(0.792 0.209 151.711)
fill-fill-green-hover
Light
color-mix(in oklch, oklch(62.695% 0.18045 148.232) 10%, transparent)
Dark
color-mix(in oklch, oklch(0.792 0.209 151.711) 90%, #121110 10%)
fill-fill-red
Light
oklch(63.7% 0.237 25.331)
Dark
oklch(0.704 0.191 22.216)
fill-fill-red-hover
Light
color-mix(in oklch, oklch(63.7% 0.237 25.331) 90%, transparent)
Dark
color-mix(in oklch, oklch(0.704 0.191 22.216) 90%, #121110 10%)
fill-fill-blue
Light
oklch(62.3% 0.214 259.815)
Dark
oklch(0.707 0.165 254.624)
fill-fill-orange
Light
oklch(70.5% 0.213 47.604)
Dark
oklch(0.75 0.183 55.934)
fill-fill-orange-lightest
Light
oklch(98% 0.016 73.684)
Dark
oklch(0.266 0.079 36.259 / 0.7)
fill-fill-orange-dark
Light
oklch(47% 0.157 37.304)
Dark
oklch(0.75 0.183 55.934)
fill-fill-amber
Light
oklch(76.9% 0.188 70.08)
Dark
oklch(0.828 0.189 84.429)
fill-fill-yellow
Light
#f9ff57
Dark
#5e602b
fill-fill-cyan
Light
oklch(70% 0.14 200)
Dark
oklch(0.75 0.14 200)
fill-fill-pink
Light
oklch(74% 0.15 0)
Dark
oklch(0.8 0.12 0)

Control

Backgrounds for inputs, toggles, and selected states.

bg-control-bg
Light
#ffffff
Dark
#252423
bg-control-hover
Light
#f5f5f5
Dark
#31302e
bg-control-selected
Light
#f1f1f1
Dark
#383735
bg-control-primary
Light
#18181a
Dark
#f5f4f2
bg-control-primary-hover
Light
#2c2c2e
Dark
#ecebe9

Text

Use primary and secondary for almost all copy. Tertiary is for placeholders and very subdued metadata. Don't use quaternary in product UI.

text-text-primary
Light
#18181a
Dark
#ecebe9
text-text-secondary
Light
#787878
Dark
#aaa8a5
text-text-tertiary
Light
#969696
Dark
#898784
text-text-quaternary
Light
#b4b4b4
Dark
#676563
text-text-inverse
Light
#ffffff
Dark
#0f0e0d
text-text-white
Light
#ffffff
Dark
#ffffff
text-text-black
Light
#18181a
Dark
#18181a
text-text-green
Light
oklch(62.695% 0.18045 148.232)
Dark
oklch(0.792 0.209 151.711)
text-text-red
Light
oklch(63.7% 0.237 25.331)
Dark
oklch(0.704 0.191 22.216)
text-text-blue
Light
oklch(62.3% 0.214 259.815)
Dark
oklch(0.707 0.165 254.624)
text-text-purple
Light
oklch(62.7% 0.265 303.9)
Dark
oklch(0.714 0.203 305.504)
text-text-orange
Light
oklch(70.5% 0.213 47.604)
Dark
oklch(0.75 0.183 55.934)
text-text-yellow
Light
oklch(76.9% 0.188 70.08)
Dark
oklch(0.828 0.189 84.429)
text-text-amber
Light
oklch(76.9% 0.188 70.08)
Dark
oklch(0.828 0.189 84.429)
text-text-cyan
Light
oklch(70% 0.14 200)
Dark
oklch(0.75 0.14 200)
text-text-pink
Light
oklch(74% 0.15 0)
Dark
oklch(0.8 0.12 0)
text-text-tooltip
Light
#ffffff
Dark
#ecebe9
text-text-tooltip-secondary
Light
#b4b4b4
Dark
#b4b4b4

Border and stroke

border-border-gray
Light
#eeeeee
Dark
#2e2d2b
stroke-stroke-sunburst
Light
rgb(255, 255, 255)
Dark
rgba(255, 255, 255, 0.4)
stroke-stroke-sunburst-loading
Light
rgba(255, 255, 255, 0.8)
Dark
rgba(255, 255, 255, 0.15)

Palette

The color scales behind the semantic tokens above. Prefer a semantic token; reach for these only when none fits.

bg-red-base
Light
oklch(63.7% 0.237 25.331)
Dark
oklch(0.704 0.191 22.216)
bg-red-border
Light
oklch(94.5% 0.027 17.633)
Dark
oklch(0.396 0.141 25.723 / 0.2)
bg-red-muted-fill
Light
oklch(97.1% 0.013 17.38)
Dark
oklch(0.258 0.092 26.042 / 0.7)
bg-red-emphasis
Light
oklch(44.4% 0.177 26.899)
Dark
color-mix(in oklch, oklch(0.704 0.191 22.216) 90%, oklch(1 0 0))
bg-blue-base
Light
oklch(62.3% 0.214 259.815)
Dark
oklch(0.707 0.165 254.624)
bg-blue-border
Light
oklch(94.2% 0.028 255.34)
Dark
oklch(36% 0.14 260)
bg-blue-muted-fill
Light
oklch(97% 0.014 254.604)
Dark
oklch(0.282 0.091 267.935 / 0.7)
bg-blue-emphasis
Light
oklch(41.214% 0.17348 265.122)
Dark
color-mix(in oklch, oklch(0.707 0.165 254.624) 90%, oklch(1 0 0))
bg-green-base
Light
oklch(62.695% 0.18045 148.232)
Dark
oklch(0.792 0.209 151.711)
bg-green-border
Light
oklch(92.774% 0.06064 156.846)
Dark
oklch(0.393 0.095 152.535 / 0.4)
bg-green-muted-fill
Light
oklch(96.861% 0.02956 154.903)
Dark
oklch(0.266 0.065 152.934 / 0.7)
bg-green-emphasis
Light
oklch(39.3% 0.095 152.535)
Dark
color-mix(in oklch, oklch(0.792 0.209 151.711) 90%, oklch(1 0 0))
bg-amber-base
Light
oklch(76.9% 0.188 70.08)
Dark
oklch(0.828 0.189 84.429)
bg-amber-border
Light
oklch(94.011% 0.05289 96.769)
Dark
oklch(0.414 0.112 45.904 / 0.2)
bg-amber-muted-fill
Light
oklch(98.7% 0.022 95.277)
Dark
oklch(0.279 0.077 45.635 / 0.7)
bg-amber-emphasis
Light
oklch(47.3% 0.137 46.201)
Dark
color-mix(in oklch, oklch(0.828 0.189 84.429) 90%, oklch(1 0 0))
bg-purple-base
Light
oklch(62.7% 0.265 303.9)
Dark
oklch(0.714 0.203 305.504)
bg-purple-border
Light
oklch(93.565% 0.0325 311.625)
Dark
oklch(0.381 0.176 304.987 / 0.4)
bg-purple-muted-fill
Light
oklch(97.7% 0.014 308.299)
Dark
oklch(0.291 0.149 302.717 / 0.5)
bg-purple-emphasis
Light
oklch(38.1% 0.176 304.987)
Dark
color-mix(in oklch, oklch(0.714 0.203 305.504) 90%, oklch(1 0 0))
bg-orange-base
Light
oklch(70.5% 0.213 47.604)
Dark
oklch(0.75 0.183 55.934)
bg-orange-border
Light
oklch(92.766% 0.03899 74.753)
Dark
oklch(0.408 0.123 38.172 / 0.2)
bg-orange-muted-fill
Light
oklch(98% 0.016 73.684)
Dark
oklch(0.266 0.079 36.259 / 0.7)
bg-orange-emphasis
Light
oklch(47% 0.157 37.304)
Dark
color-mix(in oklch, oklch(0.75 0.183 55.934) 90%, oklch(1 0 0))
bg-cyan-base
Light
oklch(70% 0.14 200)
Dark
oklch(0.75 0.14 200)
bg-cyan-border
Light
oklch(92% 0.04 200)
Dark
oklch(0.4 0.1 200 / 0.3)
bg-cyan-muted-fill
Light
oklch(97% 0.02 200)
Dark
oklch(0.28 0.08 200 / 0.7)
bg-cyan-emphasis
Light
oklch(45% 0.12 200)
Dark
color-mix(in oklch, oklch(0.75 0.14 200) 90%, oklch(1 0 0))
bg-pink-base
Light
oklch(74% 0.15 0)
Dark
oklch(0.8 0.12 0)
bg-pink-muted-fill
Light
oklch(97.5% 0.018 0)
Dark
oklch(0.28 0.06 0 / 0.7)

Chart

CSS variables only; use them with var().

--color-chart-other
Light
#888888
Dark
#5b5956

Shadows

RegularHoverFocusBorderless
shadow-low
shadow-low-hover
shadow-low-focus
shadow-low-borderless
shadow-medium
shadow-medium-hover
shadow-medium-focus
shadow-medium-borderless
shadow-high
No interaction states
shadow-high-borderless

Each regular shadow includes its border. Do not add a separate neutral border or ring. Low and medium support hover and focus: hover adds a solid edge, while focus retains the depth and adds a 3px halo. High has no interaction states. Borderless keeps only the depth. Apply states explicitly, for example: shadow-low hover:shadow-low-hover focus-visible:shadow-low-focus. Use shadow-focus for the halo alone.

Shadow colors

Colors the shadow tokens are built from. CSS variables only; use them with var().

--color-shadow-ring-1
Light
rgba(0, 0, 0, 0.02)
Dark
rgba(0, 0, 0, 0)
--color-shadow-ring-2
Light
rgba(0, 0, 0, 0.05)
Dark
rgba(214, 213, 212, 0.12)
--color-shadow-stroke
Light
#ebebeb
Dark
#2c2b29
--color-shadow-1
Light
rgba(0, 0, 0, 0.02)
Dark
rgba(0, 0, 0, 0)
--color-shadow-2
Light
rgba(0, 0, 0, 0.05)
Dark
rgba(0, 0, 0, 0.1)
--color-shadow-red-1
Light
rgba(255, 95, 87, 0.08)
Dark
rgba(255, 95, 87, 0.15)
--color-shadow-red-2
Light
rgba(255, 95, 87, 0.12)
Dark
rgba(255, 95, 87, 0.25)
--color-shadow-red-3
Light
rgba(255, 95, 87, 0.2)
Dark
rgba(255, 95, 87, 0.3)

Workflow

Colors for the Agent Builder canvas.

bg-workflow-bg-base
Light
rgb(247, 247, 247)
Dark
rgb(18, 17, 16)
bg-workflow-fill-green
Light
rgb(78, 168, 82)
Dark
rgb(95, 207, 100)
bg-workflow-fill-green-faint
Light
#4ea8521a
Dark
#5fcf641a
bg-workflow-fill-blue
Light
rgb(72, 148, 238)
Dark
rgb(93, 171, 255)
bg-workflow-fill-blue-faint
Light
#4894ee1a
Dark
#5dabff1a
bg-workflow-fill-purple
Light
rgb(141, 88, 247)
Dark
rgb(147, 93, 255)
bg-workflow-fill-purple-faint
Light
#8d58f71a
Dark
#935dff1a
bg-workflow-fill-orange
Light
rgb(255, 159, 79)
Dark
rgb(255, 135, 99)
bg-workflow-fill-orange-faint
Light
rgb(255, 159, 79, 0.16)
Dark
#ff87631a
bg-workflow-fill-pink
Light
rgb(248, 82, 145)
Dark
rgb(255, 101, 159)
bg-workflow-fill-pink-faint
Light
#f852911a
Dark
#ff659f1a
bg-workflow-fill-red
Light
oklch(63.7% 0.237 25.331)
Dark
oklch(0.704 0.191 22.216)
bg-workflow-fill-red-faint
Light
color-mix(in srgb, oklch(63.7% 0.237 25.331) 10%, transparent)
Dark
color-mix(in srgb, oklch(0.704 0.191 22.216) 10%, transparent)