Zopa Bank Design System
The TL;DR
The details
The challenge
In 2019, Zopa launched as a licensed digital bank with the positioning "The FeelGood Money Company".
This was a deliberate attempt to tackle the chronic lack of trust consumers have around money. By 2025, the bank had grown exponentially, moved into new product sets, and was stepping into everyday banking. The brand had outgrown its previous positioning.
Working in partnership with the digital agency Koto, the new positioning "Better Banking All Round" centred on the idea of "No Wrong Turns": a bank where one good thing leads to another, and anyone can effortlessly make the most of their money.
The new visual language described as Optimistic. Refreshing. Flowing, introduced a distinctive palette, a new typeface, and a new wordmark logo. The brand was moving from quiet fintech lender to an established, personality-led neo-bank.
But a new brand direction is only as strong as its execution at component level. The existing Design System's components needed to be rebuilt from the foundations up to make the new brand ownable and consistent across every touchpoint in the app.
My role
As Senior Design Systems lead, I was responsible for the end-to-end translation of Zopa's 2025 brand identity into a rigorous, scalable component system — from initial audit and palette stress testing through to phased component delivery for app and web rollout.
This required working cross-functionally across the organisation, collaborating closely with Key Stakeholders including:
Product designers — ensuring components were built to support their workflows and could be adopted progressively without disrupting live delivery
Engineering — aligning on tokenisation architecture, naming conventions and implementation handoff
Brand and marketing — maintaining fidelity to the new brand direction while stress testing and evolving the palette for digital usability
Internal comms — communicating the design system evolution across the organisation, ensuring every team understood what was changing, when, and how to adopt it
Koto — The specialist digital agency engaged to support visual design language execution and collaborative palette refinement
Before and after
The shift in design language is significant: from a functional, subdued fintech aesthetic to a bold, optimistic visual language built around Zopa's new "Better Banking All Round" positioning.
The new palette — mint/teal, warm yellow, coral/orange — gives the brand the visual stopping power needed to cut through in an increasingly crowded current account market.
New component design language
The scope went significantly beyond a visual update. Reviewing approximately 120 components created an opportunity to look holistically at how each was built, behaved and documented — not just how it looked.
For each component, the audit asked:
Does this accurately reflect the new visual language — Optimistic, Refreshing, Flowing?
Are there functional improvements — interaction patterns, states, edge cases, accessibility?
Is this documented clearly enough for product designers to adopt confidently?
This dual lens — visual and functional — meant the system that shipped wasn't just rebadged. It was meaningfully improved across the board, with improvements documented throughout.
From brand to system process
The new brand pillars needed to be translated from brand-level intent into rigorous, repeatable component behaviour.
Working with Koto, I stress tested the new visual language against real product scenarios: edge cases, accessibility thresholds, interactive states and content variation across all components.
This process revealed where the palette, as defined by the brand needed to evolve to function digitally — where contrast ratios fell short, where colour relationships broke down at scale, and where the brand intent needed interpretation. Rather than compromising the components, I worked with the agency to propose palette refinements that preserved the brand intent while making the system genuinely usable, accessible and scalable.
Figma variables and tokenisation
The system's foundations were rebuilt using a structured tokenisation approach in Figma:
Colour tokens — new semantic colour system, replacing ad-hoc values with a structured, maintainable token architecture reflecting the new palette
Figma variables — introduced to manage theming, mode switching and token relationships across the system
Spacing system — new scale defined and applied consistently across all components
Border radius — standardised across interactive and container elements
Type styles — new typographic scale introduced alongside a new typeface, Seasons Sans and Season Mix
Staying ahead of product design
A critical principle throughout was that the Design System team needed to be ahead of product design delivery at all times.
If product designers reached for a component before it had been evolved and delivered, the system would become a blocker — jeopardising the July launch.
The delivery was managed as a structured, prioritised rollout, sequenced by which components would be needed first by product designers. Working with design leadership, the schedule was communicated clearly across teams so everyone knew what was available, what was coming, and how to adopt new components as they landed.
Brand guidelines settled: March 2025
Component delivery: March — June 2025 (phased, ahead of product design)
App launch: July 2025 — aligned with Biscuit current account
Launch and Impact
The new design system was delivered within an 8-week window, ensuring product teams across the organisation could adopt new components and patterns ahead of the critical Current Account launch in Summer 2025
Close to 120 components were delivered and ready for product teams to consume
100% of the Product Design function migrated to and utilised the new Design System library
Standardised onboarding patterns delivered as a system output
The design system set the foundations for the new brand to be adopted by product teams and the wider business
© 2026 Simon Wessely