Colophon
How this site was made, and why it looks the way it does.
About this page
This site was designed and built by Fred Wertz in Jacksonville, Florida, in the summer of 2026.
What is a colophon? A colophon is the note at the back of a book that names the typeface, the paper, and the printer. On a website it does the same job: how the thing was made, by whom, with what.
Everything here was chosen for a reason, and this page is where the reasons live.
The design started with a place. I live on the St. Johns River, and I think North Florida is the most quietly beautiful part of the country. The site tries to carry that landscape without picturing it. I was admiring the aesthetic design of the website redpine.ai, a company named after a tree whose site reads as pure technology while the forest sits in the name and a single drawn motif. The colors here come from the river and the oaks; the discipline comes from the kind of design I like best: minimal, clean, rooted somewhere specific, and confident enough to leave most of the page empty.
Type
The serif is Newsreader, used for headings, decks, and body text. It has an old-style heart, with calligraphic stress and soft entries, so it stays warm at reading sizes, and an optical-size axis that tightens the large sizes into something quieter than a display face. The italic deck under each title is the one typographic flourish I allowed. Body text is set at weight 450, a half-step heavier than the default, because Newsreader at 400 runs light on ordinary screens.
The sans is Schibsted Grotesk, for navigation, labels, captions, and metadata. It was drawn for a Norwegian media group and it shows: compact, plainspoken, slightly sharp at the terminals. Its x-height sits close to Newsreader’s, so a caps label can stand beside serif prose without either one looking borrowed.
Sizes step by a major third, 1.25, from an 18px base, so adjacent levels read as siblings. Body lines are 585 pixels wide, about 66 characters, and spacing throughout is built on a 9px unit. The reading fundamentals — font size, weight, line height, line length, and spacing — follow the Nielsen Norman Group’s best practices for reading on screens, so the pages should be easy on the eyes before they are anything else. Both fonts are open-license and loaded directly, without a stylesheet call to a third party.
Color
There are six colors on the site and no others.
Fog is the ground, a warm gray held just short of beige so it never reads as a tinted card. River is the heading teal, the color of the St. Johns on an overcast morning. It appears only at heading sizes; below that, teal starts to look like links or interface chrome, and the page shimmers. Oak is the body ink, a dark brown that stands in for black. There is no pure black on the site.
Coral is the accent, and it is treated as an event rather than a color: one thin rule, once per screen, and nothing else. Sea, a gray-green, has a single job, the underline beneath links. That is the one place beyond the hairline where the page admits a little more of the river, and links are the right place because they do something. Grass is reserved for the evidence labels that will mark research profiles when they arrive.
The rest is subtraction. No rounded corners, no shadows, no gradients, no glass. A page that has to earn attention with effects usually has nothing to say.
The oak
The single illustration on the home page is a southern live oak, the tree of the St. Johns. It is inspired by, and modeled loosely on, my favorite live oak, and it looks quite a bit like it. It was also the hardest thing on the site to get right.
The first attempts were generated as fractal branching, because I’d assumed live oaks were fractal. They aren’t. A live oak has a few heavy, sinuous limbs and almost no recursive self-similarity, so every fractal render came out as a generic tree. The next problem was composition. Every full-tree render, in any style, read as an acacia on an open savanna, which is a long way from a riverbank in Florida. The fix was to stop drawing a tree portrait. The final image is a crop: trunk entering from the left edge, canopy leaning right, the way you see the tree when you’re standing under it. It was generated in Midjourney, cleaned to a single connected shape, traced to one vector path, and set at 16% opacity on the page ground so it frames the introduction rather than decorating a corner.
A second motif, a nautilus, is held in reserve for the site’s more technical pages, on one condition: it has to be drawn by the same hand as the oak.
How it’s built
The site runs on Next.js and is hosted on Vercel. The visual system was worked out in Claude Design over a series of evening sessions and written down as a single design document that every later decision has to answer to. The original site was implemented with Claude Code in short sessions, each one a small ticket with a clear finish line. Subsequent build and release work, including this page, has been led by Astra, my ChatGPT assistant. The design document, rather than any one mockup, is the source of truth; when the code and the document disagreed, the document won or was deliberately amended.
The essays are mine. I write them and I am responsible for every claim in them. Claude works alongside as a drafting partner and then as an editor, which mostly means it argues with me and tells me when a paragraph is doing less than it thinks it is. That is about the same arrangement a writer has always had with a good editor, and I’d rather say so here than let anyone discover it.
When the first research profile is published, its methodology note and the evidence-label discipline behind it will live on this page as well.
Set in Newsreader and Schibsted Grotesk. Last revised September 2026.