[ SITE_RAIL ]
> Instead of a header — vertical tabs, tight to the left edge, with the section's pages beside them
> A header bar is a row of links with nowhere to put anything else, and it charges the same band of height on every screenful for the privilege. The proposal is to take the navigation off the top and stand it up on its side: a column of vertical tabs, hard against the left edge, the way index tabs run down the edge of a notebook.
> Six treatments were tried. This is the one that survived, and it is a merge of two of them: the shell that carried the whole header on one rail, and the nestedrail that kept a section’s pages permanently beside it. The shell alone made every navigation two clicks and a scrim over the article; the nested rail alone had no idea where the reader was. Together: every destination is one click, and the rail answers where am I as well as where can I go. It costs about 5.25rem of width the reading measure was not using.
[ TWO STATES, TWO DEVICES ]
A rail can be open on a section the reader is only looking at, so open and here are different states and never share a device. Here is the solid accent fill — on the section tab and on the page, so section and page share one colour. Open but elsewhere is a 4px accent edge and full-strength text. Choosing a tab never navigates; the links do.
Both devices are built on the accents, which stay saturated in every theme. Neither is a surface pair — `bg-black` against `bg-zinc-900` is a 3% lightness difference on paper, which is how the first version of this shipped invisible under sketch. The design-system package now asserts that rule as arithmetic in its contrast gate.
[ THE RAIL ]
> Left: a reader on a talk. Right: a reader on the idea workbench. Click any section tab — the pages beside it change, the location does not. Arrow keys move along the sections.
[ A TALK ]
2026-09-03 · 40 min · no header above it
[ AN IDEA ]
2026-09-03 · draft · no header above it
[ WHAT WAS CUT, AND WHY ]
| Treatment | Why it did not survive |
|---|---|
| Shell | Two clicks and a scrim for every navigation; open and here were the same state. Its wordmark and controls live on here. |
| Nested | The right geometry with no location. Merged into this. |
| Flush / Split | The same rail with a panel instead of a second rail — the panel is the dropdown the header already has. |
| Protrude | A tab half off the screen is half a target. |
| Sliver | Nine pixels of colour is an unlabelled nav; colour-only selection fails anyone who cannot tell the accents apart. |
| Blades (7) | The geometry exploration. Fans, folds and stacks are furniture, not navigation; the top ribbon is the header with a drop, which the header can grow on its own. |
| Code tabs | Not navigation at all — a content switcher. Moved to the design-system package as CodeTabs, in --ds-* roles. |
[ BEFORE THIS REPLACES THE HEADER ]
- > Fixed to the viewport. This is a box in a sandbox; the real rail is position: fixeddown the left, the page scrolls independently, and the reading column is re-centred against the remaining width rather than the viewport — at 1280px the tags page’s 7xl measure meets the rail.
- > Small viewports. A vertical rail needs height. Below lg the existing burger drawer stays — the rail is the desktop shape, not the only shape — which means two navigation systems until one is retired.
- > The controls. SearchButton is a bordered field with a ⌘K key cap and ThemeSwitch has three glyphs; the stand-ins here are icons. Both need a rail-width form, and Escape / focus-return from useDrawer if anything ever slides out again.
- >Semantic roles. This speaks the blog’s vocabulary (brutalist-*, zinc-*) and its two themes; the package addresses --ds-* roles across a four-rung ladder. Promoting the rail means a pass over every class, and a decision about per-section colour — the ladder has hierarchy roles, not identity roles.
- > Visual baselines. Replacing the chrome re-baselines every page snapshot in tests/visual.spec.ts.