← All work Case 01 / 06

The Citi Design System.

How we built one shared language for a 200-year-old bank — and got 150+ designers across the world to actually use it.

Role

Sr. Product Designer
Core contributor

Team

3 designers, 1 PM,
5 engineers

Timeline

2 years, ongoing
2022 — 2024

Adoption

150+ designers
40+ products

C
One system. Many products.
A shared library of components, tokens, and patterns used by Citi teams — from risk dashboards to consumer apps.
Browse the library
v3.4 · last updated this week
The brief

40 products, 40 dialects.

Citi's risk and controls technology org has dozens of internal products built over fifteen years by different teams. Most predate the idea of a design system. Each app had its own buttons, its own color logic, its own way of saying "are you sure?" Designers were rebuilding the same components from scratch every sprint. Engineering velocity was suffering, and so was usability.

The brief was deceptively simple: build the foundation of a shared design system — and, harder, convince the org to use it.

"We had four different date pickers in production. None of them worked the same way." — Engineering lead, kickoff conversation
The approach

Audit first. Then design.

Before drawing a single component, we spent six weeks auditing what existed. Screenshots from 23 products, every modal, every form field, every error state. We mapped the actual variation so the system would absorb reality rather than fight it.

The audit became the most persuasive deliverable of the project. When leaders saw seven shades of "warning yellow" side by side, the case for the system made itself. Tokens came first, components second, patterns third — each layer a contract that let the next one move faster.

The shift

From scattered to shared.

We shipped v1 with the smallest viable kit — typography, color, spacing, and ten core components. Then we shipped weekly. The strategy was to make adoption the path of least resistance: clear Figma libraries, a documentation site, office hours every Friday, and a Slack channel where any designer could ask anything without judgment.

Before
⚠ ERROR — INVALID INPUT
After
This field needs a number between 1 and 100.
Same component, every product
The outcome

Two years in.

The system is now the default starting point for every new product in the risk-tech org, and several teams outside it have voluntarily migrated. The numbers tell part of the story — the rest is cultural.

150+
Designers using the system actively across Citi globally.
40+
Products built on or migrated to the shared library.
3x
Faster prototyping for new product teams, by their own estimates.
"I joined Citi from a startup. The system meant I shipped my first feature in week two instead of month two." — New hire, six months in
What I took with me

A system is a community, not a library.

The Figma file matters less than the people who maintain it. What made this work wasn't the components — it was the office hours, the welcome to ask dumb questions, the willingness to say "the system is wrong, let's fix it" out loud.

I came in thinking my job was to design components. I left understanding that my job was to design how teams work together. The components were just the artifact.