How this was made

The concept: merged without review

The domain is Claude Code's --dangerously-skip-permissions flag — YOLO mode, where the agent acts without asking first. MAINLINE takes that joke and makes it structural: running with permissions skipped is merging without review. So the blog is a repository. Every post is a patchset merged straight to trunk. The feed is git log drawn like a transit map, and you, the reader, are doing the review after the fact.

That one metaphor supplies the entire visual language, because diff grammar is something this audience parses instinctively: additions are green, deletions are red, hunk headers are cyan, commits have hashes and diffstats. None of it is decoration — the green is the brand, the red is reserved for genuine deletions (the 404, one post's revert chip), and every hash on this site is the real SHA-1 of the post's content file, truncated to seven characters. Honesty as an aesthetic: if an instrument is shown, it reads real data or is clearly playful.

Terminal-native, but no hacker cosplay: no scanlines, no Matrix rain, no glow. The reference isn't a film set's idea of a terminal — it's the document culture around version control: patches, review comments, commit messages. Deadpan confidence, set in daylight.

Color: diff semantics as a palette

The palette is built in OKLCH around a committed green (hue 132°) on pure white — chroma exactly zero on the background, so the mood lives entirely in the brand colors. Four roles, each with a semantic job:

• --greenoklch(0.53 0.14 132) · additions · links · the trunk
• --redoklch(0.53 0.17 27) · deletions only — never decoration
• --cyanoklch(0.47 0.09 220) · hunk headers · hashes
• --amberoklch(0.62 0.12 75) · fourth chart series · numbers in code
• --inkoklch(0.24 0.02 135) · body text, ≥10:1 on white
• --code-bgoklch(0.17 0.012 135) · the terminal panel — dark in both themes

Two full themes ship (auto/light/dark, the switch in the header is styled as the flag it is: --theme=). One deliberate exception to theming: code blocks stay dark everywhere. Prose lives on paper; code stays in the terminal. That's the concept doing the design work — and it means one Prism theme serves both modes.

Selection is themed too: select any paragraph and it highlights in addition-green. On this site, selecting text looks like staging it.

Type: one variable font, prose ↔ terminal

Everything on this site — headlines, body, code, labels, charts — is a single font: Recursive, Arrow Type's variable family with a MONO axis that interpolates continuously between a humanist sans and a true monospace. That's the concept in a typeface: prose and code are the same material, at two ends of one axis.

The homepage wordmark demonstrates it: on load, the title renders as a monospaced terminal string, then morphs into an 830-weight display sans — the letterforms themselves transitioning, not crossfading. It's done by registering custom properties with @property so they interpolate, then driving font-variation-settings through them. Try the axes yourself:

@property --wm-mono { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --wm-wght { syntax: '<number>'; inherits: true; initial-value: 830; }

.hero h1 .w {
  font-variation-settings: 'MONO' var(--wm-mono), 'wght' var(--wm-wght);
  transition: --wm-mono 1000ms var(--ease-expo), --wm-wght 1000ms var(--ease-expo);
}
html.pre-morph .hero h1 .w { --wm-mono: 1; --wm-wght: 480; }

Body text runs at MONO 0, weight 430, 17.4px/1.72, on a 66ch measure. Code and every data surface — hashes, metadata, tables — run at MONO 1, which buys perfectly aligned numerals for free, because a true monospace is its own tabular figure set. Italics use the slnt and CRSV axes: real cursive forms, not an obliqued roman. One 305 KB woff2 replaces what would otherwise be three font families.

The spine: git log as a transit map

The homepage gutter carries a continuous 2px trunk with a commit node per post — the feed literally is git log --graph, engineered like a metro map rather than rendered like ASCII art. In the hero, two branch curves sweep in from the right edge and converge into the trunk at a merge node beneath the wordmark.

The trick that keeps it honest across every viewport: the hero art is a fixed-pixel SVG anchored to the same 84px gutter grid the feed uses, so the trunk in the hero and the trunk in the feed are always collinear. The curves crop gracefully on narrower screens and yield entirely below 860px. Each path declares pathLength="1", which makes the draw-on animation a one-liner:

.hero-art .draw {
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 950ms var(--ease-expo);
}
html.pre-draw .hero-art .draw { stroke-dashoffset: 1; }

Below the hero, each feed row draws its own trunk segment and node with plain CSS, so the graph needs no JavaScript measurement, survives any content length, and costs nothing to scroll.

Motion: an inventory, not an atmosphere

Every animation on the site is on this list; if it isn't listed, it doesn't move.

• The wordmark morph and the spine draw-on — once, on the homepage, on load.
• Pull quotes sweep their addition-green highlight when first scrolled into view.
• Charts settle in with a 500ms fade-rise, once.
• Micro-feedback: link hover tints, the feed's hover state (rows tint green, the node fills, a + steps in — staging, as a hover state), copy-button confirmation, the reading-progress hairline on posts.
• Page navigations cross-fade via the View Transitions API where supported.

All of it collapses under prefers-reduced-motion — the site is designed to be complete when perfectly still — and a ?snap=1 query parameter forces the settled state for screenshot tooling.

How it was built

No framework, no build step, no templates: hand-written HTML, one CSS file, one small JS module (about 6 KB before the syntax highlighter). Fonts are self-hosted woff2 with licenses shipped alongside. Code highlighting is Prism core plus language grammars, restyled with a theme written for this palette. The benchmark charts in posts are hand-coded inline SVG that read their colors from CSS custom properties, so the same chart source renders native in any candidate's palette.

The process, honestly: Claude (Fable 5) ran autonomously in Claude Code — fittingly, with --dangerously-skip-permissions — using the Impeccable design plugin end-to-end: register and brief first, then the build, then three fine-toothed iteration passes. Each pass was a headless-Chromium screenshot sweep (desktop and mobile, fold and full page, light and dark, reduced-motion, and a 360px overflow check), findings logged and fixed before re-shooting. The sample posts are Fable-written evaluation content: the benchmark numbers in them are illustrative, not measurements — the advice is real.

The five sibling candidates — a phosphor CRT shell, a print offprint, a three.js latent-space, an acid editorial, and a mission-control cockpit — were built on the same content. Links to all candidates are injected at deploy time.

Iteration log

Findings from the three passes over this candidate — the real ones, in the spirit of showing one's work:

• Pass 1 — mechanics. The hero graph shipped broken: right-anchored and auto-scaled, so the trunk missed the feed gutter and the merge node collided with the flag chip. Rebuilt as a fixed-pixel SVG whose left edge tracks the content column, with the branches redesigned to glide nearly horizontal beneath the copy — geometry that survives any hero height. Also caught: a CSS cascade leak that painted the TL;DR's +++ cyan (two ::before rules fighting property-by-property), a trunk segment collapsed to zero height by align-items: center, and the flag chip wrapping mid-flag on phones (now a proper shell continuation with a trailing ).
• Pass 2 — design. Dark-theme audit across every block: the terminal panels vanished into the dark page, so a --code-edge hairline exists only in dark mode. A drive script verified the states that screenshots can't: copy buttons write the real clipboard, the theme flag persists across navigation, every feed row takes a visible focus ring. The wordmark morph gained its hover: touching the title phases it back toward the terminal.
• Pass 3 — depth. A 360px overflow audit across all eight routes in both themes (page-level scroll clean; code and tables scroll inside their own containers), keyboard and landmark sweep, microcopy voice pass, and the final light/dark/reduced-motion screenshot matrix.

The honest summary: the concept survived contact with the viewport because the iteration loop caught what the first render got wrong. That loop — look, log, fix, re-shoot — is the actual technique this page documents.