Design Tokens and CSS
Systemising the design of your components@sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNorth | February 20201

@sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNorth | February 20202

@sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNorth | February 20203

Design Tokens and CSS
Systemising the design of your components@sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNorth | February 20204

@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 ascalable and consistent visual system.
— Jina | @jina@sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNorth | February 20206

@sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNorth | February 20207

@sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNorth | February 20208"Whatever works best for that team wins.
Variables, Super Variable, Constants, Design Tokens, StyleParameters, 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 202010

Sizing | Fonts Families | Font Styles |Font Weights | Font Sizes | Line Heights| Border Styles | Border Colors | BorderRadius | 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 202011

Colour@sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNorth | February 202012

Colour@sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNorth | February 202013

Typography@sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNorth | February 202014

Typography@sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNorth | February 202015

Typography@sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNorth | February 202016

Iconography@sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNorth | February 202017

Spacing@sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNorth | February 202018

Borders@sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNorth | February 202019

Shadows@sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNorth | February 2020

20

Time

@sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNorth | February 202021

Breakpoints@sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNorth | February 2020

22

The How@sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNorth | February 202023

@sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNorth | February 202024

@sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNorth | February 202025

@sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNorth | February 202026

@sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNorth | February 202027

@sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNorth | February 202028

@sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNorth | February 202029

@sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNorth | February 202030

@sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNorth | February 202031

@sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNorth | February 202032

@sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNorth | February 202033

@sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNorth | February 202034

@sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNorth | February 2020

35

The Why@sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNorth | February 202036

Consistency@sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNorth | February 202037

Consistency
Maintainability@sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNorth | February 202038

Consistency
Maintainability
Scalability@sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNorth | February 202039

@sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNorth | February 202040

@sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNorth | February 202041

@sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNorth | February 202042

@sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNorth | February 202043

@sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNorth | February 202044

@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 202046

Typography— font family— font size
— font weight— text transform@sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNorth | February 202047

Colour— text colour— background colour@sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNorth | February 202048

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 202050

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 202052"
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'slive code.
!

@sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNorth | February 202054

@sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNorth | February 202055

@sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNorth | February 202056

@sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNorth | February 202057

@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 202059

@sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNorth | February 202060

"
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) existin the design system.
— Maya King | @HiMaya@sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNorth | February 202061

@sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNorth | February 202062

@sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNorth | February 202063

@sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNorth | February 202064

@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 202066

@sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNorth | February 202067

@sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNorth | February 202068

@sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNorth | February 202069

@sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNorth | February 202070

@sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNorth | February 202071

@sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNorth | February 202072

@sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNorth | February 202073

@sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNorth | February 202074

@sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNorth | February 202075

Let'slive code.
!

@sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNorth | February 202076

@sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNorth | February 202077

@sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNorth | February 202078

@sturobson | alwaystwisted.com | Design Tokens and CSS | FrontEndNorth | February 202079

@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 202081