bill of materials

colophon

a colophon is the note at the end of a book that tells you how it was made. this is mine. a small record of the tools, materials, colors, typefaces, and technologies behind my work and this little corner of the internet. consider it the recipe for everything stitched together here.

materials

framework: next.js (pages router) + react
styling: css modules, hand-written — no tailwind, no ui kit
design system: electrocute-ui, published on npm
motion: framer-motion page fades + hand-rolled css keyframes
generative text: tracery-grammar
icons: font awesome + hand-drawn svg doodads
sound: web audio api, synthesized in real time
api bits: upstash redis via vercel serverless functions (counters, punch cards, the archive, guest notes)
hosting: vercel, deployed on every push to main

type

space grotesk: body text — technical but rounded at the corners
poppins (thin weights): long-form prose
ibm plex mono: labels, urls, anything that should feel machine-adjacent
cute font: exactly where you'd expect

the color code

the same function color code i use across all my soft circuit work — power, input, output, wires. once you learn it, you'll start seeing it everywhere on this site, not just here.

blush#fecfe2
matcha#d9efce
wisteria#e3d9fb
butter#faf0c8

assembly notes

the dashed borders are inspired by running stitches — one of the first stitches most people learn in sewing. the homepage collage is hand-placed; every card and photo is positioned individually, more like arranging a corkboard than assembling a grid. every hum, beep, and dial‑up screech on the site is synthesized live with the web audio api: no audio files, just waveforms and a little noise.

animations respect prefers-reduced-motion. this site is built and maintained by hand, with an unreasonable amount of attention paid to tiny details.

provenance