How this was made

Colophon

Every choice on this site is written down somewhere. This page is that somewhere — the principles, the tokens, and the checks that have to pass before anything reaches the web.

Principles

Ship it before it’s clever.: A shipped thing that works beats an elegant thing that doesn’t exist. Version numbers are cheap.
The grid is the argument.: Structure carries the meaning. If a layout needs an effect to be legible, the layout is wrong.
Metadata is content.: Stack, status, year, build number — these tell you as much about a project as the description does. They get typeset, not hidden.
One accent, used rarely.: The oxblood accent means something because it is scarce. The moment it decorates, it stops signalling.
Nothing moves without a reason.: One deliberate animated moment. Everything else is still.

Colour

Warm neutrals, never grey: the ink is slightly brown and the paper slightly cream. One accent, an oxblood, carries every signal on the site — the hero name, the current nav item, a quotation rule. The swatches below are drawn from the live tokens, so they follow whichever theme you are reading in.

--paperPage background#FAF8F4 and #12100E
--paper-raisedInset surfaces#F2EEE7 and #1B1815
--inkBody and headings#14110F and #F2EEE7
--ink-mutedMetadata and support#6B635C and #948B82
--ruleHairlines#DDD6CC and #2E2A26
--signalThe accent#4B1113 and #C85F63

Values are given light first, then dark. Dark follows your system setting unless you choose otherwise with the control in the header.

Type

Three families, one job each, plus a serif reserved for the mark. The split is deliberate: the technical voice lives in metadata — mono, uppercase, tracked — and the editorial voice lives in everything else. Keeping that boundary sharp is what stops the site drifting into a terminal aesthetic.

Display and headingsSpace GroteskVariable, 300–700. Set at −0.03em on the largest sizes.

Made by knowlezi.

Body and longer readingInterVariable, 100–900. Line height 1.65, measure capped at 68 characters.

A useful website needs a manageable way to keep its information accurate.

Metadata onlyJetBrains MonoUppercase, tracked 0.12em. Never sets prose.

BUILDING · 2026 · ASTRO · CLOUDFLARE

The mark, and nothing elseInstrument Serif400 italic. It appears in the wordmark and never in running text.

knowlezi

All four are self-hosted as Latin subsets — no font is fetched from anyone else’s server. Their licences are published alongside them: Space Grotesk, Inter, JetBrains Mono, Instrument Serif, and Lucide for the two icons.

Space

An eight-pixel rhythm, a twelve-column grid inside a 1280 px shell, and a corner radius of exactly zero. There are no shadows. Surfaces are separated by a single hairline or by a change of background, never by a float.

4px
8px
16px
24px
32px
48px
64px
96px

How it is built

Static pages generated by Astro, written mostly in Markdown, served from Cloudflare’s edge. There is no database, no content management system, and no server rendering a page when you ask for it.

It ships no JavaScript. Not a reduced amount — none. Every route is HTML and CSS, apart from one small inline script that remembers whether you prefer the light or dark theme. The theme control was the last thing holding a framework on the page, and removing it took sixty-one kilobytes off every single view.

That is not austerity for its own sake. A page that does not depend on script loading is a page that works on a bad connection, on an old phone, in a village hall with one bar of signal. For a church website — the reason this system exists — that is a functional requirement, not a preference.

The design decisions above are not documented after the fact. They live as tokens in a design system that the site imports directly, so this page and the site it describes cannot disagree.

What has to pass

Accessibility statement

Every change runs the following before it can be published. If any of it fails, nothing ships.

AccessibilityAutomated WCAG 2.2 AA audits on every route, in both light and dark, plus reflow at 320 px, text at 200%, keyboard focus, target sizes and reduced motion.
A reading path without JavaScriptThe site is loaded with scripting disabled and has to remain readable and navigable.
Nothing unfinished escapesA draft is deliberately forced into a production build to prove it still cannot be published or linked.
No broken referencesEvery internal link, anchor and asset in the built output is resolved. Every page must carry a title, description, canonical URL, language, a single first-level heading, a social card and valid structured data.
Nothing loaded from elsewhereThe build fails if any script, stylesheet or image points at another origin. No fonts, no analytics, no trackers, no exceptions.
The live site answersAfter deployment, the published site is checked over the network — routes, redirects, feeds and the not-found page.