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 https://www.figma.com/file/TfztDS5nOYVLGChUTbR78B/Design-System-Ecosystem?type=whiteboard&node-id=0-1 https://bradfrost.com/blog/post/creating-themeable-design-systems/ https://bradfrost.com/blog/post/the-many-faces-of-themeable-design-systems/ https://www.commandbar.com/blog/dark-mode-considerations/ https://bradfrost.com/blog/post/a-global-design-system/ https://bradfrost.com/blog/post/dark-mode-vs-inverted/ https://bradfrost.com/blog/post/the-design-system-ecosystem/ https://bigmedium.com/ideas/design-system-pace-layers-slow-fast.html https://bigmedium.com/ideas/boring-design-systems.html

Learn more at https://knapsack.cloud or reach out to us at hello@knapsack.cloud

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

Systems of Systems and Theming with Brad Frost and Chris Bloom