▸ CH.09 — COLOPHON
the site you're on was designed out loud — here's the transcript.
no framework templates, no Figma-to-code handoff. i sketched everything in the browser, talking to an AI collaborator like a junior designer across the desk. two weeks, ten channels, one ASCII cat that wouldn't sit still.
every pixel you see
was argued about.
was argued about.
— timeline · 14 days of signal
d 01–02
tuning the dial
picked the voice (broadcast, warm, honest). chose 4 fonts. drew deploy. ditched 3 directions before locking 'Cozy CRT'.
d 03–06
channels live
hi-fi on every section: hero, about, work, case, writing, now, uses, signal, 404, footer. iterated in-browser, not in a mockup.
d 07–10
paper mode
light theme that isn't just 'dark theme inverted'. re-tuned amber, green, shadows, scanlines so it reads like sun-bleached paper.
d 11–14
handoff & polish
responsive specs, tokens locked, a11y audit, dev handoff notes. wrote this very page. deploy got a nap.
▸ 10 routes · 3 primary entry-points
/ home · you are here
/about who & why
/work four channels, three live
/work/:slug case study
/writing the journal
/writing/:slug one post at a time
/now what's cooking this week
/uses the stack · right here ↓
/signal say hi
/* the lost channel
FRAMEWORK
next.js 15 · app router
RSC by default, static where it fits
STYLING
plain CSS · tokens.css
every value is a var. no Tailwind.
CONTENT
MDX · frontmatter
writes like a notebook, ships like a site
FONTS
Space Grotesk · Fraunces · JetBrains Mono · Caveat
display / serif italic / mono / hand
HOSTING
fly.io · edge · CDN images
fast enough that you don't notice
ANALYTICS
plausible · self-hosted
no cookies, no banner, no tracking
— five rules, taped to the monitor
RULE 01
one signal per screen
red is never decorative. if it's red, tap it.
RULE 02
warm, not cold
dark mode that smells like coffee, not a server rack.
RULE 03
type does the heavy lifting
four typefaces. one job each. no decoration.
RULE 04
motion carries meaning
blink = now. pulse = live. everything else sits still.
RULE 05
deploy everywhere
if a screen felt lonely, the cat moved in.
10
channels
4
breakpoints
47
design tokens
12
section files
1
cat