PRISM · v0.7 · OKLCH
Prismatic
Light splits at the edges; shadows carry color, not gray.A light-mode-first design system built on a prism-glass material model. One anchor hue drives the entire palette — rotate it and the whole system re-derives. Two modes: day, and redshift (night) as a wavelength shift, not a darkness. Drag the hue. Flip the mode. Move the pointer — you are the light source, and every edge, cast and glint on this page follows. Nothing breaks.
Dispersion
Brand bands sit at fixed angular offsets from the anchor (+0, −35, +75, −140), all held in L 0.70–0.78 / C 0.11–0.14 so contrast survives any rotation. Field and ink take the cast — never neutral gray.
Density — permanence condenses light into pigment
The more permanent a component, the more its color condenses: transient lives on the edge and glow; standing earns a tinted wash and a 1px border; immovable is opaque pigment with near-zero shadow. Destructive actions live in the immovable tier — no spectral play.
Transient
Seconds. Edge + spectral glow only.
Standing
Session. Tinted wash + 1px border, short shadow.
Immovable
Structural. Opaque pigment, compact, no spectra.
Semantics — fixed wavelengths
success 152°, danger 27°, warning 75° are pinned in both modes — they never rotate with the brand. Info alone inherits the anchor. Only the shade adapts at night. State is never hue-only: badges carry words.
Elevation — cast floats, hairline grounds
Day shadows are 3-layer chromatic casts thrown along the light axis (135° at rest — move the pointer and every cast on the page swings away from it); night shadows are axis-free halos. No black shadows, ever. Inside data, casts are forbidden — elevation collapses to 1px hairlines, and refraction enters only as a 2px seam on the hovered row. A cast now means "floats above the data."
Floating card
Full cast (day) / halo (night). Hover to lift — at night it glows brighter instead, because there's nothing to lift toward.
No cast inside the table. Hover a row → 2px left seam.
Motion — quantized, massless, causal
q = 40ms; every duration is an integer multiple. Two easings, no springs. Properties animate brightness → form → shadow, and the shadow trails its object by 2q. Unknown state is superposed; entangled elements break the lag.
Group entrance · 1q/child, cap 6
Superposition · collapse 5q
↳ run 0xA2 · hue 150° · status ok
Entanglement · Δt = 0 on shared datum
Hover a dot or its row — both light instantly. Unrelated neighbors still lag 2q.
Light order · enter from −10,−12
Arrives from the light source, decelerates, then its shadow settles 2q behind.
Redshift — night is a wavelength, not a darkness
Toggle the mode (top right). Night mints zero new colors: dense→field,
field→surface, edge↔fill, cast→halo, filled display→outline. The hue slides toward
the long-wavelength end via redshift(h). Sunsets
refract over 25q — never snap.
Figure / ground swap
In day this card is paper on a near-white field with a dichroic edge. In night the field goes dark, this surface becomes the paper figure, and the edge inverts to quiet while the body carries the spectrum.
Conserved palette
Same bands, recomputed from --hr at night.
Type — five roles, line work on top
Display is constructed line work (Tilt Prism), allowed only ≥40px — below that it falls back to Instrument Sans 600. Day fills it; night outlines it.
Refraction
Light splits into spectra at the boundary.
The near-white field does the work. Color appears only at edges and in shadows.
--h: 185 → --hr: 129 · q = 40ms · AA ≥ 4.5:1
the human voice, used sparingly.
Holography — one light, cascaded by reference
The pointer is the light source, and the whole page is the hologram. Six
registered custom properties on the root — cast angle, cast vector, intensity,
position — form the reference beam; every dichroic edge, chromatic
cast, glint and tilt derives from them in pure CSS calc().
The driver writes the root at most once per frame, and only when a value
crosses its quantum (Δ3° angle, Δ0.02 vector) — most frames write nothing,
and the typed properties refract between quanta on their own. No element is
ever touched by JavaScript.
Foil
Spectrum = --la
Glint
Highlight = --lxp/--lyp
Foil chips: gradient angle, glint position and ±3° tilt are all var() reads. Zero per-element JS — add a thousand of these and the frame cost is unchanged.
Reference monitor · live
--la 135° · --lv 0.71, 0.71 · --li 0.35
frames 0 · write batches 0 · quanta Δ3° / Δ0.02 / Δ2%
This readout is the entire runtime contract: the beam is written, the cascade does the rest. Write batches never exceed frames, and once the pointer settles they stop — quantization makes still frames free. At night the casts are already halos, so only the glint and the foil answer the light: physics conserved.
Icons & displays — quantized light on tiny screens
After Ink & Switch's Tenfold: icons live on coarse 8×8 displays that emit rather than print, so the glass stays dark in both modes and only the wavelength changes. Click an icon to re-tune its band (anchor → near → far → counter). And in Tenfold's spirit — click and drag everywhere: the big display is paintable.
One-bit sprites, static DOM. The sheen crossing each screen is the same reference beam — no display owns a listener.
16×10 · pixels emit the current anchor band.