Design tokens
Global site tokens. Instrument palettes are intentionally separate.
Color
| Token | Light | Dark | Use |
|---|---|---|---|
--site-background |
#ffffff |
#000000 |
Page background |
--site-text |
#000000 |
#ffffff |
Text |
--site-link |
#0000ee |
#66aaff |
Links |
--site-rule |
currentColor |
currentColor |
Rules and table lines |
Type
| Token | Value | Use |
|---|---|---|
--site-font-family |
var(--site-font-family-vt323) |
Active UI text family |
--site-font-family-system-mono |
"JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Monaco, Consolas, monospace |
Mono typeface option |
--site-font-family-vt323 |
"VT323", var(--site-font-family-system-mono) |
Pixel typeface option |
--site-font-size-vt323 |
1.21 |
Pixel type size compensation |
--site-font-size |
12px |
Base text size |
--site-line-height |
1.5 |
Text rhythm |
Layout
| Token | Value | Use |
|---|---|---|
--site-page-padding |
clamp(24px, 5vw, 72px) |
Page padding |
--site-content-width |
720px |
Readable column width |
Sound
Site experiences mapped to the current Cuelume palette. Interactions use the experience name; only the shared policy chooses a cue.
| Experience | Cue | Use |
|---|---|---|
tick | Navigation and compact hover | |
tick | Dense-list hover | |
press | Shared click; begin holding or drawing | |
release | End holding or drawing | |
droplet | Deposit or strike a surface | |
page | Palette, preset, page, or variation | |
toggle | Mode or state change | |
bloom | Evolution layered behind the portrait click | |
bloom | Something appears or finishes forming | |
ready | Content becomes usable | |
success | Copy, save, download, or export succeeds | |
error | Recoverable failure | |
loading | User-initiated perceptible work starts | |
bloom | Open or expand | |
droplet | Close, collapse, or clear |