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

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

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

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

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

” 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

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

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

” 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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

” 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

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

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

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

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

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

” 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

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

” 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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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