The Reel

Before a single screen

Nothing in this program names a colour. Every value in every rule resolves through a token, and the tokens are set once by the register. This is not tidiness for its own sake — it is the mechanism by which one interface becomes a night interface and a late-night interface without a second stylesheet, and the reason a person can work at eleven and at three without their eyes being asked to renegotiate.

Haute Lumière carries seven registers. The Reel ships two. The other five are correct for reading and wrong for looking at moving picture, because a bright ground beside a video frame biases every judgement you make about that frame's exposure. Editors work on grey for the same reason painters do not hang work on a white wall.

A bright interface beside a dark frame is not a preference. It is a measurement error.

The two registers it ships in

Midnight is the default and the one to design in — a blue-black that sits neutral against most footage. Nocturne is the green-black alternate, for people who find blue-black cold after four hours. They are the same interface. Only the tokens move.

Three colours exist outside the token set, used only in the Seam Inspector where a judgement must be legible at a glance: #9FD3A8 for a clean joint, signal gold for a marginal one, #E2926E for a bad one. That last is clay, not red. There is no red anywhere in this program, for the reason the design system gives and one more: a red interface teaches your body that a slow render is an emergency, and you will be doing slow renders every night for years.

The type scale

Two families, two jobs, never crossed. Cormorant Garamond is everything a person reads and everything they write — prompts, sentences, captions, the Ledger's one honest line. Manrope, all-caps, tracked, is the trellis: labels, figures, section marks, anything structural. A third appears only where characters must be counted: SF Mono for seeds, hashes, timecodes and parameter values.

Space, and the one number

One number generates the whole layout: 19px. It is the sentence's font size, and every measure in the program is a multiple or a clean fraction of it. This is not numerology; it means that when the sentence changes size — and it will, because a 32-inch display should not use a 13-inch measure — the entire interface rescales in proportion without a single breakpoint being written.

Seven values. A layout that needs an eighth has a structural problem, not a spacing problem, and the correct response is to look at the structure.

Elevation and the living surface

Three elevations, and they are semantic rather than decorative. Flat is the window itself. Raised — one hairline plus 0 2px 5px rgba(0,0,0,.24), 0 12px 26px -12px rgba(0,0,0,.4) — is anything that could be dragged: a Spool entry, a Strip shard. Lifted — 0 30px 70px -26px rgba(0,0,0,.8) — is reserved for exactly one thing at a time, whatever the Hush has brought forward. If two things are lifted, the Hush is broken.

Behind the window sits the living surface, inherited unchanged from the design system: one sunburst in the upper right, breathing on a 12-second cycle between 12% and 20% opacity, and paper grain at 3.5%, multiplied. Both are behind the window and never on top of a frame — a grain overlay on footage you are judging is a lie about the footage. The sunburst exists for one reason, and it is a physiological one: a slow, silent, non-demanding movement in the periphery gives a person something to breathe with while they wait, and they will be waiting a great deal.

Motion

One curve — cubic-bezier(.165,.84,.44,1) — and four durations. Nothing in this program bounces, springs, snaps or pops, and nothing signals urgency through speed.

prefers-reduced-motion removes the sunburst's animation and the Ledger's pip entirely, and collapses all four durations to 0ms except the 700ms fade, which becomes 120ms. It never removes the fade outright: an instant cut between two dark surfaces reads as a flicker, which is worse than the motion it replaced.

One surface, four zones

The Reel is one window. Not a workspace with dockable panels, not a document model with several open at once, not a browser with tabs. One window, and everything in the program happens inside it. This is a constraint accepted deliberately, because the alternative — a layout the user arranges — means the program has no opinion about where anything belongs, and a program with no opinion cannot make the next action obvious.

Anatomy — four zones

Top to bottom, always in this order, and no zone ever moves.

Specimen 03 · The window, whole

1280 × 800 · midnight

Give it a pictureThe Reel

Door oneGive it a picture

Door twoGive it a voice

Door threeGive it the shards

Door fourOpen the Spool

01

02

03

04

Rendering shard four of nine, at native geometry. Queued5 Done tonight23 Elapsed1:42:08 Disc412 GB

The Ledger

The Ledger is the program's honesty. It is a 44px band on Raised, always present, and it carries exactly two things: one sentence of serif saying what is happening in plain English, and four figures in Manrope. It is never louder than the work.

Three rules govern the Ledger absolutely, restated from the brief because they are the kind of rule that gets quietly broken in month four:

i

It never uses red. A slow render is not an emergency.

ii

It never shows a progress bar that is lying. If the remaining time is not known, it says so in words rather than drawing a bar that moves at an invented rate.

iii

It never blocks. Anything the Ledger reports can be ignored indefinitely without the program stopping.

Three widths

No breakpoints in the CSS sense. The sentence size is set from the viewport once, and everything follows from it. But three widths are worth naming because the arrangement genuinely changes at two of them.

Below 1024 the program says so and declines, in one line of serif on the desk: The Reel wants a wider window than this. It will wait. It does not attempt a phone layout. A continuity instrument on a phone would be a lie about what the work requires.

Give it something · say what you want · watch it arrive

The rhythm never varies, and that invariance is the single most important design decision in the program. Four doors, four different pieces of machinery underneath, one shape of gesture on top. A person who learns door one has learned door three, and they learn it without being taught, which is the only kind of learning that survives a six-week gap between sessions.

The home surface

Four full-bleed plates, each with one line of serif over it and a Manrope kicker above that. No icons. No grid of tools, no dashboard, no recent-files list, no tips, no what's-new. The doors fill the surface zone entirely and the plate behind each is a still from your own Spool — the most recent output of that door, dimmed to brightness .62 so the type stays legible over it. A door you have never used shows a neutral plate.

Specimen 05 · Home, and the same surface hovered

Door oneGive it a picture

Door twoGive it a voiceLast · 4 shots to a breath

Door threeGive it the shards

Door fourOpen the Spool

The sentence

Behind every door, the second step. A serif field at 19px, on Surface, with no visible box — just the caret and, once typed, the words. The cursor falls into a serif in this system and always has; a sans input here would make the prompt feel like a form field, and a prompt is not data entry. It is the only place in the program where a person is writing rather than choosing.

Three rules for the field. It never validates — every string is a legal prompt and the program has no opinion about your English. It never clears — after a render the sentence stays, because the second attempt is a small edit of the first and retyping it is an insult. And Return renders; Shift-Return makes a line, because the reverse trains a person to fear the Return key.

The particulars

One hairline under the sentence, labelled the particulars. Closed it is a line of text. Opened — 400ms, height only, no slide — it is every parameter in the graph, each with its current value, its native default, and one plain-English sentence about what moving it does.

Door one · a picture

The door that works first, and the one to build in phase one. Drop a still anywhere on the surface — the whole window is the target, with a 1px gold inset and nothing else as the drop affordance. No dashed rectangle, no cloud icon, no drag files here.

The image lands and the surface splits: the still on the left at its own aspect ratio, the sentence on the right. Under the still, four motion presets as words rather than a dropdown — a breath · a drift · a turn · a wind — each of which writes a starting sentence you then edit. This is the beginner's ramp and the expert's shortcut simultaneously, and it costs one row.

Door two · a voice

The door nobody else builds properly. Drop audio and the program listens before it renders. What comes back is not a waveform — a waveform is decoration here — but a schedule: a row of proposed shots with durations that land on real musical or breath boundaries.

Door three · the shards

Point at a folder. The program reads every fragment in it — duration, dominant motion, colour signature, whether a face is present and whose — and proposes an order. It does not ask you to sort them. It sorts them, shows its reasoning in one line, and lets you disagree by dragging.

The proposal appears directly in the Strip, already assembled, with the seam scores already computed. This is the joinery door, and its whole argument is that you arrive at a first assembly without having done any assembly. What you then do is judge seams, which is the only part a person is better at than the machine.

Four things that make it worth using twice

A generator is worth using once. What makes a program worth returning to is whether it remembered what you did, and whether it lets you judge the result properly. These four instruments are the difference, and they are where most of the engineering attention should go once the first frame is correct.

The Spool

The program's memory. Every render is an entry, and an entry is not a file — it is the output, the input that produced it, the full parameter set, the seed, the model hash, the wall-clock duration, and a lineage pointer to whatever it was derived from. It presents as a film of stills rather than a table, because a table of renders is unreadable by the fortieth row and a film is scannable at four hundred.

Specimen 09 · The Spool

411 entries · 3 shown

3.4s

411 · door one
seed 8842119
480×832 · 81f
wan2.2 a9f4c1
took 2:38
from —

3.4s

410 · door one
seed 8842118
480×832 · 81f
wan2.2 a9f4c1
took 2:41
from 404

11.2s

409 · door two
seed 8842117
480×832 · 81f
wan2.2 a9f4c1
took 7:52
from 398

Four hundred and eleven entries. Nothing running.Queued0Disc412 GB

Two gestures matter and no others. Again re-runs the entry exactly — same seed, same everything — which is how you verify the machine is still the machine after a system update. Again, but opens the sentence and the particulars pre-filled from that entry, which is how ninety per cent of real work actually starts.

The Spool is never a file browser. It does not show you the filesystem, it does not have folders, and it does not let you rename anything. It is a record, and a record you can edit was never a record.

The Strip

The clip being built, at the bottom of the window. 96px open. This is the entire editing model and it is deliberately thin: order, trim, and the seam between two shards. Nothing else. No tracks, no layers, no keyframes, no transitions, no titles, no effects, no audio mixing beyond the one track the schedule came from.

Specimen 10 · The Strip, with seams scored

9 shards · 8 joints · 1 flagged

01

02

03

04

05

06

07

Seven shards, forty-one seconds. One joint at 03 wants a look.Joints6Clean5Length0:41

The Seam Inspector

The instrument that separates a tool from a craft instrument. Click any joint and the Inspector opens inside the Hush — because judging a seam is exactly the task that requires the rest of the screen to stop existing.

The Hush

The signature state, inherited from the design system and non-negotiable. When something wants full attention, the rest of the surface takes blur(4–12px) and an ink veil at 15–25% — never pure black, never fully occluded, and tap-outside always returns.

Specimen 12 · The Hush

Door oneGive it a picture

Door twoGive it a voice

Door threeGive it the shards

Door fourOpen the Spool

Rendering shard four of nine.Queued5

The joint at 03 Does the arm carry through, or does it teleport? It carriesIt teleports

Queue and hold

Long renders are the normal case, so the program is built around absence rather than attendance. You queue as much as you like, in any mix of doors, and close the laptop.

The engine runs under a persistent agent and survives the window being shut, the app being quit, and — with the power adapter attached — the lid being closed. When you come back, the Ledger tells you what happened while you were gone in one sentence, and the Spool has the entries. There is no notification, no badge, no sound, and no welcome back.

And one deliberate omission that took discipline: there is no percentage on the render itself. A percentage invites you to watch, watching is worthless, and worthless watching is how an evening disappears. The Ledger says which shard of how many, and that is the correct granularity — it tells you whether to make tea or go to bed.

The parts nobody specifies, and everybody then invents badly

A program is mostly its edge states. The happy path gets designed carefully because it is the one in the mockup; the eleven other conditions get invented at two in the morning by whoever hits them first, and that is why most software feels coherent for ten seconds and improvised thereafter. So the states are enumerated here, all of them, with their exact copy.

The eleven states

Every surface in the program is in exactly one of these. The copy is literal — write it as printed, because the tone is the product as much as the layout is.

Four properties hold across all eleven. Every line is one sentence. Every line is in the past or present tense, never the future — the program does not promise. No line contains a number the program is guessing at. And no line asks a question, because the Ledger is a report, not a dialogue; questions live in the Hush where they can be answered properly.

The keyboard map

Complete, and deliberately short. A person who never touches the trackpad can do everything except drag a shard.

Nothing is bound to a bare letter except the four door numbers, because a bare letter fires while you are typing and the sentence field is the most important field in the program.

What it sounds like

Almost nothing, and the almost is load-bearing. The program makes two sounds in total, both off by default, both settable to silent permanently in one place.

No click on press. No whoosh on transition. No sound when a render starts, when a shard finishes, when a seam scores badly, or when a file drops. The reason is specific: this program runs for hours beside a person who is often listening to the audio they are cutting to, and any interface sound is a contamination of that.

Reach and legibility

The dark register makes contrast a real risk rather than a checkbox, so the numbers are fixed here. Ink on Surface is 13.9:1. Text on Surface is 11.2:1. Muted on Surface is 4.8:1, which clears AA for its size and is the floor — nothing in the program is dimmer than Muted, including placeholder text, which is Muted rather than something fainter.

Signal gold on Surface is 8.1:1, and gold is never used for body text regardless — it marks and it labels. The one place gold carries a lot of characters is the native-geometry values in the particulars, at 11px mono, which measures 8.1:1 and is a deliberate exception because those two numbers need to be the most findable text on that panel.

Every hit target is 32px minimum on the pointer, which is the desktop figure rather than the 44px touch figure, since the program declines below 1024px and there is no touch surface. The seam joints in the Strip are the exception and get special handling: they are 1px rules with a 12px invisible hit column, because a 1px click target would be a cruelty and widening the rule to 12px would make the Strip look like a fence.

Focus is a 1px gold ring at 2px offset, on everything, always visible, never removed for aesthetics. Tab order follows the four zones top to bottom, and within the surface follows reading order. The Hush traps focus while open — the one place in the program where focus is trapped, and it is correct there because the Hush exists precisely to exclude everything else.

Thirty-one components, and the things that will never be built

A component inventory is a promise about scope. Thirty-one is the whole program — if a thirty-second is needed, something in the design was wrong rather than incomplete, and the correct response is to find which of the thirty-one should have covered it. Every measurement below is in the token scale from Part I, so a change to the sentence size moves all of them together.

Every component, measured

The refusals

The design is defined as much by these as by anything above, so they are enumerated rather than left to taste. Each is a decision that will be argued against during the build, and each argument has the same correct answer, which is no.

The eighteen-point test

Run against any build before the interface is called finished. Any single failure is a blocker — not a note, not a follow-up.

1. Does the whole program resolve through the eight tokens, with no literal colour anywhere in the stylesheet?
2. Do both registers render every surface correctly, including the three Inspector judgement colours?
3. Is there any red, at any opacity, in any state?
4. Does the cursor fall into a serif when a person types a prompt?
5. Does the sentence survive a render — same text, still there, cursor where it was?
6. Does Return render and ⇧ Return make a line, never the reverse?
7. Are all four zones present, in order, at every width above 1024px?
8. Below 1024px, does the program decline in one line rather than attempting a layout?
9. Does the Ledger state every one of the eleven conditions in one sentence, in the specified tense?
10. Is there a percentage on any render anywhere?
11. Does the Hush blur rather than black, and does tap-outside always return?
12. Is exactly one thing Lifted at a time?
13. Does a Spool entry carry seed, model hash, duration and lineage — all four?
14. Does Again reproduce a six-week-old render byte-for-byte after a system update?
15. Does every seam score decompose into its four named terms?
16. Is Accept it available on every flagged seam?
17. Does the queue survive quitting the app and closing the lid?
18. With prefers-reduced-motion, is the sunburst still and the 700ms fade reduced to 120ms rather than removed?

Eighteen questions, all answerable in an afternoon, and a program that answers yes to all of them is the program this document describes. A program that answers yes to fifteen is a different program that resembles it, and the three it failed will be the three a person notices on the second night.