Atlas Finance
A token-based design system and component library that accelerated delivery for squads building lending and treasury tools.
Scope
Design system architecture, component engineering, documentation
Timeline
5 months
Stack
React, TypeScript, Storybook
What we were solving for
Six product squads at Atlas were building independently—each with their own component conventions, colour definitions, and interaction patterns. The result was a fragmented product surface that felt different on every screen. Design reviews were bottlenecks. Engineering duplicated the same components across repos.
How we thought about it
We started with a system audit: cataloguing every component variant, every colour value, every spacing deviation across the six products. The token architecture came next—primitive, semantic, and component-level tokens in a single source of truth. Then components, then documentation, then adoption support.
How we worked
through it
01
Audit & inventory
We crawled every Figma file and every codebase. 1,400 unique colour values collapsed to 34. 6 button variants reduced to 3. The audit report became the system's first shared artefact.
What we measured
after we shipped
240+
Components shipped
Covering every common pattern across Atlas's six product surfaces.
68%
Faster component builds
Measured by comparing sprint velocity before and after system adoption.
100%
Squad adoption
All six product squads migrated within eight weeks of the v1 release.
1 source
Token truth
All design decisions flow from a single Style Dictionary config synced to Figma.
“We went from six teams doing their own thing to one coherent product in under two months. The system paid for itself in the first quarter.”