How MIXDESK was made — Generative Assets

01Concept

A recording console has a mental model everyone already owns: pull a fader up and that channel gets louder. MIXDESK borrows the whole metaphor and points it at OpenType variable axes. Weight is gain. Width is stereo spread. Optical size is mic distance. Slant is a channel tilted off-axis. Two "decks" each hold a face; a crossfader balances between them; a master LOUDNESS fader scales every axis's distance from neutral at once — pull it to the floor and any face collapses to a polite 400 Regular, which is silence, typographically speaking.

02Palette

Read from real studio gear: a charcoal desk, two coloured fader caps, and the amber glow of a backlit VU meter. Nothing bright except the meters — the type is the show, the desk stays dark.

Console charcoal: #232527 — the desk, the panels, the whole quiet chassis.

Cap orange: #FF4D00 — Deck A's fader cap and patch LED. Warm, serifed.

Cap teal: #2EC4B6 — Deck B's cap. The cool grotesk answering back.

VU amber: #FFB000 — every readout and meter face; the light the desk gives off.

Clip red: #E5484D — reserved for the red zone: peak LEDs, the CLIP latch, over 0 dB.

Monitor ink: #E9E5DA — warm off-white for the auditioned type, kept above 4.5:1.

03Type

Four variable faces, each patched for a different reason. The point of the desk is to hear them argue.

Fraunces

Deck serif

The expressive one. Its opsz, wght, SOFT and WONK axes give the desk a soft-focus, wonky voice at display sizes — the reason a WONK switch exists at all.

Roboto Flex

Deck grotesk

The loud one. Weight runs to 1000 and width to 151%, so it's the face that actually hits the limiter when you push the master into the red.

Archivo

Interface

Condensable, plain-spoken. Sets every label, eyebrow and control on the chassis — signage, not art — and doubles as a third deck face for the newsroom patch.

0.0 dB

Engraving & readouts

IBM Plex Mono for everything etched into metal: axis values, dB, the printed CSS. Tabular numerals so a moving fader never reflows its own readout.

04Techniques

No libraries, no images, no canvas. The whole console is CSS gradients, insets and box-shadows; the VU meters are hand-built SVG; the type is live font-variation-settings.
Faders, knobs and the crossfader are pointer-capture sliders that write a 0–1 position into a state object, then re-render on every move.
Preset recall is motorised: loading a patch animates every fader toward its target with a per-frame lerp, so the desk physically re-sets itself in front of you.
Live CSS export prints the exact font-variation-settings, size and tracking of the current mix — including the Google Fonts URL for whichever faces are in play — nothing rounded away.
SVG VU needles are driven by an energy model (weighted axis distance × gain × deck balance) with an idle drift, a fast-attack / slow-release smoother, and a red peak LED at the top of the scale.

The signature — type you mix like audio. Each fader stores a position, not a point value. On render, that position maps into a face's real axis range (wght 100–900 on Fraunces, 100–1000 on Roboto Flex) to get a raw target; the master gain then scales that target's distance from the axis neutral, so LOUDNESS at zero pins everything to 400/100%/14 and a shove past 0 dB amplifies it. Values are clamped to each axis's limits — and if the master is over unity and a value slams into its ceiling, a clipped flag trips: the CLIP lamp latches, the monitor glass shudders, and the meters kick. The result is honest. What the monitor shows is exactly what PRINT hands you.

05Iteration log

Pass 1 — Craft

Caught the signature bug of the build: the CLIP lamp is position:absolute; top:9px, but its .stage parent had no position, so it anchored to the monitor frame instead and floated up over the "type your own line" hint. Made .stage a positioning context; the lamp dropped back into the top-right of the audition area where it belongs.
Read the desk at 1440 / 768 / 375 — spacing rhythm, readout alignment and meter balance held; no contrast failures on the amber-on-charcoal readouts.

Pass 2 — Depth

Added a grabbing state: faders, knobs and the crossfader now lift and switch to a grabbing cursor while dragged, so a move you commit feels different from one you hover.
Second-read detail — the LOUDNESS readout runs hot: below 0 dB it glows amber like the rest of the desk, but push the master into the red and it turns ember-orange, a small tell you only notice once you've overdriven the mix.

Pass 3 — Hardening

Headless QA at 375 / 768 / 1440: zero horizontal overflow, zero console errors, hero never stuck at opacity 0.
Reduced motion verified: the power-on choreography and clip shudder collapse, the rAF loop never starts, and the VU needles are drawn once to a settled angle rather than left blank; the loop also pauses on document.hidden.
Chanel rule: the nameplate carried two lines of invented lore ("Generative Assets Audio Division") that competed with the real footer colophon — trimmed to a single spec line so the top plate breathes.