THEME
MOTION
HAPTIC
SOUND
TOKENS
Single source of truth:
tokens/tokens.json. Everything below
is rendered from that file — color palettes, type scale, spacing, motion
timing, sound patterns, haptic durations.
Colors — Dark
bg
#000000
panel
#121212
border
#2E2E2E
text
#EAEAEA
textDim
#858585
textFaint
#383838
danger
#EB3D38
dangerDeep
#C22926
warning
#F29E33
success
#59D173
info
#38A8E2
accent
#EB73C7
amber
#F2C133
pink
#F266AD
purple
#B273F2
teal
#3AD6C7
grey
#9EA5B7
Colors — Light
bg
#F6F7F2
panel
#EEEEE7
border
#C5C8BF
text
#1B2030
textDim
#545B6B
textFaint
#B0B4A8
danger
#B42019
dangerDeep
#8A1410
warning
#9E5B13
success
#247235
info
#1E6FA8
accent
#A6327D
amber
#7F5F10
pink
#9C2868
purple
#5B31A6
teal
#0F6E62
grey
#4D5160
Type Scale
| Name | Size | CSS var | Preview |
|---|---|---|---|
| caption | 9px | --cathode-type-scale-caption | AaBb 01 |
| readout | 11px | --cathode-type-scale-readout | AaBb 01 |
| label | 13px | --cathode-type-scale-label | AaBb 01 |
| number | 16px | --cathode-type-scale-number | AaBb 01 |
| display | 24px | --cathode-type-scale-display | AaBb 01 |
| hero | 36px | --cathode-type-scale-hero | AaBb 01 |
Spacing
| Name | Size | CSS var |
|---|---|---|
| xs | 4px | --cathode-space-xs |
| sm | 8px | --cathode-space-sm |
| md | 12px | --cathode-space-md |
| lg | 16px | --cathode-space-lg |
| xl | 24px | --cathode-space-xl |
| xxl | 32px | --cathode-space-xxl |
| framePad | 12px | --cathode-space-frame-pad |
| rowHeight | 28px | --cathode-space-row-height |
Motion — Durations
| Name | ms |
|---|---|
| instant | 80 ms |
| quick | 150 ms |
| settled | 300 ms |
| slow | 500 ms |
Sound Palette
Every sound is synthesized via the Web Audio API — no audio files, no asset loads. Each pattern is a list of notes with frequency, duration, waveform, gain, and optional inter-note delay.
| Name | Notes | Use |
|---|---|---|
click | 1.2 kHz square, 30 ms | button tap |
tick | 1.6 kHz square, 15 ms, low gain | slider / counter step |
confirm | 880 → 1175 Hz sine, rising two-note | submit / success |
warn | 600 Hz triangle, 140 ms | heads-up |
error | 440 → 330 Hz saw, descending two-note | system error ding-dong |
destructive | 180 Hz saw, 100 ms | pre-action warning |
6 patterns defined in tokens.json.
Haptic Palette
| Name | Vibration pattern (ms) |
|---|---|
| tap | 10 |
| confirm | 20 |
| warn | 10 · 30 · 10 |
| error | 20 · 40 · 20 |
| destructive | 35 |
| long | 40 |
navigator.vibrate is unsupported on iOS Safari — Cathode UI
gracefully no-ops there. For real iOS haptics use the (future) Swift package.