01
Colors
OKLCH color space + APCA standard for perceptually calibrated contrast. Brand palette generated with Harmonizer (evilmartians.com) — primary tokens at Lc 60 (shade 400 dark / shade 1500 light).
Base
Background D-bg
oklch(0.183 0.000 0 )
--background
Page background — Harmonizer dark base, achromatic #121212
Foreground D-100
oklch(0.951 0.005 90)
--foreground
Primary text and headings
Surface
Card D-900
oklch(0.235 0.005 260)
--card
Card / popover — one step LIGHTER than bg (elevated)
Secondary D-800
oklch(0.280 0.005 260)
--secondary
Secondary surface — panels, sidebar
Muted D-800
oklch(0.280 0.005 260)
--muted
Muted fill — same step as secondary (Shadcn convention)
Accent D-750
oklch(0.325 0.005 260)
--accent
Accent surface — input hover fills, slightly raised
Text
Primary Text D-100
oklch(0.951 0.005 90)
--foreground
Headings and body copy
Muted Text
oklch(0.660 0.015 90)
--muted-foreground
Secondary / descriptive text, metadata, placeholders
Brand — 5 Colors (theme-aware via --brand-* CSS vars)
Orange (Mahogany)
var(--brand-orange)
--brand-orange
Dark: #ff966d (Mahogany 400, APCA Lc 60) · Light: #d24f01 (Mahogany 1500, Lc 60)
Red
var(--brand-red)
--brand-red
Dark: #fe948d (Red 400, APCA Lc 60) · Light: #eb042d (Red 1500, Lc 60)
Purple (Violet)
var(--brand-purple)
--brand-purple
Dark: #c4a1fe (Violet 400, APCA Lc 60) · Light: #a049ff (Violet 1500, Lc 60)
Cyan (Cerulean)
var(--brand-cyan)
--brand-cyan
Dark: #0bbefb (Cerulean 400, APCA Lc 60) · Light: #0384b1 (Cerulean 1500, Lc 60)
Green (Emerald)
var(--brand-green)
--brand-green
Dark: #09cb79 (Emerald 400, APCA Lc 60) · Light: #078d53 (Emerald 1500, Lc 60)
Semantic
Primary D-100
oklch(0.951 0.005 90)
--primary
White — primary CTA button fill
Destructive
oklch(0.577 0.245 27.325)
--destructive
Error states, destructive warnings
Border D-700
oklch(0.370 0.005 260)
--border
Default border — card outlines, dividers
Input D-750
oklch(0.325 0.005 260)
--input
Form input background
Ring D-100
oklch(0.951 0.005 90)
--ring
Focus ring
Word Gradient
Supercurve
anim.wordGrad — red → orange → purple → cyan → green (1.5s loop)
Brand Shade Scales — APCA Calibrated
16-step dual-scale per Harmonizer (dark 100–800 / light 1100–1800). Dark shades calibrated vs #121212, light shades vs #F2F1E4. Primary --brand-* token = shade 400 (Lc 60) dark / shade 1500 (Lc 60) light. Use shade 300 / 1600 (Lc 75) for body text and small labels.
100
#fff2ed
200
#ffded1
300
#ffbda3
400
#ff966d
500
#ff753a
600
#fe6104
700
#ca4c03
800
#903300
1100
#ffc5af
1200
#ff9e79
1300
#fe6b26
1400
#f55d02
1500
#d24f01
1600
#9a3802
1700
#581d01
1800
#000000
Dark mode · shade 400 (Lc 60)
#ff966d · vs #121212 ✓ APCA Lc 60
Light mode · shade 1500 (Lc 60)
#d24f01 · vs #F2F1E4 ✓ APCA Lc 60
100
#fff1ef
200
#feddd9
300
#ffbbb6
400
#fe948d
500
#ff726e
600
#ff5c5c
700
#e3022b
800
#9f041c
1100
#fec4bf
1200
#fe9c96
1300
#ff6664
1400
#fe4d50
1500
#eb042d
1600
#ab011e
1700
#60020d
1800
#000000
Dark mode · shade 400 (Lc 60)
#fe948d · vs #121212 ✓ APCA Lc 60
Light mode · shade 1500 (Lc 60)
#eb042d · vs #F2F1E4 ✓ APCA Lc 60
100
#f7f2ff
200
#eae0fe
300
#d8c2fe
400
#c4a1fe
500
#b887ff
600
#b179ff
700
#9d3cff
800
#7204c4
1100
#dcc9ff
1200
#c8a7fe
1300
#b47fff
1400
#ae70fe
1500
#a049ff
1600
#7b04d3
1700
#440178
1800
#000000
Dark mode · shade 400 (Lc 60)
#c4a1fe · vs #121212 ✓ APCA Lc 60
Light mode · shade 1500 (Lc 60)
#a049ff · vs #F2F1E4 ✓ APCA Lc 60
100
#e8f7ff
200
#c4ebff
300
#84d6fe
400
#0bbefb
500
#02aae2
600
#02a0d4
700
#007faa
800
#005978
1100
#95dbff
1200
#30c3fe
1300
#01a4db
1400
#029ace
1500
#0384b1
1600
#066081
1700
#023549
1800
#000000
Dark mode · shade 400 (Lc 60)
#0bbefb · vs #121212 ✓ APCA Lc 60
Light mode · shade 1500 (Lc 60)
#0384b1 · vs #F2F1E4 ✓ APCA Lc 60
100
#d1ffe0
200
#67ffab
300
#0de88b
400
#09cb79
500
#08b66c
600
#00ab65
700
#03884f
800
#026036
1100
#0bee8f
1200
#02d07c
1300
#01af68
1400
#03a461
1500
#078d53
1600
#04663b
1700
#01391f
1800
#000000
Dark mode · shade 400 (Lc 60)
#09cb79 · vs #121212 ✓ APCA Lc 60
Light mode · shade 1500 (Lc 60)
#078d53 · vs #F2F1E4 ✓ APCA Lc 60
Neutral Scale Ramp
Dark mode — base #121212 · surfaces get lighter as they elevate · each step ≈ 0.05 L apart
D-950
#07070f
—
Full black
D-bg
#121212
--background
Page bg
D-900
≈#191924
--card
Card bg
D-800
≈#202031
--secondary
Surface
D-750
≈#26263e
--input
Input
D-700
≈#2c2c4a
--border
Border
D-500
#999996
--muted-fg
Muted txt
D-100
#efefec
--foreground
Foreground
Light mode — pure grayscale (chroma 0, achromatic) · L-50 is the new whitest tier · surfaces get darker as they elevate
L-900
≈#1a1a1a
--foreground
Foreground
L-500
≈#777777
--muted-fg
Muted txt
L-400
≈#c9c9c9
--border
Border
L-300
≈#dadada
--input
Input
L-200
≈#e3e3e3
--secondary
Surface
L-card
≈#ececec
--card
Card bg
L-bg
≈#f5f5f5
--background
Page bg
L-50
≈#fbfbfb
--popover
Whitest
Dark: surfaces (950–700) use hue 260 (cool blue-black); background is achromatic #121212; text (500, 100) uses hue 90 (warm off-white). Light: pure grayscale — every step uses chroma 0, so the ramp reads as neutral gray with no warm or cool cast. L-50 ≈#fbfbfb is the new whitest tier (used for popovers and the lightest surfaces).