Case study · Tillage · 2024
Tillage Design System
One accessible component library to replace four drifting UI kits across a digital bank's mobile web, onboarding and advisor tools.
01
The problem
Four product teams at Tillage were shipping four different buttons. Over six years the bank's interfaces had picked up 212 near-duplicate components, three date pickers and a colour palette nobody could fully list.
An external audit found 61 WCAG 2.2 failures, and a simple brand tweak took three sprints because every team had to touch its own copy of the same pattern.
02
The approach
- 01
Audit before building
I inventoried every component in production with screenshots and usage counts. Only 38 earned a place in the new library; the rest were variations of the same idea.
- 02
Tokens first
Colour, type, spacing and motion live in one token source, compiled with Style Dictionary to CSS variables for web and to native values for the mobile team.
- 03
Accessible primitives
Interactive pieces are built on Radix primitives, then tested with keyboard-only Playwright flows and screen-reader scripts before a component is allowed to ship.
- 04
Migration without a big bang
A jscodeshift codemod swapped old imports for new ones. Teams migrated one screen at a time, and a lint rule stopped new copies of retired components from appearing.
03
The outcome
Eleven months after launch every customer-facing surface at Tillage runs on the library, and the design team now ships changes through tokens instead of tickets.
- 212 → 38
- components in production
- 61 → 4
- open WCAG 2.2 failures
- 3 sprints → 2 days
- to ship a brand-wide change
04
The stack
- React
- TypeScript
- Radix UI
- Storybook
- Style Dictionary
- Playwright
- Chromatic