Design Tokens and CSS: Systemising the Design of Components

A presentation at London CSS in August 2019 in London, UK by Stuart Robson

Slide 1

Slide 1

Design Tokens and CSS Systemising the design of your components sturobson | alwaystwisted.com | Design Tokens and CSS | London CSS | August 2019 1

Slide 2

Slide 2

sturobson | alwaystwisted.com | Design Tokens and CSS | London CSS | August 2019 2

Slide 3

Slide 3

sturobson | alwaystwisted.com | Design Tokens and CSS | London CSS | August 2019 3

Slide 4

Slide 4

sturobson | alwaystwisted.com | Design Tokens and CSS | London CSS | August 2019 4

Slide 5

Slide 5

Design Tokens and CSS Systemising the design of your components sturobson | alwaystwisted.com | Design Tokens and CSS | London CSS | August 2019 5

Slide 6

Slide 6

sturobson | alwaystwisted.com | Design Tokens and CSS | London CSS | August 2019 6

Slide 7

Slide 7

” Design Tokens are the visual atoms of the design system – specifically, they are named entities that store visual design attributes. We use them in place of hard–coded values in order to maintain a scalable and consistent visual system. — Jina | @jina sturobson | alwaystwisted.com | Design Tokens and CSS | London CSS | August 2019 7

Slide 8

Slide 8

sturobson | alwaystwisted.com | Design Tokens and CSS | London CSS | August 2019 8

Slide 9

Slide 9

sturobson | alwaystwisted.com | Design Tokens and CSS | London CSS | August 2019 9

Slide 10

Slide 10

” Whatever works best for that team wins. Variables, Super Variable, Constants, Design Tokens, Style Parameters, Style Dictionary, Primitives, Subatomic Particles, Style Expressions. — Jina | @jina sturobson | alwaystwisted.com | Design Tokens and CSS | London CSS | August 2019 10

Slide 11

Slide 11

Sizing | Fonts Families | Font Styles | Font Weights | Font Sizes | Line Heights | Border Styles | Border Colors | Border Radius | Horizontal Rule Colors | Background Colors | Gradients | Background Gradients | Box Shadows | Text Colors | Text Shadows | Time | Media Queries | Z Index | Icons sturobson | alwaystwisted.com | Design Tokens and CSS | London CSS | August 2019 11

Slide 12

Slide 12

Colour sturobson | alwaystwisted.com | Design Tokens and CSS | London CSS | August 2019 12

Slide 13

Slide 13

Colour sturobson | alwaystwisted.com | Design Tokens and CSS | London CSS | August 2019 13

Slide 14

Slide 14

Typography sturobson | alwaystwisted.com | Design Tokens and CSS | London CSS | August 2019 14

Slide 15

Slide 15

Typography sturobson | alwaystwisted.com | Design Tokens and CSS | London CSS | August 2019 15

Slide 16

Slide 16

Typography sturobson | alwaystwisted.com | Design Tokens and CSS | London CSS | August 2019 16

Slide 17

Slide 17

Iconography sturobson | alwaystwisted.com | Design Tokens and CSS | London CSS | August 2019 17

Slide 18

Slide 18

Spacing sturobson | alwaystwisted.com | Design Tokens and CSS | London CSS | August 2019 18

Slide 19

Slide 19

Borders sturobson | alwaystwisted.com | Design Tokens and CSS | London CSS | August 2019 19

Slide 20

Slide 20

Shadows sturobson | alwaystwisted.com | Design Tokens and CSS | London CSS | August 2019 20

Slide 21

Slide 21

Time sturobson | alwaystwisted.com | Design Tokens and CSS | London CSS | August 2019 21

Slide 22

Slide 22

Breakpoints sturobson | alwaystwisted.com | Design Tokens and CSS | London CSS | August 2019 22

Slide 23

Slide 23

sturobson | alwaystwisted.com | Design Tokens and CSS | London CSS | August 2019 23

Slide 24

Slide 24

sturobson | alwaystwisted.com | Design Tokens and CSS | London CSS | August 2019 24

Slide 25

Slide 25

sturobson | alwaystwisted.com | Design Tokens and CSS | London CSS | August 2019 25

Slide 26

Slide 26

sturobson | alwaystwisted.com | Design Tokens and CSS | London CSS | August 2019 26

Slide 27

Slide 27

sturobson | alwaystwisted.com | Design Tokens and CSS | London CSS | August 2019 27

Slide 28

Slide 28

sturobson | alwaystwisted.com | Design Tokens and CSS | London CSS | August 2019 28

Slide 29

Slide 29

Consistency sturobson | alwaystwisted.com | Design Tokens and CSS | London CSS | August 2019 29

Slide 30

Slide 30

Consistency Maintainability sturobson | alwaystwisted.com | Design Tokens and CSS | London CSS | August 2019 30

Slide 31

Slide 31

Consistency Maintainability Scalability sturobson | alwaystwisted.com | Design Tokens and CSS | London CSS | August 2019 31

Slide 32

Slide 32

sturobson | alwaystwisted.com | Design Tokens and CSS | London CSS | August 2019 32

Slide 33

Slide 33

sturobson | alwaystwisted.com | Design Tokens and CSS | London CSS | August 2019 33

Slide 34

Slide 34

sturobson | alwaystwisted.com | Design Tokens and CSS | London CSS | August 2019 34

Slide 35

Slide 35

sturobson | alwaystwisted.com | Design Tokens and CSS | London CSS | August 2019 35

Slide 36

Slide 36

sturobson | alwaystwisted.com | Design Tokens and CSS | London CSS | August 2019 36

Slide 37

Slide 37

Variants — Typography — Palette — Borders — Shadow — Spacing — Interaction: hover, focus, active states sturobson | alwaystwisted.com | Design Tokens and CSS | London CSS | August 2019 37

Slide 38

Slide 38

Typography — font family — font size — font weight — text transform sturobson | alwaystwisted.com | Design Tokens and CSS | London CSS | August 2019 38

Slide 39

Slide 39

Colour — text colour — background colour sturobson | alwaystwisted.com | Design Tokens and CSS | London CSS | August 2019 39

Slide 40

Slide 40

Borders — border colour — border style — border width — border radius sturobson | alwaystwisted.com | Design Tokens and CSS | London CSS | August 2019 40

Slide 41

Slide 41

Spacing — padding top — padding bottom — padding left — padding right — margin top — margin bottom — margin left — margin right sturobson | alwaystwisted.com | Design Tokens and CSS | London CSS | August 2019 41

Slide 42

Slide 42

Interactive States — hover text colour — hover background colour — hover box shadow — focus text colour — focus background colour — focus box shadow — focus border colour — focus border width sturobson | alwaystwisted.com | Design Tokens and CSS | London CSS | August 2019 42

Slide 43

Slide 43

Timing — transition duration — transition property — transition timing function sturobson | alwaystwisted.com | Design Tokens and CSS | London CSS | August 2019 43

Slide 44

Slide 44

Let’s live code. ! sturobson | alwaystwisted.com | Design Tokens and CSS | London CSS | August 2019 44

Slide 45

Slide 45

sturobson | alwaystwisted.com | Design Tokens and CSS | London CSS | August 2019 45

Slide 46

Slide 46

” When there’s an update to our brand colors or typography, tokens can help streamline the redesign process. — Maya King | @HiMaya sturobson | alwaystwisted.com | Design Tokens and CSS | London CSS | August 2019 46

Slide 47

Slide 47

” There’s always this internal struggle in design systems, how flexible you want to be versus how consistent you wanna be, and what constraints you want to introduce. — Sarah Federman | @SarahFederman sturobson | alwaystwisted.com | Design Tokens and CSS | London CSS | August 2019 47

Slide 48

Slide 48

sturobson | alwaystwisted.com | Design Tokens and CSS | London CSS | August 2019 48

Slide 49

Slide 49

” By making tokens available to all digital teams, we can enable them to create custom experiences that are aligned to current visual standards when a component does not (or will not) exist in the design system. — Maya King | @HiMaya sturobson | alwaystwisted.com | Design Tokens and CSS | London CSS | August 2019 49

Slide 50

Slide 50

sturobson | alwaystwisted.com | Design Tokens and CSS | London CSS | August 2019 50

Slide 51

Slide 51

sturobson | alwaystwisted.com | Design Tokens and CSS | London CSS | August 2019 51

Slide 52

Slide 52

Be Where The Authors Are sturobson | alwaystwisted.com | Design Tokens and CSS | London CSS | August 2019 52

Slide 53

Slide 53

sturobson | alwaystwisted.com | Design Tokens and CSS | London CSS | August 2019 53

Slide 54

Slide 54

Let’s live code. ! sturobson | alwaystwisted.com | Design Tokens and CSS | London CSS | August 2019 54

Slide 55

Slide 55

sturobson | alwaystwisted.com | Design Tokens and CSS | London CSS | August 2019 55

Slide 56

Slide 56

sturobson | alwaystwisted.com | Design Tokens and CSS | London CSS | August 2019 56

Slide 57

Slide 57

sturobson | alwaystwisted.com | Design Tokens and CSS | London CSS | August 2019 57

Slide 58

Slide 58

Design Tokens and CSS Systemising the design of your components sturobson | alwaystwisted.com | Design Tokens and CSS | London CSS | August 2019 58