Mastercard Made design system
Client Mastercard
Year 2018 – 2021
Role Principal Designer, Made
Scope Surface, illustration system, adoption

Mastercard

Made was Mastercard's global design system. Thirteen existing libraries had been built in isolation. None had earned the right to be the single source of truth, because none felt like Mastercard. I led the surface — the north star platform that designers, developers, and product owners would actually use — and the illustration system that integrated Mastercard's visual assets into daily workflow for the first time. Teams reported 30 – 50% reduction in production time. Not because they were told to use it. Because it was worth using.

Made design system typography on iPad
Made illustration system
Made spacing system
Mastercard illustration system
Made design system homepage on laptop
made.mastercard.com
Made design system — overview
made.mastercard.com
Made design system — components
Mastercard illustration
Mastercard illustration
Mastercard illustration
Mastercard illustration
Mastercard illustration
Mastercard illustration
Mastercard illustration
Mastercard illustration
Mastercard illustration
Mastercard illustration
Mastercard illustration
Mastercard illustration

Illustration system

Mastercard had a rich library of visual assets, but they lived outside daily design and dev workflow. The illustration system pulled them into Made — so a designer in Singapore or a product team in Dublin could pick up an asset that felt like Mastercard, ready to use, without leaving the system.

Mastercard illustration system overview
Mastercard illustration system details

Inventory

Before Made could become the single source of truth, the existing thirteen libraries had to be inventoried — every component, every variant, every team that owned them. The audit became the foundation for what Made would absorb, what it would replace, and what it would politely leave alone.

Mastercard design system inventory — component audit