Banking and finance
Cetelem's design system
An atomic, multi-brand and accessible design system for all of Cetelem's digital products.
- Client
- Banco Cetelem · BNP Paribas Personal Finance
- My role
- Senior UX / Product Designer · Design System owner
- Products
- Loans, eCommerce, corporate website, landing pages and communications
The challenge
Products that grew separately, and financing that had to take on each retailer's brand.
The key
An atomic system with tokens by modes and a naming convention shared with development.
The result
A single AA-accessible system for all of Cetelem's products, which keeps spreading as a way of working.
The problemMany products, no single source of truth
Loans, eCommerce, corporate website, landing pages, communications: each Cetelem product had grown with its own styles and components.
The result was inconsistent interfaces, decisions repeated in every team and builds that started almost from scratch. On top of that, Cetelem financing lives inside each retailer's checkout, so the same components had to wear each retailer's brand while still being Cetelem underneath.
ProcessHow we did it
We built the system in layers, from the most basic to the most complex, always hand in hand with development.
Audit
An inventory of interfaces and components across all products to spot duplicates.
Foundations
Color, typography, spacing, elevation and iconography as a shared base.
Tokens
A naming convention shared with development to name every design decision.
Components
From atoms to business pieces, documented with their properties.
Brand modes
Tokens whose value changes depending on the brand the financing is embedded in.
Adoption
Documentation, support for the teams and continuous evolution.
Atomic systemFrom small to complex
Everything starts from the foundations: color palettes, typography, spacing, elevation and iconography.
On top of them we build the atoms (buttons, fields, checkboxes, switches) and, by combining them, increasingly complex components up to business pieces such as the financing simulator. Each component is documented with its properties, variants and states, so design and development talk about exactly the same thing.
Design tokensA shared language with development
Together with development we defined a shared naming convention where every token is named from the most general to the most specific.
First the token type, then which part it affects, which component, with what prominence and in what state. That way, a name like --color-surface-button-primary-default reads the same in Figma as in code, and anyone knows what it does without opening the documentation.
Tokens by modesOne system, many brands
Cetelem financing is embedded in each retailer's eCommerce and has to feel like part of its website.
To achieve this, semantic tokens resolve by modes: each brand has its own and, when you switch it, every component takes on its color, typography and border radius without touching a single piece. Adding a new brand is a configuration, not a redesign.
AccessibilityAccessible by default
The system is built to meet WCAG 2.1 AA from the ground up, not as a review at the end.
Token color pairs are validated against a minimum contrast of 4.5:1 in every brand mode; if a brand's color doesn't reach it, its mode uses the closest accessible shade in its scale. Every component has a visible focus, fields always have a label and errors are communicated with text and an icon, never with color alone.
AdoptionMaking the system matter
A design system only works if the whole company believes in it.
On the UX team we were the ambassadors of the initiative: a huge communication effort to explain to the business, product and development why a shared system makes it possible to scale products, streamline development and cut costs, and to support each team in adopting it.
Today the system spans loans, eCommerce, the corporate website, landing pages and communications, and it keeps taking shape and spreading as the way of working at Cetelem.
LearningsWhat I take away
- A design system is as much a cultural change as technical work: persuading people is half the project.
- Agreeing on token naming with development from the start avoids translations and arguments later.
- Thinking in modes from day one makes every new brand a configuration rather than a redesign.