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
api bits: upstash redis via vercel serverless functions
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. the little circuit in the navigation generates its sound with the web audio api in real time — no audio files, just synthesized waveforms.

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

provenance