JOB 001/004
GB-PRINT 4.0 · GARRETT WHISTEN
MetaMask Design System
The component primitives behind the world's most-used crypto wallet.
- ROLE
- Sr. Design System Engineer
- AT
- Consensys / MetaMask
- WHEN
- 2022-2024
- WITH
- React, TypeScript, Storybook, Design tokens
- 101merged PRs in the extension
- 30M+monthly active users
> THE PROBLEM
Three surfaces (browser extension, Portfolio, mobile), three codebases, one brand that had to feel like a single product. The system already had a strong owner, so the job was to build inside his architecture, not redraw it.
> WHAT I DID
- Built the button family: ButtonBase, then Primary, Secondary, Link and Icon on top of it.
- Built Text and Box, the typography and layout primitives, including right-to-left support.
- Audited the icon system, retired unused sizes, and renamed icons so people could find them.
- Built the banner family for the wallet's warnings and confirmations.
- Shipped Storybook docs with every component, and helped wire Jest, end-to-end and Lighthouse checks into CI.
> WHAT CHANGED
- Components landed in the extension first, then moved out as the shared package picked them up.
- A lot of the work was API cleanup nobody sees, which is why a system is still usable in year three.