I
One head, both crafts
Taste and engineering in the same person, not two specialists in a trench coat.
Design ⇄ Engineering · the seam is the job
The Design
Engineer.
I design the surface and engineer what holds it up. The same person reads a layout in pixels and ships the code that renders it. This page is not a list of those skills. It is built out of them.
Capabilities/01 to 08
Eight domains. Each one demonstrated by the page you are reading.
01
Craft &
Visual Systems
Reads a layout in pixels and optical weight, never approximations.
Typographic scale & rhythmOptical alignmentModular gridsColour & contrast theoryHierarchy & emphasisComposition & balanceSub pixel precisionLight and dark themingNegative space
Live one type family, three roles · scrub weight and size
Plex Sans Condensed · 600 / 56px
Designs the surface, ships the code.
02
Interaction
& Motion
Motion that explains state instead of decorating it.
Easing & spring physicsChoreography & staggeringEnter and exit orchestrationGesture & dragState transitionsPerceived performanceReduced motion fallbacksWeb Animations API
Live drag the puck, release to feel the spring
offset 0px velocity 0.0 stiffness 0.12 damping 0.78
03
Front End
Engineering
Ships production code, not handoff files.
TypeScriptReact · hooks · composition · RSCSemantic HTMLCSS Grid & FlexboxContainer queries:has()Custom properties · clamp()Tailwind · vanilla-extract · CSS ModulesBrowser rendering modelState management
Live drag the container edge · it answers to its own width, not the viewport
A component that owns its layout
@container drives the columns. The toggle below is wired with :has(), no JavaScript touching the card.
container … layout … @container (min-width: 430px)
04
Design Systems
& Tokens
Builds the system that makes everyone else faster.
Tokens · primitive to semantic to componentComponent API designComposition · slots · polymorphismControlled and uncontrolled patternsHeadless primitives · Radix · React AriaMulti brand theming · Style DictionaryVersioning & distributionStorybook documentationContribution & governance
Live the theme control up top writes these tokens · watch the chain resolve
Primitive
--brand…
--wh-0 / --dk-0…
--line…
Semantic
--accent-text…
--surface…
--text…
Component
--btn-bg…
--chip-bg…
--chip-line…
05
Accessibility
Treats WCAG as the floor, not the goal, and ships it. Designed Conformly, a live compliance agent for the European Accessibility Act.
Shipped → Conformly · EAA agentWCAG 2.2 AAEN 301 549Semantic structure & ARIAKeyboard navigationFocus managementScreen reader testingContrast & visibilityprefers-reduced-motion
Live measured against this theme · switch brand or mode and watch it recompute
Body textBody on background
……
SecondarySecondary on background
……
Accent linkAccent on surface
……
Ratios computed live with the WCAG 2.1 formula. AA needs 4.5, AAA needs 7. Every pair on this page clears AA in all four brands and both modes.
06
Prototyping &
AI Assisted Build
Resolves the hard interaction in code before engineering commits.
High fidelity coded prototypesFigma · variables · auto layout · variantsCode vs canvas judgmentCursor · v0 · Claude CodeRapid throwaway explorationFaithful spec handoffCustom tooling & plugins
07
Engineering
Practice
Lives in the codebase like an engineer, and reviews like one.
Git & pull requestsCode reviewVisual regression · Chromatic · PlaywrightCI awarenessMonoreposCore Web Vitals & perf budgetsReading API contractsDevTools debugging
08
Product &
Systems Thinking
Designs the edge case, the empty state, and the failure mode.
Problem framing & scopingComplex, data heavy workflowsEmpty · loading · error statesInformation architectureAnalytics · funnels · experimentsUX writingMeasuring craft impactTradeoff negotiation
Live the states most designers skip · switch between them
Nothing here yet
An empty state is an invitation, not a dead end. It tells you exactly what to do first.
Add your first projectThat did not save
The error names what went wrong and hands you the way out. It never just apologizes.
Try againShipped
Confirmation in the same voice as the action. The button said publish, so this says published.
Design systems/03 built
Systems, not screens. Built to make teams faster.
Enterprise SaaS
Consumer banking
Kernel
A working enterprise design system: real tokens, components, blocks, and full screens, live and fluid in light and dark.
Kinetic
A consumer banking system built around motion and clarity, where money that moves feels like it.
Open the system ↗
B2B SaaS
Boron
A design led accessibility launch gate: a reusable WCAG 2.2 AA checklist, handoff contracts, and a human verification model, shown through live keyboard operable components.
Real work you can openProducts & prototypes
Not case studies. Live things you can open.
Career
CriterionPractice the interview, see exactly how you are scored, then argue the result.
Compliance
ConformlyA European Accessibility Act agent: deterministic EN 301 549 detection, fixes opened as real pull requests, and a tamper evident audit trail.
Finance
How Much Would I Have IfSee what a single investment would be worth today. The number you wish you knew sooner, with programmatic SEO earning the long tail.
Lab
DreadRobotA skeptical AI tool review site: a five axis score, hard cap disqualifiers, and a build time guardrail that makes shipping a fake verdict a compile error.
Health
CareCompassA calmer way to navigate care and the decisions that come with it.
Media
Aspen Valley NewsLocal reporting, rebuilt around how people actually read it now.
Agent ops
WatchtowerSupervise a voice agent while it is on a call. See the action before it fires, scope what it may touch, and take over cleanly. Four live scenarios inside.
AI Lab
RecallSee, attribute, edit, scope, and revoke what an AI assistant remembers about you. Personalization made legible and revocable.
AI Lab
GroundRead an AI answer with every claim traceable to a source: supported, unsupported, or in conflict, each with its confidence shown.
AI Lab
SteerTurn an underspecified prompt into a negotiated brief. The model surfaces what it inferred and flags ambiguity before it acts.
AI Lab
OverseeA control surface for action taking AI agents: scoped permissions, a dry run preview of effects, and interruptible execution.
Real estate
KeySignBuild a competitive, fully disclosed real estate offer in the driveway. Mobile first and offline capable, from showing to close.
Personalization
Personalization Tuning StudioMake the algorithm legible. See why titles surface, and tune whether personalization is helping you or trapping you.
Inbox
Signal InboxAn inbox that sorts for signal over noise, so the message that actually matters reaches you first.
Notifications
Notification SieveIntercept the noise, escalate only what matters, and keep the day calm. A consumer first redesign of the attention surface.
Incident ops
VantageA 3am incident console. Read the storm, trace the cause, and close it out with the postmortem written as you go.
Payments
1QRScan a merchant QR abroad and see the real total in both currencies before you commit.
Health
RangeAn iOS knee rehab coach that reads your form on device. Three live prototypes inside.
Experience/the last ten years
Randstad DigitalSenior Product Designer, contractApr 2026 to Present
AppleProduct Designer, Health, contractDec 2025 to May 2026
Anywhere Real EstateSenior Product DesignerMay 2022 to Dec 2025
ForeSee ResultsSenior Product DesignerMar 2017 to Nov 2019
StatmuseDesign LeadDec 2015 to Jan 2017
Earlier: Meltwater, Senior UX Designer. The Huffington Post, Founding Designer on early iPhone and iPad apps at scale. Compete, Designer.
What this adds up to
One head, both crafts.
II
Bias to shipped
The product is the deliverable. The Figma file is scaffolding you throw away.
III
Detail that scales
Quality that holds across every role, state, and edge case, not just the happy path.
IV
Knows the system cold
Fluent enough in the rules to know exactly when to break them.
V
Fluent in both rooms
Speaks design to engineers and engineering to designers, and is trusted in each.
VI
Speed without debt
Fast because the foundations are clean, not fast at the foundations expense.
Start something/role or project
Building a team, or a product? Let us talk.
Tell me what you are working on. I read these the same day and reply by email within one business day. No bots, no assistant, no queue in between. Just me.