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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

” 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

” 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

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

” 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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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