A presentation at Into Design Systems by
How design tokens empower multi-brand design systems Louis Chenais Specify
Into Design Systems #2
2021 Sept 28th
I’m Louis Chenais
Co-founder & Chief Evangelist
W3C Design Tokens Community Group Member
Design System aficionado
Previously Front-End Developer @ SportEasy, 5emeGauche & Ultranoir
Find me on •
Why this topic?
What’s in store for us
What are multi-brand design systems?
🤔 What does multi-brand even mean?
Many enterprise companies have a big product portfolio:
That portfolio can even be:
Brand architecture models
The firm is the brand. It’s a collective of complementary brands that cater to unique audiences but benefit from shared equity under the same umbrella.
House of brands
The branding is focused on the subset brands. Subset brands benefit from a strategic or operational alliance, but may serve customers in different ways, without an obvious connection for the consumer.
The hybrid model aims to incorporate elements of both the branded house and house of brands models to give each brand maximum advantage. Hybrid brand model is often the result of acquisitions.
Levers you can pull to adapt a multi-brand design system:
Your branding is like water. Let it soak your products. Let it flood your market. Let it bring life to your whole organization.
How brand models shape design systems?
Credits: Sergej Spomer 25
Credits: Sergej Spomer
• One central design system feeding all the sub-brands • Design system is “strict” and changes are controlled • Overriding styles on components is discouraged
House of brands
• One central design system feeding all the sub-brands with as much elements as possible • Every sub-brand has its own design system
• Mix of branded house and house of brands • One or several design systems will feed the organization
Why Stitch was created
• 30+ style sheets • Bloated code / Page load • No shared terminology • Updates near impossible • Brand expression hampered
• 75% design and dev time savings leveraging re-usable code and design, netting $2.5M YOY cost savings • 50-80% time saving • 300% return on investment • 100% on brand
“Design systems are not just about style guides, component libraries, UI kits, etc. A good design system empowers change in your company culture.”
— Jina Anne | @jina 41
Design tokens: divide and conquer
“Design tokens are a language for communicating intent between different parts of a system.”
— Ethan Marcotte | @beep
What is a Design API ?
Crafting cohesive user experiences across several platforms is a real challenge.
Design systems to the rescue
“A design system isn’t a project. It’s a product, serving products.”
— Nathan Curtis | @nathancurtis
Documentation Internal processes
And many other things…
Design APIs are the logical evolution of design systems.
“An interoperable, guessable design API is the foundation of a fully networked design system, […]. It’s the next step in the evolution of design systems.”
— Matthew Ström | A design API in practice
Demo of a design API
@chuckn0risk • lucho.cool
View How Design-Tokens Empower Multi-Brand Design Systems on Notist.