docs(design): pick the schematic direction for the FX rack and record why

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) <noreply@anthropic.com>
This commit is contained in:
Vance Ingalls
2026-08-09 11:46:55 -07:00
co-authored by Claude Opus 5
parent 695a38bdb2
commit 03ace6e3cb
2 changed files with 115 additions and 9 deletions
+78
View File
@@ -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.
+37 -9
View File
@@ -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: