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

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

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

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

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

sturobson | alwaystwisted.com | Design Tokens and CSS | London CSS | August 2019 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 | London CSS | August 2019 7

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

sturobson | alwaystwisted.com | Design Tokens and CSS | London CSS | August 2019 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 | London CSS | August 2019 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 | London CSS | August 2019 11

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

” 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

” 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

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

” 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

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

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

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

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

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

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

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

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

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