COLOPHON
How This Site Is Built
For a site about making systems visible, showing your own system is on-brand.
Typography
Display
Newsreader
Page titles, section headers, pull-quotes. The editorial authority.
Body
Source Serif 4
All long-form prose. Warm, readable, designed for sustained reading.
UI
DM Sans
Navigation, buttons, tags, metadata. The approachable counterpoint.
Mono
IBM Plex Mono
Code, timestamps, system text. The voice of the machine.
Color
Stack
| Framework | Astro (SSG / Pre-rendered) |
| Hosting | Cloudflare Pages |
| Content | MDX via Content Collections |
| Interactivity | Vanilla JS & React (Astro Islands) |
| Styling | Vanilla CSS (Generated with AI pair-programming) |
| Search | Pagefind (client-side, post-build indexed) |
| Illustrations | OpenPeeps by Pablo Stanley |
Design Philosophy
Editorial Drafting Table. The site feels like an engineer's working surface, graph paper, precise annotations, warm under-lighting. The key tension: precision and warmth coexist.
No CSS framework. No utility classes. The design system is too specific and editorial for generic tooling. Instead, I heavily leverage AI to pair-program and iterate on Vanilla CSS. This frees me to focus purely on the creative direction and "spiritual correctness" of the spacing, animations, and interactions, rather than manually typing out flexbox properties.
The Grid
The graph-paper background is rendered in pure CSS as a repeating pattern of fine lines, 20px cells with major lines every 5th cell. It's not decorative; it's the foundational visual element that ties every section together.