OKLCH, light and dark
Colors
One violet accent, a quiet neutral surface scale, and signal colors. Click any swatch detail to copy it.
Values below are read live from your current theme (light, base obsidian). Toggle the theme to see them change.
Brand accent
One violet hue carries every action, focus ring, and highlight.
Accent
...
Accent foreground
...
Neutral surface scale
Tonal stacking: 0 is the page, 3 is the highest raised layer. The well sits below the page.
Surface 0
...
Surface 1
...
Surface 2
...
Surface 3
...
Surface well
...
Semantic colors
Role based names. Use these in components, never raw values.
Background
...
Foreground
...
Surface
...
Border
...
Muted
...
Subtle
...
Signal colors
Status accents for live and healthy states. Pair with text, never color alone.
Signal live
...
Signal ok
...
Accent tonal ramp
Fifty to 950, generated from the brand accent with OKLCH math.
50
100
200
300
400
500
600
700
800
900
950
How it is built: the hue stays fixed at 289 degrees. Lightness walks a fixed curve from 97.5 percent at step 50 down to 23 percent at step 950, with step 600 equal to the base accent. Chroma, the amount of color, rises toward the middle of the ramp and fades at both ends, then shrinks any step that would fall outside the sRGB screen range. Hex values are approximate sRGB conversions.
Light and dark, side by side
The same sample UI driven only by tokens.
Light
Deploy preview
HealthySurfaces stack, text stays readable, accent marks the one action.
Dark
Deploy preview
HealthySurfaces stack, text stays readable, accent marks the one action.
Elevation
One light source above. Shadows, rings, and hairlines all come from tokens.
- Cards at rest
- Hovered and floating
- Popovers and dialogs
- Gradient ring
- Soft line