Color

81 semantic color tokens. Each is mode-aware — the same token resolves to a different value in light and dark. Components reference these (e.g. bg-brand-solid), never raw colors.

Light

background

foreground

card

card-foreground

popover

popover-foreground

brand

brand-solid

brand-solid-foreground

brand-strong

primary

primary-foreground

primary-strong

secondary

secondary-foreground

muted

muted-foreground

accent

accent-foreground

state-rest

state-hover

state-active

state-selected

edge-rest

edge-hover

edge-strong

danger-solid

danger-solid-foreground

destructive

destructive-foreground

border

input

ring

neutral-solid

neutral-solid-foreground

brand-subtle

brand-subtle-foreground

primary-subtle

primary-subtle-foreground

success-solid

success-solid-foreground

warning-solid

warning-solid-foreground

info-solid

info-solid-foreground

info

info-subtle

info-foreground

success

success-subtle

success-foreground

warning

warning-subtle

warning-foreground

danger

danger-subtle

danger-foreground

orange

orange-subtle

orange-foreground

violet

violet-subtle

violet-foreground

chart-1

chart-2

chart-3

chart-4

chart-5

chart-6

chart-7

chart-8

chart-grid

chart-axis

chart-positive

chart-negative

avatar-online

avatar-busy

avatar-focus

avatar-offline

avatar-locked

overlay

Dark