Design tokens
The tokens live in one stylesheet as CSS custom properties on :root. The tables below are read
from that file at build time, so they always match the installed version.
Use them in your own CSS with var(--name). To change them, see Theming.
Core palette
| Token |
Value |
Note |
--bg |
#050508 |
|
--surface |
#0d0d14 |
|
--surface-raised |
#12121c |
|
--border |
#1a1a2e |
|
--border-bright |
#2a3d4f |
|
Blue accent spectrum
| Token |
Value |
Note |
--accent |
#4ca8e8 |
orb idle, primary |
--accent-bright |
#6ec4ff |
thinking, hover |
--accent-speak |
#5ab8f0 |
speaking |
--accent-dim |
#2d6aa1 |
inactive state |
Text
| Token |
Value |
Note |
--text |
#e8f4ff |
|
--text-secondary |
#6b8fa8 |
|
--text-muted |
#2a3d4f |
|
Semantic
| Token |
Value |
Note |
--warning |
#e8b24c |
|
--error |
#e85a5a |
|
--success |
#4ce8a8 |
|
Glow system
| Token |
Value |
Note |
--glow |
0 0 8px #4ca8e8aa |
|
--glow-strong |
0 0 20px #4ca8e8cc, 0 0 40px #4ca8e844 |
|
--glow-inner |
inset 0 0 12px #4ca8e822 |
|
--glow-warn |
0 0 8px #e8b24caa |
|
--glow-error |
0 0 8px #e85a5aaa |
|
Panel tint
| Token |
Value |
Note |
--panel-bg |
rgba(13, 13, 20, 0.75) |
|
--panel-blur |
blur(12px) |
|
--panel-opacity |
1 |
|
Type
| Token |
Value |
Note |
--font |
'JetBrains Mono', ui-monospace, Menlo, monospace |
|
Radii — NEVER exceed these
| Token |
Value |
Note |
--r-0 |
0 |
|
--r-1 |
2px |
default |
--r-2 |
4px |
maximum allowed |
Spacing
| Token |
Value |
Note |
--s-1 |
4px |
|
--s-2 |
8px |
|
--s-3 |
12px |
|
--s-4 |
16px |
|
--s-5 |
24px |
|
--s-6 |
32px |
|
--s-7 |
48px |
|
Elevation as z-layers
| Token |
Value |
Note |
--z-orb |
0 |
|
--z-panel |
10 |
|
--z-status |
20 |
|
--z-topbar |
30 |
|
--z-dev |
40 |
|
--z-modal |
50 |
|
Motion
| Token |
Value |
Note |
--ease |
cubic-bezier(0.4, 0, 0.2, 1) |
|
--dur-fast |
120ms |
|
--dur-base |
200ms |
|
--dur-slow |
300ms |
|
--dur-ambient |
1400ms |
|