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 |
| Hosting | Cloudflare Pages |
| Content | MDX via Content Collections |
| Interactivity | React islands (Astro Islands architecture) |
| Styling | Vanilla CSS + custom properties |
| Search | Pagefind (client-side, post-build indexed) |
| Fonts | Self-hosted, subsetted woff2 |
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. Every property is a deliberate choice rooted in the visual language of engineering notebooks, printed broadsheets, and information-dense interfaces.
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.