Systems of Systems and Theming with Brad Frost and Chris Bloom

Explore a system of systems approach with Brad Frost and Chris Bloom. Learn how to effectively manage theming and tokens for a versatile and robust user interface. In this webinar, we cover:
- The fundamentals of design tokens and their role as the raw ingredients of a design language for user interfaces.
- An explanation of a three-tiered token architecture to support branding needs, including handling legacy designs and accommodating light and dark modes.
- Strategies for using CSS variables and custom properties to enhance multi-branded design system experiences across various frameworks.
- Insights into the practical challenges and considerations when implementing web components and shadow DOM in real-world projects.
- Effective collaboration and the importance of a global design system to streamline design processes and focus on unique, impactful work.
Timestamps
00:00 Design systems are essential for large organizations.
06:50 Design systems should be as simple as needed.
13:38 Mapping Starbucks green to brand colors and components.
19:10 Web components enable consistent, adaptable UI delivery.
26:38 Establish thoughtful and robust theming system early.
31:34 Form controls are important for shared functionality.
34:33 Design tokens enable cross-disciplinary collaboration between designers and developers.
43:01 Balancing practicality with long-term relevance in design systems.
49:44 Creating web components presents challenges and benefits.
51:55 Adapting to web components, facing challenges positively.
56:57 The need for accessible web design components and collaboration.
Links
www.figma.com/file/TfztDS5nOYVLGChUTbR78B/Design-System-Ecosystem?type=whiteboard&node-id=0-1
bradfrost.com/blog/post/creating-themeable-design-systems/
bradfrost.com/blog/post/the-many-faces-of-themeable-design-systems/
www.commandbar.com/blog/dark-mode-considerations/
bradfrost.com/blog/post/a-global-design-system/
bradfrost.com/blog/post/dark-mode-vs-inverted/
bradfrost.com/blog/post/the-design-system-ecosystem/
bigmedium.com/ideas/design-system-pace-layers-slow-fast.html
bigmedium.com/ideas/boring-design-systems.html
Learn more at knapsack.cloud or reach out to us at [e-mail]
Keywords
design tokens, token architecture, brand primitives, CSS variables, web components, shadow DOM, theming, light and dark modes, design system challenges, cross-disciplinary collaboration, Figma, style dictionary, Knapsack, global design system, Brad Frost, Chris Bloom