Le Petit System 2.0
Design system & rebranding
Client Le Petit Ballon
Year 2024
Disciplines Design Systems · Brand · UI
Team 1 Creative Director · 1 Manager · 2 Designers · 2 Developers
My role Design System Lead · UI Design · Brand Integration
→ Read full case study
Challenge
Two business pivots in two years left the brand fragmented and the system hard to design with. The colour palette had grown to 350 styles. Typography wasn't meeting visual or functional needs, leading to low adoption. Eight months to rebuild both from the ground up — alongside a platform migration from Magento to Shopify.
Approach
Rebuilt foundations first — type system tested across responsive scales in Figma before anything was finalised, applied across layouts to evaluate legibility and hierarchy.
Reduced 350 colour styles to 46 primitives, restructured into primitive and semantic layers for accessibility and scalability. Every combination tested against WCAG 2.1 with Stark.
Rolled out components gradually — prioritised by need, in parallel with the ongoing website redesign. Not everything at once.
Introduced a weekly "Designers only" ritual from day one — a space to share explorations, raise questions, and build shared ownership of the new foundations.
Impact
colour styles reduced to primitives
350 → 46
text style adjusted after a full year of implementation
1
developer complaints about detached text styles
0
The system was adopted across product, CRM, and marketing. Non-design teams gained independence in building visual assets. The core system remains stable while the brand continues to evolve.
"It doesn't have to be perfect — what truly matters is adoption."
Tested across responsive scales in Figma. After a year of implementation, only one pricing style needed adjustment.
350 styles reduced to 46 primitives. Restructured into primitive and semantic layers — bolder, more scalable, WCAG 2.1 verified.
Rolled out gradually, prioritised by need alongside the website redesign.
Built in Figma for the product team — components, patterns, and design–code decisions in one place.
The system in production. Delivered on time alongside the Shopify migration — type, colour, components, and brand voice unified across digital and physical touchpoints.