Design ⇄ Engineering
The Design
Engineer.
I design interfaces and write the code for them. I get the layout right to the pixel, then ship it as production code. Below are case studies, prototypes and live sites you can try.
What I do
-
Front end
React with hooks and Server Components, TypeScript, and the Next.js App Router. I style with Tailwind, vanilla-extract or CSS Modules, using modern CSS such as Grid, container queries, :has() and clamp().
-
Design systems in code
I set up design tokens in Style Dictionary, so one set covers several brands plus light and dark mode, with no flash when the page loads. I build components on Radix and React Aria, document them in Storybook, and version them so other teams can install them.
-
Accessibility
I build to WCAG 2.2 AA and EN 301 549 from the start, not as a fix at the end. That means correct ARIA, full keyboard use, focus that lands in the right place, and a reduced motion option. I test with NVDA, JAWS, VoiceOver and TalkBack.
-
Charts and animation
I draw charts by hand in SVG, with no chart library. You can move through them with the keyboard, and screen readers read the values out. I animate with the Web Animations API, springs, gestures and drag, and there is always a reduced motion version.
-
Testing and shipping
Screenshot tests with Chromatic and Playwright. I watch Core Web Vitals and keep pages within a performance budget. I work in Git with pull requests and code review in monorepos, and ship on Vercel and Supabase with static generation.
-
AI products
Screens where people check an AI's work, see why it did something, watch over agents, and approve what it is allowed to do. I use Cursor, Claude Code and v0 every day.
-
Design
I work in Figma with variables and libraries. I do interaction design, prototyping and usability testing, and follow the work through to the shipped product.
My work
Design Systems 2
-
Kinetic
A design system for a consumer banking app, with motion built in from the start.
-
Wolf-Rayet
A design system where only one thing in each part of a screen may demand attention, and every build checks it.
Case Studies 9
-
KeySign
An app for writing and signing a complete, compliant home offer at the property.
-
Allowance
A business banking app where an AI agent pays the routine vendor bills and stops on the risky ones.
-
1QR
A travel payment app that shows who you are paying and the full cost, in an outdoor theme.
-
How Much Would I Have If
An investment calculator with a page for every asset and year, built on real market data.
-
Watchtower
A dashboard for one person supervising many AI voice agents on live calls.
-
Criterion
Interview practice where every score shows the words that earned it.
-
Readout
A data story about four earthquakes in Japan, told with live charts.
-
Conformly
Checks a website against European accessibility law and opens real fixes.
-
Vantage
An incident console that traces a flood of alerts back to the cause.
AI Design Lab 4
-
Steer
Shows the guesses AI makes about your request, so you can fix them before it writes.
-
Ground
Shows where each claim in an AI answer comes from.
-
Oversee
Controls for AI agents that take actions: limits, previews and undo.
-
Recall
Shows what an AI assistant remembers about you, and lets you delete it.
Playbooks 2
-
Design System Migration
Moving a product to a new design system with the token library and Storybook, without stopping feature work.
-
Prompt Library
The prompts I keep for design work, from first request to handoff.
Hiring, or have a project? Get in touch.
Tell me what you are working on. I read every message myself, the same day, and reply by email within one business day.