From 03ace6e3cbfc3cf6430f7e1605f162c86b228aed Mon Sep 17 00:00:00 2001 From: Vance Ingalls Date: Sun, 9 Aug 2026 11:46:55 -0700 Subject: [PATCH] docs(design): pick the schematic direction for the FX rack and record why MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Four directions were mocked at the real 292px panel width — hardware silkscreen, vintage test equipment, risograph, schematic — and schematic was chosen. It won because it is the only one that adds information rather than decoration. Chain order is load-bearing in audio (a limiter first and a limiter last are different sounds) and nothing in the panel said so. Drawing the rack as its signal path also lets bypass be a route rather than an opacity, gives a preset a visible brace over the nodes it wrote, lets an automated parameter draw its lane instead of showing the stale number the lane replaced, and marks a measuring module with a second ring — which is the static-versus-script distinction from section 4 delivered as drawing rather than prose. Drops the 3px coloured rail from the first pass. It is the single most overused device in dashboard UI, and forcing each direction to find another answer is what separated them. Adds .impeccable.md with the design context the direction was chosen against — users, personality, principles, palette, anti-references — so the next session does not re-derive it or re-ask. Co-Authored-By: Claude Opus 5 (1M context) --- .impeccable.md | 78 +++++++++++++++++++++++++++++++++++++++ plans/audio-fx-presets.md | 46 ++++++++++++++++++----- 2 files changed, 115 insertions(+), 9 deletions(-) create mode 100644 .impeccable.md diff --git a/.impeccable.md b/.impeccable.md new file mode 100644 index 0000000000..d49417392c --- /dev/null +++ b/.impeccable.md @@ -0,0 +1,78 @@ +# Impeccable + +## Design Context + +### Users + +Video authors working in HyperFrames Studio — a browser-based editor for HTML +compositions that render to video. They are not audio engineers. Most arrive at +the Audio FX rack because something sounds wrong (a music bed is burying a +voiceover) rather than because they want to reach for a compressor. + +Context of use: a **292 px** right-hand property panel, inside a dark editor, +during a long working session with the preview playing. The rack is stared at +while mixing, not glanced at. + +The job: get a mix that sounds right without having to learn what a knee or a +Q is. Voice carve is the model — one strength knob over an analysis that writes +its own settings. + +### Brand Personality + +**Precise, mechanical, unshowy.** The studio's own surfaces are quiet, dense and +technical; the interesting thing on screen should always be the author's +composition, never the chrome. Effects are real DSP with real units, and the UI +should be honest about that rather than hiding it behind friendly abstractions — +while never *requiring* the author to engage with it. + +Emotional goal: **confidence**. The author should believe the tool knows what it +is doing, and be able to check its work. + +### Aesthetic Direction + +**Schematic drawing** — chosen 2026-08-09 from four mocked directions (hardware +silkscreen, vintage test equipment, risograph, schematic). + +The rack is drawn as the signal path it actually is: numbered nodes on a spine +from IN to OUT, leader-dotted dimension lines, three-letter stage tags, line +weight carrying hierarchy. Near-monochrome, with family colour restricted to the +node ring and the tag. + +Why it won: it is the only direction that *adds information*. Chain order is +load-bearing in audio — a limiter first and a limiter last are different sounds +— and nothing in the rack communicated it. Numbering the nodes fixes a real +comprehension gap instead of decorating one. It is also the quietest, which +matters on a surface authors stare at for an hour. + +**Anti-references:** coloured rails down the left edge of cards (pass 1 did this; +it is the most overused move in dashboard UI). Glassmorphism. Neon-on-dark. +Anything that reads as "audio plugin skeuomorphism" — knobs, brushed metal, +VU meters. + +Theme: **dark only**. The studio is dark; the rack is a picture of the studio. + +Type: a condensed technical sans for legends and a monospace for values. +Mocked with `DIN Alternate` and `Monaco`; anything shipped must be self-hosted +(no CDN). Budget is two faces. + +### Design Principles + +1. **The drawing should teach the signal path.** Order, routing and bypass are + information — draw them, don't imply them. +2. **Colour is a label, not a surface.** Family hue appears on a node ring or a + tag, never as a fill or a stripe. +3. **Quiet by default, legible under pressure.** Parameter rows stay + workmanlike; spend character on the header, the smart modules and the + moments of state change. +4. **Never require the DSP to be understood.** Every technical surface needs a + one-click path past it — a preset, or a script that measures and decides. +5. **Show the work.** A generated chain is ordinary editable nodes, and the + author can always see what was written on their behalf. + +### Palette + +Studio tokens are fixed and authoritative: panel `#0C0C0E`, surface `#18181B`, +border `#27272A`, text ramp `#FAFAFA`→`#3F3F46`, accent `#3CE6AC`. + +Family hues (labels only): filter blue, dynamics amber, nonlinear red, time +violet, smart = the studio accent, reserved for modules that measure. diff --git a/plans/audio-fx-presets.md b/plans/audio-fx-presets.md index 7b7393d368..cf6c57b4a7 100644 --- a/plans/audio-fx-presets.md +++ b/plans/audio-fx-presets.md @@ -294,16 +294,44 @@ Eurorack case. Worth leaning into: a faceplate recognised by colour and lettering before the label is read. Carve already gets a distinct treatment (`hf-fx-carve-module`); this generalises it. -**Three carriers, no layout change:** +**Direction chosen 2026-08-09: schematic** — picked from four mocked +alternatives (hardware silkscreen, vintage test equipment, risograph, +schematic). Recorded with its principles in `.impeccable.md` at the repo root. -1. **A 3 px rail down the left edge** in the family hue. Cheapest possible - signal at this width — survives collapse, reads down a stack of ten, costs - no room. -2. **Lettering per family** — filters tracked-out mono caps, dynamics heavy and - tight, nonlinear italic serif, time light and airy, smart mono with a badge. - The *kind* of module is legible with the label out of focus. -3. **A tint step per module within its family**, so two filters differ without - reading as two families. +The rack is drawn as the signal path it is: numbered nodes on a dashed spine +running from an `IN` terminal to an `OUT`, leader-dotted dimension lines, +three-letter stage tags, family colour restricted to the node ring and the tag. + +**Why it won over the louder options:** it is the only one that *adds +information*. Chain order is load-bearing — a limiter first and a limiter last +are different sounds — and nothing in the panel communicated it. It is also the +quietest, which matters on a surface authors stare at while mixing. + +**What the drawing carries that the current rack cannot say:** + +| Drawn as | Instead of | +| --- | --- | +| `IN` names the source, `OUT` names the destination and the FX tail | nothing — the tail was invisible | +| Numbered nodes 01…06 | implicit top-to-bottom order | +| Bypassed node: ring drawn open, wire beside it solid and unbroken | a row at 50% opacity | +| Preset nodes gathered under a right-hand brace with its name | no grouping at all | +| An automated parameter draws its lane shape; the value column reads `lane` | a stale number the lane already replaced | +| A measuring module gets a second ring | nothing distinguishes carve from a hand-set chain | + +That last pair is the static-versus-script distinction from §4, delivered as +drawing rather than documentation. + +**The preset menu preview is the chain** — each row previews the nodes it will +draw as small connected rings in their family colours, so the shape you pick is +the shape you get. Smart entries read `MEASURES` instead. + +**The empty state keeps the wire.** `IN` and `OUT` remain, connected, with "no +effects, signal passes straight through" between them — which teaches that the +rack is a path before the author has added anything to it. + +**Not carried over from the first pass:** the 3 px coloured rail down each +module's left edge. It is the most overused device in dashboard UI, and +forcing each direction to find another answer is what separated them. **Family hues**, chosen to sit on `#0C0C0E` without competing with the studio's `#3CE6AC` accent: