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/TfztDS5nOY...
bradfrost.com/blog/post/creat...
bradfrost.com/blog/post/the-m...
www.commandbar.com/blog/dark-...
bradfrost.com/blog/post/a-glo...
bradfrost.com/blog/post/dark-...
bradfrost.com/blog/post/the-d...
/ design-system-pace-lay...
/ boring-design
Learn more at 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