Theming with Design Tokens

A presentation at Into Design Systems in September 2021 in by Danny Banks

Slide 1

Slide 1

Danny Banks @dbanksdesign

Slide 2

Slide 2

🌶🌶🌶🌶🌶🌶🌶🌶🌶🌶🌶🌶🌶🌶🌶🌶🌶

Slide 3

Slide 3

Slide 4

Slide 4

Slide 5

Slide 5

Slide 6

Slide 6

Slide 7

Slide 7

Slide 8

Slide 8

Mutually Exclusive Build-time Hierarchical

Slide 9

Slide 9

Modes Dynamic Contextual Run-time Flat

Slide 10

Slide 10

Slide 11

Slide 11

Semantic naming ) ( ) ) ( ( ) ( Ordinal Primary Secondary Tertiary Quaternary Scale Small 1 Medium 2 Large 3 XL 4 Categorical Info Warning Error Success

Slide 12

Slide 12

References Names

Slide 13

Slide 13

csszengarden.com

Slide 14

Slide 14

bradfrost.com/blog/post/creating-themeable-design-systems/

Slide 15

Slide 15

hihayk.github.io/shaper

Slide 16

Slide 16

W3C Design Token Community Group designtokens.org github.com/design-tokens Resources Resources Design Systems Slack https://design.systems/slack/ #topic-design-tokens Awesome Design Tokens github.com/sturobson/AwesomeDesign-Tokens

Slide 17

Slide 17

https://bit.ly/theming-with-design-tokens Danny Banks @dbanksdesign