Foundation

Color

OKLCH everywhere — perceptually uniform lightness, real palette math via color-mix() and relative color syntax. Components read semantic tokens; the palette is private.

— Palette

ink

ink-50

oklch(98% 0.005 260)

ink-100

oklch(95% 0.008 260)

ink-200

oklch(88% 0.010 260)

ink-300

oklch(78% 0.012 260)

ink-400

oklch(64% 0.015 260)

ink-500

oklch(50% 0.018 260)

ink-600

oklch(38% 0.022 260)

ink-700

oklch(28% 0.025 260)

ink-800

oklch(20% 0.025 260)

ink-900

oklch(16% 0.025 260)

ink-950

oklch(12% 0.025 260)

ink-1000

oklch(8% 0.020 260)

sky

sky-50

oklch(97% 0.020 230)

sky-100

oklch(94% 0.040 230)

sky-200

oklch(88% 0.070 230)

sky-300

oklch(80% 0.110 230)

sky-400

oklch(72% 0.140 230)

sky-500

oklch(64% 0.160 230)

sky-600

oklch(55% 0.150 230)

sky-700

oklch(45% 0.130 230)

amber

amber-200

oklch(92% 0.080 85)

amber-300

oklch(82% 0.130 80)

amber-400

oklch(72% 0.160 75)

amber-500

oklch(64% 0.170 70)

sage

sage-200

oklch(92% 0.060 150)

sage-300

oklch(82% 0.110 145)

sage-400

oklch(72% 0.140 145)

plum

plum-300

oklch(70% 0.150 320)

plum-400

oklch(60% 0.180 320)

plum-500

oklch(50% 0.200 320)

ember

ember-300

oklch(70% 0.180 25)

ember-400

oklch(58% 0.220 25)

ember-500

oklch(48% 0.230 25)

ember-600

oklch(38% 0.220 25)

— Semantic tokens

Token	Default	Night
--t-bg-canvas	var(--p-ink-1000)	var(--p-ink-1000)
--t-bg-surface	oklch(from var(--p-ink-950) l c h / 0.82)	oklch(from var(--p-ink-1000) l c h / 0.92)
--t-bg-elevated	oklch(from var(--p-ink-900) l c h / 0.92)	oklch(from var(--p-ink-950) l c h / 0.95)
--t-bg-overlay	oklch(from var(--p-ink-1000) l c h / 0.55)	oklch(from var(--p-ink-1000) l c h / 0.70)
--t-fg-primary	var(--p-sky-50)	oklch(from var(--p-ember-300) calc(l + 0.10) c h)
--t-fg-muted	oklch(from var(--p-sky-200) calc(l - 0.16) calc(c * 0.70) h)	oklch(from var(--p-ember-300) l calc(c * 0.72) h)
--t-fg-subtle	oklch(from var(--p-sky-200) calc(l - 0.28) calc(c * 0.50) h)	oklch(from var(--p-ember-300) calc(l - 0.10) calc(c * 0.56) h)
--t-fg-accent	var(--p-sky-300)	var(--p-ember-400)
--t-border-hairline	oklch(from var(--p-sky-50) l c h / 0.07)	oklch(from var(--p-ember-400) l c h / 0.10)
--t-border-subtle	oklch(from var(--p-sky-50) l c h / 0.18)	oklch(from var(--p-ember-400) l c h / 0.25)
--t-border-focus	oklch(from var(--p-sky-400) l c h / 0.80)	oklch(from var(--p-ember-400) l c h / 0.90)
--t-hud-glow	var(--p-sky-400)	var(--p-ember-400)
--t-hud-readout	oklch(from var(--p-sky-200) l c h / 0.80)	oklch(from var(--p-ember-300) l c h / 0.85)
--t-tone-sky	var(--p-sky-400)	var(--p-ember-400)
--t-tone-amber	var(--p-amber-300)	var(--p-ember-400)
--t-tone-sage	var(--p-sage-300)	var(--p-ember-400)
--t-tone-plum	var(--p-plum-400)	var(--p-ember-400)
--t-tone-ember	var(--p-ember-400)	var(--p-ember-400)
--t-tone-neutral	oklch(from var(--p-sky-50) l c h / 0.6)	oklch(from var(--p-ember-400) l c h / 0.6)
--t-sky-glow	oklch(48% 0.075 58)	oklch(44% 0.110 38)