How design tokens empower multi-brand design systems

Multi-Brand organizations need both flexibility and scalability to handle their branding at scale.

Let's see how different brand architecture models can shape design systems and foster brand consistency.

Transcript

1. How design tokens empower multi-brand design systems Louis Chenais Specify Into Design Systems #2 2021 Sept 28th
2. Bonjour 👋
3. I'm Louis Chenais • • @chuckn0risk lucho.cool Co-founder & Chief Evangelist • • W3C Design Tokens Community Group Member Design System aficionado Previously Front-End Developer @ SportEasy, 5emeGauche & Ultranoir Find me on
4. Why this topic? ❓ 4
5. 1. 2. 3. 4. What are multi-brand design systems? How brand models shape design systems? What is a Design API? Demo of a Design API What's in store for us
6. What are multi-brand design systems? 1.
7. What does multi-brand even mean? 🤔 7
8. Many enterprise companies have a big product portfolio: 1. 2. 3. 4. 5. 6. 7. 8. Google Atlassian Microsoft Amazon Volkswagen General Electric Unilever Procter & Gamble 8
9. That portfolio can even be: 1. 2. 3. Multi-product Multi-brand Multi-platform 9
10. Brand architecture models 10
11. 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. Branded House
15. 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. House of brands
18. 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. Hybrid
22. Levers you can pull to adapt a multi-brand design system: 1. 2. 3. 4. 5. 6. 7. 8. 9. Typography Image art direction Tone of voice Animation Audio guidelines Content density Color subsets Colour Iconography 22
23. Your branding is like water. Let it soak your products. Let it flood your market. Let it bring life to your whole organization. 23
24. How brand models shape design systems? 1.
25. Credits: Sergej Spomer 25
27. Credits: Sergej Spomer 27
29. Branded house • • • One central design system feeding all the sub-brands Design system is "strict" and changes are controlled Overriding styles on components is discouraged 29
30. 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 30
31. Hybrid • • Mix of branded house and house of brands One or several design systems will feed the organization 31
36. Why Stitch was created • • • • • 30+ style sheets Bloated code / Page load No shared terminology Updates near impossible Brand expression hampered 36
40. Key metrics • • • • 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 40
41. "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
42. Design tokens: divide and conquer 42
44. "Design tokens are a language for communicating intent between different parts of a system." — Ethan Marcotte | @beep 44
48. What is a Design API ? 2.
49. Crafting cohesive user experiences across several platforms is a real challenge. Current situation 🤕
50. Design systems to the rescue Nowadays:
51. "A design system isn’t a project. It’s a product, serving products." — Nathan Curtis | @nathancurtis
52. Design tokens
53. Design system Design tokens Documentation Components libraries Internal processes And many other things...
54. Design System Design team 👩 Engineering team Marketing team Accessibility team
55. Design API Tool #2 Tool #2 Tool #3
56. Design APIs are the logical evolution of design systems.
57. "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
58. Demo of a design API 4.
60. specifyapp.com Wanna try?
61. Shoukran 🙏 @chuckn0risk • lucho.cool