/colophon/the site as evidence

How this site is built for three readers

I sell the diagnosis that most digital experiences fail their machine readers. So this site is constructed as the counter-example, and every claim on this page is verifiable from your browser right now.

The stack, such as it is

Static HTML, CSS and a little JavaScript, built with AI assistance under my direction. No framework, no build pipeline, no CMS, no tracking, no cookies. Hosted on Netlify. Every page is a complete document: all content arrives in the initial HTML response, JavaScript only adds enhancement on top. Turn JavaScript off entirely and you lose the interactive demonstrations, not one word of content. That single decision is what most enterprise stacks get wrong, and it's the subject of this essay.

What each reader gets

People get fast pages (three small font families, a handful of images, and inline SVG are the only assets), visible keyboard focus, honoured reduced-motion preferences, and semantic landmarks throughout.

Google gets clean titles and descriptions on every page, canonical URLs, a heading hierarchy that matches the actual document structure, schema.org structured data (Person, Book, Article as appropriate), and a sitemap.

AI assistants get everything above plus an explicit welcome: a robots.txt that names and allows GPTBot, ClaudeBot, PerplexityBot and Google-Extended, and an llms.txt, a plain-language index of this site written for language models. The homepage frame rebuilds any visitor's view into exactly what these readers receive, derived live from the page's own markup.

Watch this page fetch itself

Below, this page requests its own URL and prints the opening of the raw response, the same bytes any crawler receives. Note that the content is simply there.

GET /colophon/ · the response begins:

Fetching…

For contrast, here is the pattern the JavaScript-shell sites return. This is a representative reconstruction of what several major Australian brands actually serve to crawlers, anonymised:

GET / · a typical client-rendered response, in full:

<!DOCTYPE html>
<html>
  <head><title>Loading…</title></head>
  <body>
    <div id="root"></div>
    <script src="/static/js/main.8f3a1c.js"></script>
  </body>
</html>

That's it. Every product, every rate, every carefully approved sentence lives behind that script tag, invisible to any reader that doesn't execute JavaScript. Google renders it. Most AI crawlers don't.

The design system, briefly

Type is Instrument Sans everywhere a person reads, one family from the biggest headline to the smallest caption with weight doing the work, and JetBrains Mono reserved for the machine layer: metadata, paths, and anything a crawler would also see. Paper is a bright warm white, ink is near black, and the three readers own the palette: signal orange for people, cobalt for search, green for assistants, fused in the spectrum bar that runs along the top of every page and through the hero's slow aurora. Section eyebrows are the site's own URL paths, because the information architecture is the argument.

Why it matters beyond vanity

This site is the cheapest consulting artefact I own. When I tell an executive their experience is invisible to its third reader, the next question is always "what does passing look like?" The answer is one URL. If you want the same diagnosis run on your own estate, start here.