Skip to content
← shupp.dev / portfolio

day H 185° → redshift H 129°

PRISM · v0.6 · 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. Nothing breaks.

LAW 1–2 · COLOR

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.

anchor+0°
near−35°
far+75°
counter−140°
fieldground
surfaceraised
inktext
denseimmovable
LAW 5 · DENSITY

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.

LAW 4 · SEMANTICS ARE PHYSICS

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.

success 152° ✓ Approved
danger 27° ✕ Rejected
warning 75° ! Pending
info = anchor i Info
LAW 6–7 · ELEVATION

Elevation — cast floats, hairline grounds

Day shadows are 3-layer chromatic casts along a 135° axis; 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.

RunHueState
0xA1185°ok
0xA2150°ok
0xA3027°fail
0xA4075°warn

No cast inside the table. Hover a row → 2px left seam.

LAW 8–15 · MOTION + QUANTUM

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

Entanglement · Δt = 0 on shared datum

Hover a dot or its row — both light instantly. Unrelated neighbors still lag 2q.

r1185°
r2150°
r3027°

Light order · enter from −10,−12

Arrives from the light source, decelerates, then its shadow settles 2q behind.

LAW 16–19 · REDSHIFT

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.

LAW 20 · TYPE

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.

display · line work · ≥40px

Refraction

headline · Instrument Sans 600

Light splits into spectra at the boundary.

body · Sans 400

The near-white field does the work. Color appears only at edges and in shadows.

data · Spline Sans Mono

--h: 185 → --hr: 129 · q = 40ms · AA ≥ 4.5:1

aside · Instrument Serif italic · one phrase

the human voice, used sparingly.