How this site is built

This is a colophon — a note about how the thing you are reading is made. It is also the simplest possible post: plain prose, no charts, no custom components, just to prove the writing path works end to end.

The stack

The site is a Next.js app on the app router, built as a static export. There is no server at request time: next build runs every data loader once, writes plain HTML into _site/, and that folder is the whole website. Every page you land on was rendered ahead of time and handed to you as a file. Styling is Tailwind CSS, with the typographic defaults replaced by a token-themed prose style so an article like this one inherits the same palette as the rest of the site.

The look

The visual system is called "the instrumented studio," and it comes down to a handful of fixed values. The text and dark-mode ground is a petrol ink, #10242E; the light ground is a cool drafting off-white, #F4F6F7. Three accents each carry a single meaning and are never used decoratively: amber for links and anything live, green strictly for shipped-with-evidence states, and violet only for agent-related tags. Dark mode is designed against those grounds rather than inverted from the light one.

Type does the rest of the work. Headlines are set in Bricolage Grotesque, body text in IBM Plex Sans, and every number, label, and timestamp in IBM Plex Mono with tabular figures so columns line up. All three are self-hosted at build time, so nothing is fetched from a font CDN when you visit.

The languages

The site ships in three locales — English, Simplified Chinese, and Urdu — and the routing that picks between them keeps no state. The locale lives entirely in the URL: /en/, /zh-Hans/, /ur/. A visit to a prefixed URL renders that language, full stop, so a shared link always shows what the sender saw. The bare / is a real, indexable English page that negotiates your browser's languages only to offer a soft redirect. There is no locale cookie and nothing in local storage. Urdu is right-to-left; the layout is written with logical properties so it mirrors correctly, while data visualizations stay pinned left-to-right.

That is the whole machine: prerendered HTML, a small set of honest tokens, and a URL that means exactly what it says. The next post puts it to work.