Design Tokens and CSS: Systemising the Design of Components

A presentation at FrontEndNE in December 2019 in Newcastle upon Tyne, 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 | FrontEndNE | December 2019 1

Slide 2

Slide 2

sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNE | December 2019 2

Slide 3

Slide 3

sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNE | December 2019 3

Slide 4

Slide 4

Design Tokens and CSS Systemising the design of your components sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNE | December 2019 4

Slide 5

Slide 5

sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNE | December 2019 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 | FrontEndNE | December 2019 6

Slide 7

Slide 7

sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNE | December 2019 7

Slide 8

Slide 8

sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNE | December 2019 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 | FrontEndNE | December 2019 9

Slide 10

Slide 10

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 | FrontEndNE | December 2019 10

Slide 11

Slide 11

Colour sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNE | December 2019 11

Slide 12

Slide 12

Colour sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNE | December 2019 12

Slide 13

Slide 13

Typography sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNE | December 2019 13

Slide 14

Slide 14

Typography sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNE | December 2019 14

Slide 15

Slide 15

Typography sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNE | December 2019 15

Slide 16

Slide 16

Iconography sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNE | December 2019 16

Slide 17

Slide 17

Spacing sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNE | December 2019 17

Slide 18

Slide 18

Borders sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNE | December 2019 18

Slide 19

Slide 19

Shadows sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNE | December 2019 19

Slide 20

Slide 20

Time sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNE | December 2019 20

Slide 21

Slide 21

Breakpoints sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNE | December 2019 21

Slide 22

Slide 22

sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNE | December 2019 22

Slide 23

Slide 23

sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNE | December 2019 23

Slide 24

Slide 24

sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNE | December 2019 24

Slide 25

Slide 25

sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNE | December 2019 25

Slide 26

Slide 26

sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNE | December 2019 26

Slide 27

Slide 27

sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNE | December 2019 27

Slide 28

Slide 28

sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNE | December 2019 28

Slide 29

Slide 29

sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNE | December 2019 29

Slide 30

Slide 30

sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNE | December 2019 30

Slide 31

Slide 31

sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNE | December 2019 31

Slide 32

Slide 32

Consistency sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNE | December 2019 32

Slide 33

Slide 33

Consistency Maintainability sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNE | December 2019 33

Slide 34

Slide 34

Consistency Maintainability Scalability sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNE | December 2019 34

Slide 35

Slide 35

sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNE | December 2019 35

Slide 36

Slide 36

sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNE | December 2019 36

Slide 37

Slide 37

sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNE | December 2019 37

Slide 38

Slide 38

sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNE | December 2019 38

Slide 39

Slide 39

sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNE | December 2019 39

Slide 40

Slide 40

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

Slide 41

Slide 41

Typography — font family — font size — font weight — text transform sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNE | December 2019 41

Slide 42

Slide 42

Colour — text colour — background colour sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNE | December 2019 42

Slide 43

Slide 43

Borders — border colour — border style — border width — border radius sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNE | December 2019 43

Slide 44

Slide 44

Spacing — padding top — padding bottom — padding left — padding right — margin top — margin bottom — margin left — margin right sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNE | December 2019 44

Slide 45

Slide 45

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 | FrontEndNE | December 2019 45

Slide 46

Slide 46

Timing — transition duration — transition property — transition timing function sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNE | December 2019 46

Slide 47

Slide 47

Let’s live code. ! sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNE | December 2019 47

Slide 48

Slide 48

sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNE | December 2019 48

Slide 49

Slide 49

” 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 | FrontEndNE | December 2019 49

Slide 50

Slide 50

” 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 | FrontEndNE | December 2019 50

Slide 51

Slide 51

sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNE | December 2019 51

Slide 52

Slide 52

” 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 | FrontEndNE | December 2019 52

Slide 53

Slide 53

sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNE | December 2019 53

Slide 54

Slide 54

sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNE | December 2019 54

Slide 55

Slide 55

sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNE | December 2019 55

Slide 56

Slide 56

sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNE | December 2019 56

Slide 57

Slide 57

Be Where The Authors Are sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNE | December 2019 57

Slide 58

Slide 58

sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNE | December 2019 58

Slide 59

Slide 59

Let’s live code. ! sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNE | December 2019 59

Slide 60

Slide 60

sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNE | December 2019 60

Slide 61

Slide 61

sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNE | December 2019 61

Slide 62

Slide 62

sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNE | December 2019 62

Slide 63

Slide 63

sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNE | December 2019 63

Slide 64

Slide 64

sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNE | December 2019 64

Slide 65

Slide 65

sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNE | December 2019 65

Slide 66

Slide 66

sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNE | December 2019 66

Slide 67

Slide 67

sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNE | December 2019 67

Slide 68

Slide 68

sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNE | December 2019 68

Slide 69

Slide 69

sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNE | December 2019 69

Slide 70

Slide 70

sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNE | December 2019 70

Slide 71

Slide 71

Design Tokens and CSS Systemising the design of your components sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNE | December 2019 71