A presentation at London CSS in in London, UK by Stuart Robson
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
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.
