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: