Design Tokens and CSS Systemising the design of your components
@sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNorth | February 2020
1
Slide 2
@sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNorth | February 2020
2
Slide 3
@sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNorth | February 2020
3
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
@sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNorth | February 2020
5
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
@sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNorth | February 2020
7
Slide 8
@sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNorth | February 2020
8
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
The What @sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNorth | February 2020
10
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
Colour
@sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNorth | February 2020
12
Slide 13
Colour
@sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNorth | February 2020
13
Slide 14
Typography
@sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNorth | February 2020
14
Slide 15
Typography
@sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNorth | February 2020
15
Slide 16
Typography
@sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNorth | February 2020
16
Slide 17
Iconography
@sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNorth | February 2020
17
Slide 18
Spacing
@sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNorth | February 2020
18
Slide 19
Borders
@sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNorth | February 2020
19
Slide 20
Shadows
@sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNorth | February 2020
20
Slide 21
Time
@sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNorth | February 2020
21
Slide 22
Breakpoints
@sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNorth | February 2020
22
Slide 23
The How @sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNorth | February 2020
23
Slide 24
@sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNorth | February 2020
24
Slide 25
@sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNorth | February 2020
25
Slide 26
@sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNorth | February 2020
26
Slide 27
@sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNorth | February 2020
27
Slide 28
@sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNorth | February 2020
28
Slide 29
@sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNorth | February 2020
29
Slide 30
@sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNorth | February 2020
30
Slide 31
@sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNorth | February 2020
31
Slide 32
@sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNorth | February 2020
32
Slide 33
@sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNorth | February 2020
33
Slide 34
@sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNorth | February 2020
34
Slide 35
@sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNorth | February 2020
35
Slide 36
The Why @sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNorth | February 2020
36
Slide 37
Consistency
@sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNorth | February 2020
37
Slide 38
Consistency Maintainability @sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNorth | February 2020
38
Slide 39
Consistency Maintainability Scalability @sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNorth | February 2020
39
Slide 40
@sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNorth | February 2020
40
Slide 41
@sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNorth | February 2020
41
Slide 42
@sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNorth | February 2020
42
Slide 43
@sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNorth | February 2020
43
Slide 44
@sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNorth | February 2020
44
Slide 45
@sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNorth | February 2020
45
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
Typography — font family — font size — font weight — text transform
@sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNorth | February 2020
47
Slide 48
Colour — text colour — background colour
@sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNorth | February 2020
48
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
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
Timing — transition duration — transition property — transition timing function
@sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNorth | February 2020
52
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
Let’s live code. !
@sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNorth | February 2020
54
Slide 55
@sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNorth | February 2020
55
Slide 56
@sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNorth | February 2020
56
Slide 57
@sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNorth | February 2020
57
Slide 58
@sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNorth | February 2020
58
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
@sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNorth | February 2020
60
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
@sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNorth | February 2020
62
Slide 63
@sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNorth | February 2020
63
Slide 64
@sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNorth | February 2020
64
Slide 65
@sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNorth | February 2020
65
Slide 66
Be Where The Authors Are
@sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNorth | February 2020
66
Slide 67
@sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNorth | February 2020
67
Slide 68
@sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNorth | February 2020
68
Slide 69
@sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNorth | February 2020
69
Slide 70
@sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNorth | February 2020
70
Slide 71
@sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNorth | February 2020
71
Slide 72
@sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNorth | February 2020
72
Slide 73
@sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNorth | February 2020
73
Slide 74
@sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNorth | February 2020
74
Slide 75
@sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNorth | February 2020
75
Slide 76
Let’s live code. !
@sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNorth | February 2020
76
Slide 77
@sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNorth | February 2020
77
Slide 78
@sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNorth | February 2020
78
Slide 79
@sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNorth | February 2020
79
Slide 80
@sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNorth | February 2020
80
Slide 81
Design Tokens and CSS Systemising the design of your components
@sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNorth | February 2020
81