Design Tokens and CSS: Systemising the Design of Components

A presentation at Front End North in February 2020 in Sheffield, 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 | FrontEndNorth | February 2020 1

Slide 2

Slide 2

@sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNorth | February 2020 2

Slide 3

Slide 3

@sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNorth | February 2020 3

Slide 4

Slide 4

Design Tokens and CSS Systemising the design of your components @sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNorth | February 2020 4

Slide 5

Slide 5

@sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNorth | February 2020 5

Slide 6

Slide 6

” 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 | FrontEndNorth | February 2020 6

Slide 7

Slide 7

@sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNorth | February 2020 7

Slide 8

Slide 8

@sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNorth | February 2020 8

Slide 9

Slide 9

” 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 | FrontEndNorth | February 2020 9

Slide 10

Slide 10

The What @sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNorth | February 2020 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 | FrontEndNorth | February 2020 11

Slide 12

Slide 12

Colour @sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNorth | February 2020 12

Slide 13

Slide 13

Colour @sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNorth | February 2020 13

Slide 14

Slide 14

Typography @sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNorth | February 2020 14

Slide 15

Slide 15

Typography @sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNorth | February 2020 15

Slide 16

Slide 16

Typography @sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNorth | February 2020 16

Slide 17

Slide 17

Iconography @sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNorth | February 2020 17

Slide 18

Slide 18

Spacing @sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNorth | February 2020 18

Slide 19

Slide 19

Borders @sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNorth | February 2020 19

Slide 20

Slide 20

Shadows @sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNorth | February 2020 20

Slide 21

Slide 21

Time @sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNorth | February 2020 21

Slide 22

Slide 22

Breakpoints @sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNorth | February 2020 22

Slide 23

Slide 23

The How @sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNorth | February 2020 23

Slide 24

Slide 24

@sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNorth | February 2020 24

Slide 25

Slide 25

@sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNorth | February 2020 25

Slide 26

Slide 26

@sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNorth | February 2020 26

Slide 27

Slide 27

@sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNorth | February 2020 27

Slide 28

Slide 28

@sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNorth | February 2020 28

Slide 29

Slide 29

@sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNorth | February 2020 29

Slide 30

Slide 30

@sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNorth | February 2020 30

Slide 31

Slide 31

@sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNorth | February 2020 31

Slide 32

Slide 32

@sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNorth | February 2020 32

Slide 33

Slide 33

@sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNorth | February 2020 33

Slide 34

Slide 34

@sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNorth | February 2020 34

Slide 35

Slide 35

@sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNorth | February 2020 35

Slide 36

Slide 36

The Why @sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNorth | February 2020 36

Slide 37

Slide 37

Consistency @sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNorth | February 2020 37

Slide 38

Slide 38

Consistency Maintainability @sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNorth | February 2020 38

Slide 39

Slide 39

Consistency Maintainability Scalability @sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNorth | February 2020 39

Slide 40

Slide 40

@sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNorth | February 2020 40

Slide 41

Slide 41

@sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNorth | February 2020 41

Slide 42

Slide 42

@sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNorth | February 2020 42

Slide 43

Slide 43

@sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNorth | February 2020 43

Slide 44

Slide 44

@sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNorth | February 2020 44

Slide 45

Slide 45

@sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNorth | February 2020 45

Slide 46

Slide 46

Variants — Typography — Palette — Borders — Shadow — Spacing — Interaction: hover, focus, active states @sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNorth | February 2020 46

Slide 47

Slide 47

Typography — font family — font size — font weight — text transform @sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNorth | February 2020 47

Slide 48

Slide 48

Colour — text colour — background colour @sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNorth | February 2020 48

Slide 49

Slide 49

Borders — border colour — border style — border width — border radius @sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNorth | February 2020 49

Slide 50

Slide 50

Spacing — padding top — padding bottom — padding left — padding right — margin top — margin bottom — margin left — margin right @sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNorth | February 2020 50

Slide 51

Slide 51

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 | FrontEndNorth | February 2020 51

Slide 52

Slide 52

Timing — transition duration — transition property — transition timing function @sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNorth | February 2020 52

Slide 53

Slide 53

” 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 | FrontEndNorth | February 2020 53

Slide 54

Slide 54

Let’s live code. ! @sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNorth | February 2020 54

Slide 55

Slide 55

@sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNorth | February 2020 55

Slide 56

Slide 56

@sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNorth | February 2020 56

Slide 57

Slide 57

@sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNorth | February 2020 57

Slide 58

Slide 58

@sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNorth | February 2020 58

Slide 59

Slide 59

” 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 | FrontEndNorth | February 2020 59

Slide 60

Slide 60

@sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNorth | February 2020 60

Slide 61

Slide 61

” 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 | FrontEndNorth | February 2020 61

Slide 62

Slide 62

@sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNorth | February 2020 62

Slide 63

Slide 63

@sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNorth | February 2020 63

Slide 64

Slide 64

@sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNorth | February 2020 64

Slide 65

Slide 65

@sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNorth | February 2020 65

Slide 66

Slide 66

Be Where The Authors Are @sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNorth | February 2020 66

Slide 67

Slide 67

@sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNorth | February 2020 67

Slide 68

Slide 68

@sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNorth | February 2020 68

Slide 69

Slide 69

@sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNorth | February 2020 69

Slide 70

Slide 70

@sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNorth | February 2020 70

Slide 71

Slide 71

@sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNorth | February 2020 71

Slide 72

Slide 72

@sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNorth | February 2020 72

Slide 73

Slide 73

@sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNorth | February 2020 73

Slide 74

Slide 74

@sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNorth | February 2020 74

Slide 75

Slide 75

@sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNorth | February 2020 75

Slide 76

Slide 76

Let’s live code. ! @sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNorth | February 2020 76

Slide 77

Slide 77

@sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNorth | February 2020 77

Slide 78

Slide 78

@sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNorth | February 2020 78

Slide 79

Slide 79

@sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNorth | February 2020 79

Slide 80

Slide 80

@sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNorth | February 2020 80

Slide 81

Slide 81

Design Tokens and CSS Systemising the design of your components @sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNorth | February 2020 81