Design Tokens and CSS Systemising the design of your components
sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNE | December 2019
1
Slide 2
sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNE | December 2019
2
Slide 3
sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNE | December 2019
3
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
sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNE | December 2019
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 | FrontEndNE | December 2019
6
Slide 7
sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNE | December 2019
7
Slide 8
sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNE | December 2019
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 | FrontEndNE | December 2019
9
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
Colour
sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNE | December 2019
11
Slide 12
Colour
sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNE | December 2019
12
Slide 13
Typography
sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNE | December 2019
13
Slide 14
Typography
sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNE | December 2019
14
Slide 15
Typography
sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNE | December 2019
15
Slide 16
Iconography
sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNE | December 2019
16
Slide 17
Spacing
sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNE | December 2019
17
Slide 18
Borders
sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNE | December 2019
18
Slide 19
Shadows
sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNE | December 2019
19
Slide 20
Time
sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNE | December 2019
20
Slide 21
Breakpoints
sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNE | December 2019
21
Slide 22
sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNE | December 2019
22
Slide 23
sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNE | December 2019
23
Slide 24
sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNE | December 2019
24
Slide 25
sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNE | December 2019
25
Slide 26
sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNE | December 2019
26
Slide 27
sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNE | December 2019
27
Slide 28
sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNE | December 2019
28
Slide 29
sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNE | December 2019
29
Slide 30
sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNE | December 2019
30
Slide 31
sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNE | December 2019
31
Slide 32
Consistency
sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNE | December 2019
32
Slide 33
Consistency Maintainability sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNE | December 2019
33
Slide 34
Consistency Maintainability Scalability sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNE | December 2019
34
Slide 35
sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNE | December 2019
35
Slide 36
sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNE | December 2019
36
Slide 37
sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNE | December 2019
37
Slide 38
sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNE | December 2019
38
Slide 39
sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNE | December 2019
39
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
Typography — font family — font size — font weight — text transform
sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNE | December 2019
41
Slide 42
Colour — text colour — background colour
sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNE | December 2019
42
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
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
Timing — transition duration — transition property — transition timing function
sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNE | December 2019
46
Slide 47
Let’s live code. !
sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNE | December 2019
47
Slide 48
sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNE | December 2019
48
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
” 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
sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNE | December 2019
51
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
sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNE | December 2019
53
Slide 54
sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNE | December 2019
54
Slide 55
sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNE | December 2019
55
Slide 56
sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNE | December 2019
56
Slide 57
Be Where The Authors Are
sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNE | December 2019
57
Slide 58
sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNE | December 2019
58
Slide 59
Let’s live code. !
sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNE | December 2019
59
Slide 60
sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNE | December 2019
60
Slide 61
sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNE | December 2019
61
Slide 62
sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNE | December 2019
62
Slide 63
sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNE | December 2019
63
Slide 64
sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNE | December 2019
64
Slide 65
sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNE | December 2019
65
Slide 66
sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNE | December 2019
66
Slide 67
sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNE | December 2019
67
Slide 68
sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNE | December 2019
68
Slide 69
sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNE | December 2019
69
Slide 70
sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNE | December 2019
70
Slide 71
Design Tokens and CSS Systemising the design of your components
sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNE | December 2019
71