Secretary — build notes for the 37% optimal-stopping desk

Colophon · How it was made

Notes on building the optimal-stopping problem as a working desk — the palette, the faces, the code behind the 1/e peak.

00 The concept

One post to fill, a queue of twenty-four applicants, and an unforgiving rule of the room: interview them one at a time, decide on the spot, and never call anyone back. Secretary is that dilemma made playable — hire or reject with a keystroke — sitting beside a live Monte-Carlo experiment that runs the optimal strategy ten thousand times and plots exactly why patience should end at thirty-seven per cent.

The fictional brand is a mid-century personnel office; the audience is anyone who has ever agonised over when to stop looking. The page has one job: to make the strange constant 1/e feel inevitable — first by letting you fail at the decision, then by proving the maths never budges.

01 Palette — argued from the subject

Warm office paper, a green ledger-rule, and one decisive stamp of terracotta. Nothing decorative: the green rules and marks the record; the terracotta only ever means chosen.

Office ecru#E8E2D4 — the ground: foolscap under a desk lamp.
Ledger green#3A6E64 — rules, ticks, the curve. Lines & marks only.
Deep green ink#2B5148 — the readable body-weight of the green.
Stamp terracotta#C25A2E — the hire. The 1/e peak. Used sparingly.
Terracotta ink#9F461F — the accent, darkened for small text.
Carbon ink#26241E — body copy, well past 4.5:1 on ecru.

The brief's line/mark accent — ledger green — fails as small text on ecru, so body copy sits in carbon ink and secondary text in a derived deep-green; the bright green and terracotta are reserved for strokes, ticks and the single stamp.

02 Type — the lecture and the ledger

Newsreader
Display & prose. A literary, slightly inky serif with a true italic — the voice of memoranda and applicant names.
IBM Plex Mono 58/100
Data, labels, scores, axes. The typewriter register — every number that the office would have typed.

Serif italic carries the human side (names, verdicts, the essay); the mono carries the mechanical side (files, counters, coordinates). Weight, case and tracking do the ranking — no third face needed.

03 Technique — two experiments, one desk

The hiring desk (DOM state machine)

Twenty-four applicants are shuffled and given distinct hidden assessment scores. A progress strip marks the look window at round(n/e) = 9 of 24. Each turn you learn the score and whether it is the best seen so far; reject advances irreversibly, hire seals the post and reveals the true rank. A quiet cue whispers what the rule would do; an autopilot demonstrates the optimal play on load and hands control to you the instant you touch a button.

The success curve (Monte-Carlo, canvas 2D)

The signature. On load a canvas runs the optimal strategy across every look-fraction k/n for forty-candidate queues, thousands of trials, tallying wins. The empirical dots climb a dashed theoretical curve −r·ln r; a terracotta marker stands at 1/e ≈ 0.3679, and the measured peak lands there at ≈ 37% every time. DPR is capped at 2, the canvas resizes to its box, the loop pauses on document.hidden, and reduced-motion draws a fully-seeded static frame.

The signature element: chance, replayed ten thousand times, drawing the same peak at 1/e — the exact fraction where the desk's hesitation turns into the right guess.

04 Iteration log

Pass 1 · Craft

Rhythm, contrast, copy

Tuned the type scale so the applicant name, the big mono score and the verdict form a clear hierarchy. Verified every text token clears 4.5:1 on ecru and demoted ledger-green to strokes only. Rewrote all twenty-four applicant lines into specific, period-accurate one-liners (no filler) and set the progress-strip 37% cutline label so the look/leap boundary reads at a glance.

Pass 2 · Depth

The rule made legible

Enriched the signature: added the dashed −r·ln r theoretical curve under the empirical dots so law and measurement sit together, and labelled the live peak percentage beside the 1/e marker. Added the autopilot that plays the optimal strategy on load (premium resting state, then yields to the cursor) and a live "rule cue" that recommends reject/hire each turn — the second-read detail is that the recommended button gains a dashed inner outline.

Pass 3 · Hardening

375px, motion, focus, resize

Collapsed the desk to a single column under 860px and stacked the masthead under 520px; confirmed the 24-tick strip and wordmark stay inside a 375px viewport with no overflow. Reduced-motion now skips the autopilot and animation and paints a seeded static curve. Checked :focus-visible rings on every control, canvas resize redraws crisply at DPR≤2, and removed one ornament — the redundant secondary hairline beneath the masthead, since the 1.5px rule already divides it — leaving one clean ledger line. Final copy read end to end. A late fix anchored the highlighted peak dot to the bin nearest 1/e, so Monte-Carlo jitter on the flat maximum can no longer drift the marker off the law.