Before / after
Here's where we ended up. The toggle flips both panels so you can compare light and dark.
The new homepage is one chassis with three inset bays — Input, Scope, Output — wired together with signal-path lines. Light mode is warm amber on beige. Dark mode is green phosphor on near-black. Same chassis, two different rooms.
Below is the trail of how we got there, including the four candidates that didn't ship.
The comment that started it
About a week before this work happened, the v2 redesign had been live at /v2/. I sat with it and said something out loud:
The new style is super clean and smart but a bit on the flat matte side imo... does that make sense?
The oscilloscope theme — phosphor traces, signal grids, two-channel hierarchy — looked great in dark mode. In light mode it looked like a well-designed printed manual. Smart. Flat.
The first suggestion was "let's add motion." I pushed back — it wasn't a motion problem.
yes, but I think it's a light/contrast/visual language thing... dark mode pops more now that I think of it.
Same components, same layout, same type — but dark mode had visual punch and light mode didn't.
The diagnosis
Look at v2 in light mode. The trace color (green oscilloscope line) and the body text sit in roughly the same hue range — both desaturated, both quiet. Nothing grabs your eye.
In dark mode, the same trace glows against a near-black canvas. The trace and the text do completely different jobs — one emits light, the other sits quietly. That contrast is what makes dark mode feel alive.
The theme tokens were symmetric. The visual weight needed to be asymmetric. Light mode needed its own version of that contrast — warm, not green.
I didn't know what that should look like. So we did what we'd done once before on this project: ran several subagents in parallel and let them figure it out.
The pattern: subagents in worktrees
Two weeks earlier, when v2 was first being designed, we'd run six parallel agents on six different homepage concepts — Field Notebook, Broadcast Console, Type Specimen, Oscilloscope, Quiet Library, Live Transcript. Each got its own git worktree, branch, and dev server. They didn't know about each other. When all six were done I screenshotted them and picked a winner.
Oscilloscope won that round. That became /v2/.
The mechanism is git worktree add. Each agent gets a separate checkout on a separate branch in a separate directory. They install dependencies, run a dev server, screenshot themselves, commit, and never collide. When you're done, delete the worktrees you don't want.
I'd forgotten this was running in the background until I noticed the git activity and asked:
why are you using git so much? what is going on? lol
Six agents, six worktrees, six dev servers on six ports, all independent. It looks like git chaos, and it is — but the kind that converges on one answer instead of merging into mush.
Round 1: Path A vs Path B
For the light-mode problem, we kicked off two parallel spikes.
Path A — amber-on-chrome. Give light mode a warm accent color that does what green phosphor does in dark mode. Introduce amber/copper as the trace. Keep the layout. See if warmth alone fixes the flatness.
Path B — instruments-as-objects. More structural: instead of "the page is the oscilloscope," what if the oscilloscope is an instrument sitting on the page? A chassis with a dark face that stays dark in both themes. The page wraps it; the instrument keeps its identity.
Both shipped to a screenshot reel within an hour.
I looked at both:
I think both paths add something nice in the dark mode — amber livens up bottom, instruments as objects spice up the oscilloscope view.
Path A solved the color problem, Path B solved the structure problem. They weren't mutually exclusive.
I also said something that ended up being the key insight:
I love the light mode contrasting attempts, maybe we have different high contrast colors to attempt that aren't replay of dark mode?
Stop trying to make light mode feel like dark mode in a different palette. Let the two modes be different instruments in different rooms.
The donation pivot
While comparing Path A and Path B, I kept looking back at the original homepage — the one before v2. It had a 3D keyboard-key headline that flipped between Talk to your Mac / Talk to your iPhone / Talk to your Watch. Crisp and concrete. The clearest product sentence on the site.
v2 had elegance. The original had punch.
I'm starting to think that we wanna maybe blend this style with some of the components that we have from the original. I do think talk to your Mac and phone and watch are very powerful, you know, crisp explanation.
When a redesign feels right but doesn't land, look at what the previous version got right and bring it forward. Don't throw the old version away — take from it.
So I asked for v3, v4, and v5 — three ways to combine the original (rotating device hero, install card, screenshot well) with v2 (oscilloscope theme, signal table, phosphor traces). Three more parallel agents, three more worktrees.
Have agents figure out what they think this means.
Round 2: v3 / v4 / v5
Three subagents built three full homepages in parallel. About 40 minutes later I had three screenshots.
v5 lost first. Not bad, just unfocused:
I think the V5 is a little bit less appealing, it's a little bit less opinionated, it's a little bit too much of too many things, and then also when we go into like some of these other views the content gets like very light so scratch the v5.
When you blend three references halfway each, you get something everyone tolerates and nobody loves.
v3 vs v4 was harder. v3 had a clean structured layout — rotating device card in the center, screenshots flanking it, signal table below. Clear story.
v4 was a single panoramic chassis — Input bay left, Scope bay center, Output bay right — with signal-path lines wired between the three. Click the device key on the headline and all three bays rotate together: the install jack swaps, the waveform shifts, the screenshot changes. One state change, not three separate components doing the same thing.
Okay, so the V4 is emerging as my favorite, but the V3's kind of structured central component is also very strong... I really like it.
I sat with both for ten minutes. What pushed v4 over was the wires. Three cards with the same data still read as three cards. Three bays connected by visible wires read as one instrument. You can't see input/scope/output as separate pieces when there are chase lines pulling your eye left to right.
v4 won.
The palette pivot
v4 still used v2's palette: green phosphor in both modes, brighter in dark, dimmer in light. Same symmetric problem.
I wonder if there's a way for us to come up with like... if there's a way for us to kind of bring the color scheme closer to the amber beige you know kind of black gray you know kind of style. I think that could be an interesting kind of attempt now.
First spike: all-amber v4, both modes. Looked great in light mode. In dark mode it looked like a nightclub pretending to be a desk lamp.
I walked it back within a minute:
I love the warm amber for the light mode and then I think we can go back to the green phosphor for the dark mode. That would give us like nice diversity... we have a winner with the amber for light mode and phosphor for dark mode.
That's when the palette split got locked in. Light = amber on beige. Dark = green phosphor on near-black. Each mode has its own identity, not a recolor of the other.
Flip the toggle on that one a few times. That's the asymmetric palette in practice.
Polish at pixel scale
Once the big shape was right, the rest was small calls.
Wires too long. The right-side signal-path pulse was overshooting the screenshot well by a few pixels.
the ending of the little flowing kind of electron or electricity on the right side is going like just a couple of pixels too much to the right and so that if we could just like tighten it up a little bit.
64px → 52px on the wire span, both ends. Six pixels per side.
Too many LIVEs. v4 had LIVE indicators in four places: SCOPE bay eyebrow, OutputBay caption, SignalTable footer, and chassis footer. One LIVE is a signal. Four is wallpaper. Kept the chassis footer (TRIG · LIVE), removed the rest.
Patch bay → CLI rail (Mac only). The install card (the "patch bay") originally sat below the chassis as a standalone component. Two issues: it was redundant since the chassis already shows install per device, and on Mac specifically, developers want the CLI install path (npm i -g talkie-cli) surfaced alongside the DMG.
- Removed the standalone patch-bay from the hero.
- Inside InputBay, when Mac is active, added a
· OR VIA CLI ·divider with a BUN/NPM/PNPM switcher and copy button. - Other devices keep their normal install affordance.
The component still exists for sub-pages. It just doesn't show up on the home anymore.
Promoting v4 to /
Until this point, v4 lived at /v4/. The original home was still /, v2 was at /v2/, and v4 was a third sibling.
No, I think like what you need to do is figure out a way to like make this a main branch thing, meaning not a /V4 sub path, but you know, kinda like take over the the main path. That would be my preference.
The route shuffle was small:
app/page.jsxnow renders v4'sHomePage.app/downloads/page.jsxpromoted from/v2/downloadsto/downloads.app/v4/deleted. Nobody had bookmarked it./v2/*untouched. Subroutes can migrate later.
I also extracted a MainShell wrapper — NarratorProvider + SiteShell + the canvas root div — so / and /downloads share layout without duplicating boilerplate. /v2/* keeps its own.
What I learned
A few things worth remembering next time.
Spike, don't iterate. Iterating on one design biases you toward what you already have. Running three independent versions in parallel shows you what was essential and what was incidental. The ones that get cut teach you as much as the winner.
Subagents in worktrees work. Each agent gets a worktree, branch, dev server, and port. No coordination overhead. They don't merge until you pick one. If your project has a fast dev server, you can run six versions of your homepage at the same time.
Take from the previous version. When v2 felt elegant but flat, my instinct was "fix v2" or "rewrite." Both wrong. The right move: keep v2's vocabulary, grab what was working in the original (the rotating device headline), and combine them. The version before this one was already getting something right.
Asymmetric beats symmetric. v2 treated light and dark mode as the same composition recolored. The fix was giving each mode its own identity: one is a warm desk, the other is a cool studio. Same chassis, different rooms.
Trust the small calls. When something feels six pixels off, it usually is. The wire span, the LIVE label count, the patch-bay placement — none would move a metric. They change how the page feels, which is the thing we're actually designing.
The homepage is live at /. Three evenings of conversation, six parallel spikes, twelve screenshots, and one comment — "a bit on the flat matte side" — that turned out to be the whole brief.