And what it is made on. The design tokens and components are documented on the design system page.
Type
Newsreader for headlines, light weight with the italic doing the talking. Geist for reading. Geist Mono for labels and anything that behaves like data.
Aa AaNewsreader · light and italic · headlinesThe quick read: body copy set for long paragraphs.Geist · regular · reading2024 to 2026 · 28.54°NGeist Mono · labels and data
Color
One accent on a near-black stage, with a light mode for people who read in daylight. Every text pair is checked against WCAG 2.1 AA before it ships.The accent is lime on the dark stage and a deeper green in daylight, where lime is too light to read. Every color sits behind a CSS variable.
Dark · page #0e1013
Ink#eef0f3 · 16.7:1
Accent#c8f542 · 15.1:1
Light · page #e9ebee
Ink#223044 · 11.2:1
Accent, headlines#2d670e · 5.7:1
Accent, small text#22420f · 9.5:1
Washes
Each case study has its own pair of colors; its header and closing footer drift in that pair, and the site's own pages share green and teal. The color moves slowly, carries a faint frost, and in daylight mixes into the page like ink on paper.The full breakdown, color by color, is on the design system page.
Next.js 16 on the App Router, Payload 3 as the CMS, self-hosted on a Hostinger VPS. Analytics are Google Analytics, loaded after the page so it never slows the first paint.
Next.js 16
React 19
Payload 3
SQLite
Tailwind CSS 4
TypeScript
Hostinger VPS
PM2
Motion
Content reveals once and never re-hides, and sections rise no more than 24 pixels as they arrive. Some things move on their own: the color washes drift slowly, the ticker scrolls and pauses when you hover it, and the guides and the Bench rain run until you pause them with the tab at the edge of the screen. If your system asks for reduced motion, all of it stops.
Reveals once24px
Rises 24px and fades in · 700ms · ease out · once
Desk
MacBook Pro M4, a Bambu X1C with AMS, two DarkStar22 cinewhoops in various states of repair, a RadioMaster Pocket, and a soldering iron that gets more use than it should.
Process
Designed in Figma and a Claude design canvas, built in the open, written without em dashes on purpose.
