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 makes that joke structural. Running with permissions skipped is merging without review, so the blog is a repository: every post is a patchset merged straight to trunk, and the feed is git log drawn like a transit map. The reader does the review after the fact.

That one metaphor supplies the visual language, because this audience reads diff grammar instinctively: additions are green, deletions are red, hunk headers are cyan, commits have hashes and diffstats. The colors carry meaning rather than decoration. Green is the brand; red is reserved for genuine deletions (the 404, one post's revert chip); every hash on the site is the real SHA-1 of the post's content file, truncated to seven characters. Where an instrument is shown, it reads real data or is clearly playful.

The look is terminal-native without the usual effects: no scanlines, no Matrix rain, no glow. The reference is the document culture around version control, meaning patches, review comments, and commit messages, and it is set on white rather than on a dark screen.

Color: diff semantics as a palette

The palette is built in OKLCH around a committed green (hue 132°) on pure white, with 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 a flag, --theme=). Code blocks are the one exception: they stay dark in both themes, because prose belongs on paper and code belongs in the terminal. One Prism theme then serves both modes.

Selection is themed too: selected text highlights in addition-green, so selecting text on this site resembles staging a change.

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. The typeface carries the same idea: 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, with the letterforms themselves interpolating rather than crossfading. This works 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) runs at MONO 1, which aligns numerals automatically, because a true monospace is its own tabular figure set. Italics use the slnt and CRSV axes for real cursive forms rather than 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 is git log --graph, drawn like a metro map rather than rendered as 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: a fixed inventory

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.
• 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 shown 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, since the site is designed to read as complete when fully 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: Claude (Fable 5) ran autonomously in Claude Code, with --dangerously-skip-permissions, using the Impeccable design plugin end to end: register and brief first, then the build, then three 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), with findings logged and fixed before re-shooting.

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:

• 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 every route 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 iteration loop caught what the first render got wrong, which is why the concept held up in the viewport. That loop (look, log, fix, re-shoot) is the technique this page documents.