Design record
Themes
Where this site’s visual direction is kept on the record: the palette in exact hexes, the type it pairs with, and the rules that came out of building it. Entries are added over time and never deleted. A replaced direction stays here in the past tense.
Warm Paper
2026-07-30ShippedPaper that has been sitting in the sun, not a clinical white sheet.
The app is about the quality of light in a room, so a page about it has no business being cold. Everything is pulled a few degrees warm: the background is a bone white with yellow in it, the ink is a near-black brown rather than pure black, and the one accent is a burnt amber taken from the middle of the dimming gradient above. Nothing on the page is fully saturated except that accent, and it appears perhaps twice a screen.
Dark mode is not the same palette inverted. It is a warm charcoal that a bright amber sits on, because the reader running it is probably in a dim room, which is the situation the app exists for. The one value that flips outright is the screenshot shadow: a pale halo around a dark window reads as a glow, so it goes black.
The face is IBM Plex Serif for display and IBM Plex Sans for body. Same superfamily, so they agree at every weight without being matchy. Both are self-hosted at build time through next/font, which also means no third-party font request from a page that makes a privacy claim.
Specimen
Matched, not equal.
The same light on every screen, which is not the same number on every screen.
light
Master
dark
Master
What shipped with it
Two rules that came out of building this and are easy to undo by accident:
- Never put a border or border-radius on a window screenshot. The captures carry the window’s own rounded corners in the alpha channel. A CSS radius draws a second arc that can never line up, because the image’s corner scales with the image and the CSS one doesn’t. The border then sweeps across transparent pixels. The edge is drawn from the silhouette instead, with a tight drop-shadow standing in for the hairline. That’s the
.app-shotclass. - Frames that must clip express their radius as a percentage. The scrolling settings panels are real viewports, so they can’t defer to the alpha channel. A fixed pixel radius drifts away from the window’s as the image scales; a percentage of width, with the vertical axis corrected by the frame’s aspect ratio, tracks it at every size.