A presentation at Front End North in in Sheffield, UK by Stuart Robson
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
Aren’t Design Tokens just spicy Sass variables?
Design Tokens allow you to define the low-level values of the design attributes in your Design System so that they can become the part of a shared vocabulary amongst all of Systems users and used across all of the products within Design System.
In this talk Stuart will be discussing what types of design attributes you could find in a set of Design Tokens, how you can create them once and share them anywhere, look beyond their generic usage across organisations, and how they can empower everyone to contribute to the overall Design System.
The following resources were mentioned during the presentation or are useful additional information.
Here’s what was said about this presentation on social media.
