Context
Tradeverifyd runs two products on one platform: the customer portal and an internal admin tool. The team worked with AI as an essential part of its process.
Each product had its own Button, Badge, Card, Table, Modal and empty state. Every pair came from a real moment where someone needed a piece and the existing one lived in the wrong place. The design rules lived in documents and in people's heads, so every screen drifted a little: a new shade here, a hand-made button there.
The team didn't use Figma. The platform changed so fast that any Figma file fell behind what was actually live, and a designer working there becomes the bottleneck. So I designed straight in the product with Claude Code, which also meant I could fix the system where it actually lives.
The problem
On October 15 we walked through the published Storybook, the team's catalog of components, and wrote down everything that was wrong: 26 separate cleanup issues, three different country selectors (two broken on Windows), and a catalog where the biggest group, 23%, was a demo app sitting next to real product components.
See real usage first
I mapped both systems by where each component was actually used. The customer portal's own Button had 29 uses, the shared one 24. Numbers like these turned a vague "let's consolidate" into a list we could put in order.
One rule, 41 steps
That was the rule the team settled on, and I wrote the cleanup around it, 41 steps, 39 of them mine. When the admin version could do something the customer one couldn't, that ability moved over first, so nobody lost anything.
I restructured the catalog around what a component is, not which product it ships from: Brand Book, Foundations, Components. The demo app went behind a switch, hidden but not deleted. The Colors page reads the live styles, so it can't fall out of date.
Merge, piece by piece
The admin tool now uses the customer theme. Three country selectors became one family. Admin lists got the shared empty state, checked in light, dark and on narrow screens. Button states and icons match across both products.
Every change went to me first as a before and after with real screens, before anyone else saw it.
Type and color
I moved the product to Inter and shipped a nine-step type scale as tokens, each step carrying size, line height, weight and spacing, so every screen inherits it.
For color, I brought measured contrast instead of taste, and filed what was failing: a warning pairing at 1.85:1, an action blue below AA on the dark theme, nine controls with no hover at all. With that in front of us, the team decided: blue became the action color, so an action can never be mistaken for risk; the brand orange became identity only; warning yellow got brighter, with dark text instead of white.
Rules that check themselves
A design system only holds if something keeps checking it. So I put the rules where every change already gets reviewed: the pull request. DS Police started with 7 automatic checks: use the color tokens, use the real components, no one-off values. Before turning them on, I fixed every place that already broke them, 139 across 56 files, so the team started clean.
Find what it wasn't checking
The color count stayed at zero, but only because color was all the rules looked at. So I audited 13 live screens the way a person sees them, not the code:
| Screen | Off-palette colors | Hand-made buttons |
|---|
| Assistant, search, monitoring, profile and help pages | 0 | 0 |
| Supplier map | 0 | 3 |
| Alerts | 0 | 20 of 48 |
| Help docs, about 30 sub-pages | 0 | 12 to 15 per page |
Teach the reviewer the real system
The AI reviewer compared each change to a hand-written list of components. The list was out of date.
21components the reviewer knew about
123components that actually existed
I made the list build itself from the product. Then I added the checks for what the team had decided but nothing enforced: the type scale, where 408 one-off font sizes had piled up, and colors with different names but the same value, which is how 58 hover states showed no change at all. Each new rule started as a warning, with the condition to become an error written next to it.
Put design decisions in the review
The reviewer's instructions went from 9 rules to 19, carrying what our design meetings decided:
- "Pill" is the only word for a status indicator. Badge, tag and chip are retired.
- A pill is flat and never clickable.
- Navigation is a link. An action on the same screen is a button.
- A new component needs a story in the catalog.
Make it count
For four months the checks only commented, and people could merge anyway. On October 6, 2026, at the product owner's request, breaking the design system started stopping the merge.
Result
Two design systems mapped into 41 steps, 39 of them mine, most merged or in review by the end of October. Three duplicates already merged into one. A catalog organized by what things are, with its gaps visible: 48 of 123 components documented.
And a review that keeps it that way: about 2,950 pull requests went through DS Police in five months, 12 engineers cited it in their own work, and violations went from 139 to 0 and stayed there.