A drafting sheet is a good model for a blog
Why this site reads as an engineering drawing, and what that buys beyond looking like one.
Most technical blogs are a list of titles and dates. That is not a criticism — the list is the honest shape of the thing. But a list gives every article the same weight, and the chrome around it usually has nothing to say.
The model here is a drawing sheet. Hairline rules instead of cards. Crop marks around anything the reader should treat as one object. A title block at the foot of the page carrying revision, build date and source, in place of a footer full of links. Square corners everywhere, because a drawing has no rounded corners.
The token layer is the whole trick
There is exactly one file in this repository that declares a colour. Every component
reaches for var(--ink) or var(--rule-2), and the theme swaps those values rather than
swapping selectors. No component knows that dark mode exists.
That constraint is what makes the system cheap to extend. A new component inherits the palette by construction, and it cannot drift, because there is nothing to drift from — a literal colour anywhere in a component is a bug you can grep for.
The archive index earns its density
The archive is a table, and the dotted leader between a title and its metadata is borrowed from a bill of materials: it carries the eye across the gap. On hover it fills in as a solid accent hairline, which is the only animation on that row that means anything.
Each row also carries five block glyphs. They are authored in the article’s frontmatter, not derived from anything, and the schema requires them:
spark: z.string().length(5),That is a deliberate choice over computing a shape from word count or commit activity. A derived figure would be decoration pretending to be data. An authored one is a claim the writer is making about the article, and a required field means no article reaches the index without making it.
What the type is doing
Newsreader carries the reading and IBM Plex Mono carries everything else — labels, dates, code, figures. The split is not decorative. Monospace is the register the site uses when it is stating a measurement, and the serif is the register it uses when it is arguing. Keeping those apart means the reader can tell, at a glance and without reading a word, which one they are looking at.
Both faces are self-hosted through Astro’s fonts configuration, so the built site makes no third-party request to render text.