Colophon
What this site is made of, and how it got made.
A colophon is the note at the back of a book that records how it was printed: the type, the paper, the press. This is that, for a website. It's here mostly because I think the how is half the interesting bit.
Built with
- Framework
- Astro. It's plain HTML by the time it reaches you, with no JavaScript framework running in your browser.
- Hosting
- GitHub Pages, deployed straight from a
git pushto the main branch. - Content
- The writing and lab notes are Markdown files, kept in the repo right next to the code.
- Source
- github.com/ThePhilipWilson
The look
The whole site is one idea pushed hard: a cassette, a zine, and an arcade cabinet, all at once. Flat colours and no gradients. Hard offset shadows with no blur. A halftone grain sitting over everything. SMPTE colour bars and a CRT screen down in the lab.
It started life as nineteen rough homepage mockups. Number nineteen won (there's a whole write-up on that), and the winning mockup turned into the stylesheet the site runs on today.
Every colour, typeface, and treatment is written down in the visual style guide. It's the actual reference the site is built against, published as-is. Showing the workings is part of the point.
Type
- Bungee
- headings, stamps, big numbers
- Space Grotesk
- body text, the workhorse
- VT323
- the terminal bits: kickers, chips, this very label
- Caveat
- handwritten notes and subtitles
- Big Shoulders Display
- lab project titles, and nowhere else
How
Most of it was built in a code editor with a lot of help from Claude Code, an AI coding assistant. I describe what I want, it does a good chunk of the typing, and I review it and push. I'm happy to say that out loud; being honest about the process is sort of the point of this place.
I'm not a web developer by trade, so a fair bit of this is held together with optimism. If you find something broken, take it as part of the charm.