Product-design foundation · Le Figaro
Saphir: One Design System, Different Products
I helped Le Figaro’s design studio define reusable interface rules while leaving room for each product’s identity.
At a glance
My work, shared rules, and limits.
- My responsibility
- Reviewed existing interfaces and contributed to foundations, components, documentation, and workshops.
- Key decision
- Agree on rules for recurring interactions while allowing product-specific colours, fonts, and features.
- Trade-off
- Make common decisions once without forcing distinct products and platforms into one uniform interface.
- Result or status
- The studio established shared foundations, component rules, documentation, and platform libraries. Later implementation and adoption were team outcomes.
A shared system for distinct editorial products.
Le Figaro’s editorial websites and apps spanned desktop, mobile, and tablet screens, each product with its own layout and visual identity. Saphir’s goal was to give teams shared rules for common interface decisions while preserving the differences each product needed.
Find what should be shared.
We reviewed existing screens to find inconsistent patterns and scattered decisions, then agreed on shared rules for spacing, fonts, colours, and behaviour and applied them to reusable interface parts. Each product kept its own visual style and specific features.
Document the decision, not only the screen.
The colour meanings, icon grid, and button states below are just a few early foundations. Workshops around them helped the studio decide what should become a shared rule, where products needed flexibility, and how to document those choices as Saphir grew into a full design system.
Colour foundations
Figaro
Figaro Premium
Icon construction
Button behaviour
A reference the team could reuse.
The team created a cross-platform design system with documented foundations, components, and libraries for websites and apps across desktop, mobile, and tablet devices. It gave teams a shared reference while leaving room for each product’s identity and each platform’s needs.
Public context 2019 Saphir review ↗ Le Figaro’s 2022 design-system retrospective ↗
What I would keep and what I would change.
I would again identify decisions several products share before designing each screen separately. An icon grid and button states are just two simple examples of rules that can reduce repeated work; each product’s colours and fonts can still express its identity.
From the initiative’s inception, I would pair rules with working examples, document exceptions, and define who could approve changes. That would make the system easier to use and maintain as products evolved.
A shared system is useful when it reduces repeated decisions without erasing the differences that matter.