- The problem
- Design and code didn't match, and apps built their own parts, so the same work was done many times.
- What we did
- Made adoption a goal, measured from the code, and wrote one set of rules for people and AI agents.
- Results
- Adoption went from 12% to about 75% across seven apps. The Mastercard rebrand went through the system. Agents now build interfaces that follow our rules.
- My role
- Head of Design. I owned the adoption goal and led the work with design and frontend.
Why it matters
When each app builds its own buttons, tables and forms, the same part gets built and fixed several times over. Delivery slows down, the product looks a little different in every corner, and a new brand would mean touching every screen by hand.
What we did
Measure it
In August 2025 we started counting adoption from the code. A tracker I built reads every app, counts its components and reports the share that comes from the design system. That share became our design OKR, and we checked it about once a month.
One source of truth
In October 2026 we rebuilt the design library to match the code exactly, component by component, with the same names and options. Designers and engineers now work from the same parts, and the rebuild also surfaced mismatches worth fixing. The documentation shows each of our 61 components as the real thing, with examples of it in use.
One set of rules for people and AI
Under the components sit about 420 rules, such as where the buttons go in a form. Each rule is written once. Designers see it drawn with real components, and AI agents read the same rule as data when they build. A concept in any shape, whether a sketch, a prototype or a screenshot, can be rebuilt by an agent from our components, and it follows our rules from the start. The compliance checks designers used to do by hand now happen as the screen is built.
{ "rule": "Form footer: Cancel on the left, one primary action on the right.", "status": "decided"}The payoff
In August 2026, BVNK became part of Mastercard, and the product needed a new look. It was more than new colours: buttons went black and fully rounded, and surfaces became warmer. Because every app drew from the same tokens and components, the change went through the system instead of through every screen. It took minimal effort and saved us what could have been weeks of work.
The rebrand itself is in Evolving BVNK for life inside Mastercard.
What it gave us
Screens get built faster because the parts and the rules are already decided, and fewer questions reach design because the answers are in the docs. With the basics settled, the team spends its time on the business and what customers need next. That’s where our vision for the portals picks up.