← Back to the letter

Colophon of the Build · STRATUM

How the record was set

A short account of the brief this site answered, the one technique that carries its look, and what three passes of hostile self-critique changed.

01 The brief

The assignment was stratum, the finance and research credibility vertical: a boutique quantitative research letter, rendered as a scroll-driven data essay on one public, citable dataset. Scientific-plate aesthetics, diffraction motifs, mono data tables set like lab records, needle-drawn charts on seismogram paper. Palette fixed at paper, ink, teal ink as the single stroke, and depth blue reserved for data series only. Type fixed at Newsreader and IBM Plex Mono.

The register chambers were Pattern at Scale and The Quiet Page. The thing to prove: honest data storytelling with editorial standards, the vertical that buys trust from serious clients.

The dataset chosen is the NOAA Mauna Loa monthly mean CO2 record, the Keeling Curve, 820 monthly means from 1958 to 2026. It was picked because it holds two rhythms at two scales at once: a hundred-part secular climb and a yearly six-part breath. Pattern at scale, literally, in real public-domain measurement. The data was fetched once, processed by a build script, and baked to a local JSON; every derived figure is documented in the appendix.

02 The signature technique

Every chart is drawn to canvas from the baked data, and every line is laid twice: a faint offset ghost pass with sub-pixel jitter for the feel of a needle on paper, then an exact primary pass that never moves a real data point. The jitter lives only on the ghost, so the record stays honest while the ink looks hand-laid. The same routine draws straight for the 820-point series and smoothed, through a Catmull-Rom spline, for the yearly cycle.

// hand-drawn line: faint jittered ghost, then an exact primary pass
function needle(ctx, pts, color, width, smooth) {
  ctx.save();                        // ghost: texture only
  ctx.globalAlpha = 0.28; ctx.strokeStyle = color;
  ctx.lineWidth = width * 0.9;
  ctx.beginPath(); tracePath(ctx, pts, smooth, true); ctx.stroke();
  ctx.restore();

  ctx.save();                        // primary: geometrically exact, no jitter
  ctx.strokeStyle = color; ctx.lineWidth = width;
  ctx.beginPath(); tracePath(ctx, pts, smooth, false); ctx.stroke();
  ctx.restore();
}

main.js · the needle. Charts draw on scroll via GSAP ScrollTrigger; on a wide screen the series reads out any month under the cursor.

Around the charts sit the rest of the plate: a diffraction-ring instrument motif behind the masthead, registration corner marks framing each figure, a stratigraphic scroll rail down the left margin that indexes the plates, and a print stylesheet built so the letter can actually be printed.

03 Three passes of critique

I
Found.
The seasonal cycle was drawn as straight segments and read mechanical. The diffraction motif was too faint to register. The charts were inert; a data letter should let you read the instrument.
Changed.
Smoothed the seasonal curves with a Catmull-Rom spline. Rebuilt the masthead motif as a true instrument plate with crosshair and radial ticks.
Upgrade.
A read-the-instrument crosshair on Figure 1: hover to read the exact month and value.
II
Found.
Plate I emptied out beside its tall figure, a dead left column. A momentary CDN drop threw five network errors, threatening the zero-error release gate.
Changed.
Added a third marginalia note that also advertises the crosshair. Vendored GSAP, ScrollTrigger and Lenis locally so no external flake can break the gate, with a static fallback if a library is ever missing.
Upgrade.
A stratigraphic core-sample rail down the left margin, indexing the plates by their real positions. A publication named STRATUM should carry a core sample.
III
Found.
Verified the two unseen figures. The decadal bars and the lab-record table held up, including the hollow, honestly-marked open decade. Nothing else broke.
Changed.
Confirmed the reduced-motion path draws every chart complete and keeps the page dignified and still. Confirmed the error gate reads clean at every viewport.
Upgrade.
Registration corner marks on every figure, framing each chart like a mounted plate.