A financial services firm

The problem

The client's four product squads had independently built their own component sets. A screenshot audit found nine button variants, four date pickers and three incompatible interpretations of the brand's single accent colour. Every new feature paid a tax in rebuilding primitives, and an accessibility review had failed on components that were correct in one squad's version and wrong in another's.

What we did

1. 01

   Audit what exists before designing what should

   Every component in production was catalogued and photographed first. Of 140 distinct components, 96 collapsed into 31 once genuinely-identical variants were merged — which meant the system was mostly a consolidation exercise, not a design one, and could be argued for on cost.

2. 02

   Tokens first, components second

   Colour, type scale, spacing and motion shipped as tokens a full month before the first component. Squads could adopt the tokens into their existing components immediately, so the system delivered visible consistency long before anyone had migrated a single element.

3. 03

   Accessibility in the primitive, not the checklist

   Focus handling, contrast pairings and target sizing are properties of the components themselves. A squad using the library correctly cannot ship a 30px tap target or a 3:1 label — the accessible version is the only version available.

What changed

All four squads were on the library within two quarters, with adoption driven by the teams rather than mandated. The following accessibility audit passed with no component-level findings.

Product teams on one system

4

Distinct components in production

140→31

Component-level accessibility findings

23→0

Time to build a new standard screen

~2 weeks→~2 days

Built with

• React
• TypeScript
• Figma
• Storybook
• Style Dictionary