Ship UI Kit
A token-first component library that made dark mode a config change.
2025 · Design system lead — token architecture, component API, and adoption tooling.
The problem
Every new internal tool restarted from zero: inconsistent spacing, six shades of gray, no dark mode.
What it does
A token-first component library adopted by four internal apps, cutting new-screen build time roughly in half.
Engineering decisions
Tokens before components, without exception
Component libraries rot when colors get decided inside components: someone hardcodes a gray in a card, someone else picks a different gray in a table, and six months later there is no theme, only history. Every color, radius, and shadow lives in one file with a semantic name, and components consume names rather than values. Dark mode arrived later as a second block of variables instead of an archaeology project.
Composition over configuration
The previous internal kit had components with twenty props because every new use case added one. Building on Radix primitives with slot-based composition meant new variations were assembled at the call site rather than negotiated into the component API, which kept the library small as adoption grew.
Adoption was measured, not mandated
A design system nobody adopts is a second design system. Shipping a codemod for the most common patterns plus a usage dashboard showing per-app coverage turned migration into something teams could do incrementally and see progress on, rather than a big-bang rewrite nobody had time for.
Where it landed
- Adopted by four internal applications
- New-screen build time roughly halved
- Dark mode shipped across every app in a single pull request