Xapo Bank
Design System evolution
Impact
- Achieved 100% adoption across 7 product teams
- Increased reusable components by 250%
- Reduced token complexity by ~70%
- Enabled two full product rebrands in < 6 months
Project
overview
Background
Xapo Bank was scaling quickly but lacked a mature design system. Components were inconsistent, documentation fragmented, and collaboration between design and engineering unclear.
Challenge
Create a scalable design system that could support rapid product growth while improving consistency and team efficiency.
Objectives
- Establish a clear design system architecture
- Align design and engineering workflows
- Ensure accessibility and visual consistency
- Enable fast product iteration and future rebranding
Starting Point
When taking ownership of the design system:
- The system had low adoption
- Components were inconsistent
- Engineering and design lacked shared processes
- Documentation was missing
- No standardised patterns
- Accessibility compliance was missing
Design System Governance & Adoption
New Collaboration Model
Xapo Bank was scaling quickly but lacked a mature design system. Components were inconsistent, documentation was missing, and collaboration between design and engineering unclear. Alongside the component architecture, new ways of working were introduced to align design and engineering and support long-term scalability.
- Clear responsibilities for system updates
- Shared component reviews
- Design-dev agreements
- Dynamics across teams
This reduced friction between teams, ensured consistent component implementation, prevented bottlenecks, and kept expectations aligned.
Documentation
Clear documentation was created to make the system scalable and easy to adopt.
- Design system usage and contribution guidelines
- Standardized interaction and navigation patterns
- Accessibility guidelines and considerations
- Design–engineering agreements for component implementation and usage
- Tutorials and onboarding resources for designers
Design–Engineering Agreements
Talking the same language
- Component naming conventions
- Token system
- Component architecture
- Update workflows
This alignment allowed design and engineering to operate with a shared language, enabling faster iteration, and making the system resilient to change.
Governance
A governance model was introduced to maintain the system over time.
- Design system reviews
- Contribution processes
- Prioritization of system updates based on product needs
Results
What started as a fragmented library evolved into a mature design system adopted across the product. Clear collaboration models, shared conventions, and improved documentation allowed teams to build faster, maintain consistency, and successfully deliver two major brand migrations with minimal disruption.
Sitemap
Social
© 2026 Carlota Antón. All right reserved.