This site is hand-built. No template, no site builder, no theme. I designed it in Figma, set the direction in a few plain-text briefs, and built it with an AI coding agent in the loop. This page is the colophon.
Why hand-built.
The previous version ran on Framer. It was fast and it looked right, and it kept a layer between me and the thing itself. Owning the code means owning the decisions: how fast pages load, how motion feels, how content is structured, what ships and what doesn't. For a designer who works in product, that ownership is the point. The site is a small product, run like one.
The stack.
Boring choices, deliberately. The interesting work happens on top of them. Hover or tap a tile for the why.
01
Design & guidance
02
Build
The dev boundary. Everything above is dashed. Figma, the briefs, the MCP, and the local design-system page shape the code but stop here. None of it reaches the browser.
03
The application
The token files are the hub. Tailwind, Motion, and every component read from tokens.css and motion.config.ts. Change one value there and the whole site follows. Nothing hard-codes its own.
04
Ship
05
The visitor
Tokens before pixels.
Every visual value on this site comes from a token: colour, type, spacing, radius, easing, duration. Components reference the token, never the number. One file defines them, and Tailwind generates its utilities from the same file.
--space-section: var(--space-huge); /* 88px section rhythm */
--radius-frame: var(--radius-xl); /* 24px work frames */
--duration-fast: 150ms; /* hovers and taps */This is the design system as code. Dark mode, when it comes, is a token swap, not a redesign. Motion follows the same rule: durations and easings live in one config, so the site has a motion vocabulary instead of a pile of one-off animations.
Copy stays out of components too. It sits in typed content files and MDX, so changing a sentence touches no layout. (This page is a .mdx file.)
The workflow.
Figma stayed the source of truth for layout and type. The rest lived in plain-text briefs: the art direction, the voice, the component model, the rules the agent must not break. The agent (Claude Code) reads them before writing anything.
Then we built in phases. Tokens first. One case study end to end to prove the template. The rest of the studies, the marketing pages, then accessibility and performance passes.
The agent writes most of the code and catches my inconsistencies. Direction, taste, and the final read on every screen stay with me. The big visual calls never shipped on the first try: contenders went up side by side in throwaway lab pages, reviewed in the browser, the winner promoted into the system.
What carries over.
None of this is exotic. It is the discipline any product team needs: one source of truth per decision, quality gates, taste applied at the right altitude. The difference is that the idea no longer waits for a handoff. Prototype and production are the same motion.
That is what design engineering means in practice. Not a new job title. A shorter distance between deciding and shipping.