Case study · 7 min read

How I built the design system

An enforcement layer, not a reference library. Consistent, accessible, on-brand UI had to be true by construction across internal products and hundreds of partner brands. What we locked, what we let flex, and why a nicer kit would have failed.

Three beats of the system, in the order a team meets them:

1. 01 Tokens, not forks. A new institution is a theme file. It is not a copy of Button.
2. 02 Interaction is locked. Teams restyle. They do not reinvent focus, naming, or disabled.
3. 03 Governance is a queue. New parts go through design and engineering together, or they do not enter the set.

My approach

Research

• Cross-product audit of real shipped screens, not a designed-in-isolation library
• The system had to describe what teams already built, then make the good path the easy one

Design

• Rebuild primitives with auto layout, tokens, and a default theme that meets contrast
• Alerting became one severity model instead of fourteen banners

Build

• Figma as the source of truth after fragmented Sketch libraries
• Annotations kit for roles and states, documentation with usage examples, workshops to move people off custom parts

Test

• Adoption in the first six months as the lagging signal
• The leading one: whether a team still opened a custom file to ship a banner

The library was not the problem

The company had grown through acquisitions. UI was leftover frameworks and one-off fixes. The design system was aging Sketch libraries nobody fully trusted. Most systems serve one product and one brand. This one had to serve many internal products, hundreds of financial-institution brands, and partners building on the same parts.

The deliverable was not a nicer UI kit. It was a guarantee: whatever shipped on top stayed consistent, accessible, and on brand, regardless of who built it.

The core decision

That sounds obvious until a partner asks for a rounder button and someone duplicates the file. One canonical component can serve hundreds of brands only if the fork is culturally expensive and the token path is cheap.

What I actually did

• Migrated fragmented Sketch libraries to a single Figma-native source of truth.
• Defined primitives from a shipped-screen audit.
• Fixed the default theme so contrast was true before theming started.
• Unified banners, toasts, inline errors, and modals under one severity model.
• Set a joint design-engineering queue for new component requests.
• Baked keyboard, focus, and ARIA into every component brief.
• Shipped an annotations kit so handoff named roles and states instead of leaving them implied.

How I checked it

60% increase in component adoption in the first six months after the Figma migration. Ten or more cross-functional teams actively using and shaping the system. WCAG 2.2 behavior on every new component by default. Adoption is lagging. When teams stopped opening a custom file to ship a banner, the system was working.

Password-protected detail sits behind the original project file. This page is the public write-up of the decisions.