0:00 A design system is like wellness in a post-covid world 2:48 What is a design system? 3:35 Flexibility aspect of a design system shown using Code Nast brand interface inventory 5:48 What is a button, really? The skeleton of a button. 7:12 Demo: themeable buttons 7:52 Demo: themeable kicker with real content 8:48 Themeable design system can support... 10:01 How to do this?; What we're used to, and the problem with what we're used to. 11:35 Design tokens intro; Design tokens in the context of multiple platforms, products, etc. 13:30 Design tokens properties ## A THREE-TIERED TOKEN SYSTEM 19:23 Summary of the token system ### TIER 1 14:40 Tier 1 Tokens: Definitions (raw ingredients) 15:38 Tier 1 Tokens from typography standpoint ### TIER 2 16:14 Tier 2 Tokens: Semantic Usage (middle/semantic/usage/theme layer) 17:25 Tier 2 Tokens: Semantic Typography ### TIER 3 18:04 Tier 3 Tokens: Design System component variables --- 20:00 Component library stays stable - overview 20:45 Component library stays stable - examples ## TOOLS 21:25 In Figma: Theemo; Themer 23:14 In code: Salesforce's Theo; Amazon's Style Dictionary 23:33 What do these tools do? ## DEMO TIME 28:00 Demo time (Storybook) 28:28 Code editor view 30:45 Summary 31:09 Code editor tour 31:45 Badge component example 32:26 Where does the magic happen?; Tier 1 tokens colors.json overview 33:30 Tool to inspect the token definitions 34:37 Naming conventions for Tier 1 typography presets 35:15 Tier 2 with e.g. supporting marketing subsites needs 36:49 Tier 2 Tools in a toolshed analogy 38:12 Tier 1 typography presets, Tier 2 typography presets peek; 39:47 Tier 2 color tokens --- 41:15 Wrapping up 42:35 Design tokens resource 42:53 The promise of design systems 43:37 When you're finished changing, you're finished. ## QUESTIONS 45:47 Question 1: is there a right or wrong time for a DS to be introduced? 48:27 Question 2: is it a technical or a human problem to let brands feel like they can express themslves?
0:00 A design system is like wellness in a post-covid world
2:48 What is a design system?
3:35 Flexibility aspect of a design system shown using Code Nast brand interface inventory
5:48 What is a button, really? The skeleton of a button.
7:12 Demo: themeable buttons
7:52 Demo: themeable kicker with real content
8:48 Themeable design system can support...
10:01 How to do this?; What we're used to, and the problem with what we're used to.
11:35 Design tokens intro; Design tokens in the context of multiple platforms, products, etc.
13:30 Design tokens properties
## A THREE-TIERED TOKEN SYSTEM
19:23 Summary of the token system
### TIER 1
14:40 Tier 1 Tokens: Definitions (raw ingredients)
15:38 Tier 1 Tokens from typography standpoint
### TIER 2
16:14 Tier 2 Tokens: Semantic Usage (middle/semantic/usage/theme layer)
17:25 Tier 2 Tokens: Semantic Typography
### TIER 3
18:04 Tier 3 Tokens: Design System component variables
---
20:00 Component library stays stable - overview
20:45 Component library stays stable - examples
## TOOLS
21:25 In Figma: Theemo; Themer
23:14 In code: Salesforce's Theo; Amazon's Style Dictionary
23:33 What do these tools do?
## DEMO TIME
28:00 Demo time (Storybook)
28:28 Code editor view
30:45 Summary
31:09 Code editor tour
31:45 Badge component example
32:26 Where does the magic happen?; Tier 1 tokens colors.json overview
33:30 Tool to inspect the token definitions
34:37 Naming conventions for Tier 1 typography presets
35:15 Tier 2 with e.g. supporting marketing subsites needs
36:49 Tier 2 Tools in a toolshed analogy
38:12 Tier 1 typography presets, Tier 2 typography presets peek;
39:47 Tier 2 color tokens
---
41:15 Wrapping up
42:35 Design tokens resource
42:53 The promise of design systems
43:37 When you're finished changing, you're finished.
## QUESTIONS
45:47 Question 1: is there a right or wrong time for a DS to be introduced?
48:27 Question 2: is it a technical or a human problem to let brands feel like they can express themslves?
This video came out in 2020 (not 2023).. how have things changed since then Brad?? what would do differently now?
Wow, i totally forgot about the Css Zen garden