How this site is built

Most of this page writes itself. Version numbers, file sizes, contrast ratios and the motion curves are read from the site’s own source when it is built, so they describe this build and not some earlier one.

Constraints

Every page is static HTML, rendered before it is deployed. A page with nothing to operate ships no JavaScript files. Pages with working figures load React when the first figure scrolls into view, and not before; the footer of each page says which kind you are on.

Both themes, light and dark, are checked against WCAG 2.2 AA. Nothing moves until you ask it to, and with reduced motion turned on, figures change state without animating.

Pages without JavaScript

The site is built with Void 1.1.11. Essays and lab plates are markdown, with their figures written as React components and embedded as islands; the index pages and this colophon are TSX. All of it is prerendered. There is no client-side router: links are ordinary anchors, each one loads a new document, and where the browser supports cross-document view transitions, the running head and entry numbers carry over from page to page.

What the build does. Source pages go through Void’s prerender and the site’s build plugins. Out come 16 HTML pages (one of them the not-found page), one stylesheet shared by all of them, three font files, and JavaScript only for pages with islands.

The build plugins do the plumbing. One attaches each markdown file’s front matter to its page, one tidies the markup @void/md generates, one gathers every component’s CSS into the single stylesheet, and one writes the RSS feed, the sitemap and the social cards, then runs the checks described below.

What figures cost

Each row is one page as a first-time visitor downloads it, with every figure on it loaded. HTML, CSS and JavaScript are counted compressed with gzip, as they travel; fonts are counted as stored. Measured on 2026-10-20 with pnpm qa:measure.

On pages with figures, React and the figure code come to 79.3 kB to 91.1 kB of JavaScript once every figure has loaded. Every other page loads no JavaScript files.

The footer also measures the page you are reading, in your own browser: open “Measured here” for the file-by-file list. Files your browser already holds in memory report zero bytes and are listed as cached.

Two typefaces, three files

Literata sets everything written as prose: titles, body text and summaries. Recursive sets the interface and every literal value. Its MONO axis runs from a sans, used for labels and buttons, to a monospace, used for numbers, dates, paths and code, so one file covers both registers.

Each file is subset to the 213 characters the site allows and keeps only the variable axes the design needs; the others are pinned. A character outside the set would be drawn in some other typeface, so the build warns about any it finds. Arrows, ticks and crosses on this site are drawn as SVG for the same reason.

On a first visit the two preloaded files come to 79.0 kB. The italic is fetched only by pages that set italic text. Both families are released under the SIL Open Font License, version 1.1: read the licences for Literata and Recursive.

Before the fonts arrive, text is set in local fallback faces adjusted to Literata’s and Recursive’s metrics, so when the real faces swap in, lines barely move. The overrides were computed from the subset files:

@font-face {
  font-family: "Literata Fallback Georgia";
  src: local("Georgia");
  ascent-override: 109.3141%;
  descent-override: 28.6056%;
  line-gap-override: 0%;
  size-adjust: 107.6714%;
}
@font-face {
  font-family: "Recursive Fallback Arial";
  src: local("Arial"),
       local("ArialMT"),
       local("Helvetica"),
       local("Liberation Sans"),
       local("LiberationSans"),
       local("Arimo");
  ascent-override: 83.0413%;
  descent-override: 21.853%;
  line-gap-override: 0%;
  size-adjust: 114.4009%;
}
@font-face {
  font-family: "Recursive Mono Fallback Courier";
  src: local("Courier New"),
       local("CourierNewPSMT"),
       local("Liberation Mono"),
       local("LiberationMono"),
       local("Cousine");
  ascent-override: 95.0155%;
  descent-override: 25.0041%;
  line-gap-override: 0%;
  size-adjust: 99.9837%;
}

Colour, checked

The palette is a short list of tokens: warm paper, graphite ink, a few inks kept for figures, and one eucalyptus green, kept for the things you can operate, the current value in a figure and the AI marker. Each foreground is checked against every surface it can sit on, in both themes, and pnpm check:tokens fails if any pair drops below its minimum. Text needs 4.5:1. Control borders need 3:1.

Every pair the check asserts, light and dark, and the decorative rule, which it records but does not check. Each ratio is printed in the foreground it measures, on the surface it measures; border colours, which never set text, are shown as a line. Empty cells are pairs the design never uses.

Motion that asks first

Motion is defined as tokens too: four cubic Bézier easings and three springs. Each spring is simulated from its stiffness, damping and mass, then compiled into a CSS linear() easing, so the same spring can drive a CSS transition or a figure’s own animation.

The motion tokens. Easings are sampled from their cubic Bézier values. Springs are drawn from the model that generates their CSS, and their durations and overshoot are computed from it.

Durations stay short: colour changes on hover take 160 ms, interface transitions 240 ms, and figure marks 400 ms.

If your system asks for reduced motion, nothing slides, scales or draws itself in. Figures jump straight to their new state, simulations advance a step at a time, page-to-page transitions are switched off, and only brief colour fades remain. Whatever the setting, no figure moves on its own.

Checked on every build

pnpm build ends by checking the HTML it has just written, and stops on any of these:

• a link to one of my GitHub repositories outside the allowlist of 23 public names, or an email address anywhere in the output;
• a footer that says “no JavaScript files” on a page that loads a script, or an island count that does not match the page;
• an island inside a paragraph, a link that opens a new tab, or one view-transition name used twice on a page;
• a page without exactly one title, description and h1, a canonical link that does not match the page, or a language other than en-AU;
• two entries with the same number.

Two checks only warn, so a stray character never blocks a deploy: characters outside the font subsets, and files over budget. The budgets are 30.0 kB for the stylesheet, 14.0 kB for an index page and 30.0 kB for an essay or plate, all compressed, and 60.0 kB for a social card.

Outside the build, a browser-driven suite runs axe on every page in both themes and walks key pages with the keyboard, checking each stop for a visible focus ring. It also looks for sideways scrolling at phone and desktop widths, loads every page with JavaScript off, and repeats the motion checks with reduced motion on. Unit tests cover the colour maths, the spring compiler and the repository list, and they assert the numbers quoted in prose. The page weights are measured rather than asserted: pnpm qa:measure writes them.

Reading this site

A few conventions recur in the essays and the lab.

Versions

void

1.1.11

@void/react

1.1.11

@void/md

1.1.11

react

19.3.1

vite-plus

1.3.0

built

2026-10-20

commit

d95ece6