Design Systems and Front-End Architecture

A presentation at Colchester Digital Conference in May 2019 in Colchester, UK by Stuart Robson

Slide 1

Design Systems and Front-End Architecture @sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 1

Slide 2

@sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 3

Slide 3

What we are going to discuss today: 1. What is a Design System? 2. Do we need one? 3. Where should we start? 4. What makes a component? 5. How do we maintain it? @sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 4

Slide 4

What is a Design System? @sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 5

Slide 5

@sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 6

Slide 6

Pattern Library Style Guide Design Language @sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 9

Slide 7

A Design System contains: the who, what, where, when, why and how of a product @sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 10

Slide 8

Pattern Library The Who, The What. @sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 11

Slide 9

Style Guide The How, Where, and When. @sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 12

Slide 10

Design Language The Why. @sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 13

Slide 11

@sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 14

Slide 12

That’s a basic take. @sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 15

Slide 13

What else could be in a Design System? @sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 16

Slide 14

@sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 17

Slide 15

@sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 18

Slide 16

@sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 19

Slide 17

@sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 20

Slide 18

“ There isn’t a standard definition of ‘design system’ within the web community, and people use the term in different ways — sometimes interchangeably with ‘style guides’ and ‘pattern libraries’. — Alla Kholmatova | @craftui @sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 21

Slide 19

@sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 22

Slide 20

@sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 23

Slide 21

@sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 24

Slide 22

@sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 25

Slide 23

“ …as a community we’re starting to get a bit dogmatic about what design systems are and are not. — Sarah Federman | @sarah_federman @sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 26

Slide 24

“ It’s about systemizing the design. As a noun. That’s literally all a design system means. That’s not to say only designers can do it. — Jina | @jina @sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 27

Slide 25

What do they look like? @sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 28

Slide 26

@sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 29

Slide 27

@sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 30

Slide 28

@sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 31

Slide 29

@sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 32

Slide 30

@sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 33

Slide 31

@sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 34

Slide 32

@sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 35

Slide 33

@sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 36

Slide 34

@sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 37

Slide 35

@sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 38

Slide 36

@sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 39

Slide 37

@sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 40

Slide 38

@sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 41

Slide 39

@sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 42

Slide 40

@sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 43

Slide 41

“ A Design System isn’t a Project. It’s a Product, Serving Products. — Nathan Curtis | @nathanacurtis @sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 44

Slide 42

“ Real talk: don’t compare your design system to others. The grass is always greener, and their goals aren‘t your goals — Diana Mounter | @brocollini @sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 45

Slide 43

Do we need a Design System? @sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 46

Slide 44

Consistency @sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 47

Slide 45

Maintainability @sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 48

Slide 46

Quality @sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 49

Slide 47

@sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 50

Slide 48

“ We’re not designing pages. We’re designing systems of components. — Stephen Hay | @stephenhay @sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 51

Slide 49

Buy in @sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 52

Slide 50

“ Tiny Bootstraps — Dave Rupert | @davatron5000 @sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 53

Slide 51

Scalability @sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 54

Slide 52

Creativity @sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 55

Slide 53

“ Design systems take care of the boring 80% of what you need to design, freeing you to concentrate your creativity on the interesting and unique 20%. — Dan Mall | @danmall @sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 56

Slide 54

“ A design system is at its foundation, a set of rules. Rules and creativity are not mutually exclusive. Rules can be broken. — Mina Markham | @minamarkham @sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 57

Slide 55

Themes @sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 58

Slide 56

QA @sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 59

Slide 57

On-boarding @sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 60

Slide 58

Updates @sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 61

Slide 59

Communication —be open —don’t dictate —listen —move within exitisting workflows @sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 62

Slide 60

Be where the authors are @sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 63

Slide 61

@sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 64

Slide 62

@sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 65

Slide 63

Where should we start with a Design System? @sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 66

Slide 64

“ …start with doorknobs and end up with cathedrals. … start with cathedrals and work down to doorknobs. — Jeffrey Zeldman | @zeldman @sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 67

Slide 65

Design Principles @sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 68

Slide 66

Slide 67

@sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 70

Slide 68

@sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 71

Slide 69

@sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 72

Slide 70

@sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 73

Slide 71

Design Tokens @sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 74

Slide 72

“ 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 (such as hex values for colour or pixel values for spacing) in order to maintain a scalable and consistent visual system. — Jina | @jina @sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 75

Slide 73

Colour @sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 76

Slide 74

Colour @sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 77

Slide 75

Typography @sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 78

Slide 76

Typography @sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 79

Slide 77

Typography @sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 80

Slide 78

Iconography @sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 81

Slide 79

Spacing @sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 82

Slide 80

Borders @sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 83

Slide 81

Shadows @sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 84

Slide 82

Time @sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 85

Slide 83

Breakpoints @sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 86

Slide 84

Aren’t they just Sass variables? @sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 87

Slide 85

“ Design Tokens are an abstraction for everything impacting the visual design of an app/platform. — Sönke | @soenkerohde @sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 88

Slide 86

@sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 89

Slide 87

@sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 90

Slide 88

@sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 91

Slide 89

@sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 92

Slide 90

How will we code components? @sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 93

Slide 91

@sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 94

Slide 92

@sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 95

Slide 93

@sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 96

Slide 94

@sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 97

Slide 95

@sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 98

Slide 96

“ The Design System framework has to be platform-agnostic and meet the needs of users on a variety of different technology stacks.. — Stephanie Sullivan Rewis | @stefsull @sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 99

Slide 97

@sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 100

Slide 98

Methodologies @sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 101

Slide 99

OOCSS @sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 102

Slide 100

BEM @sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 103

Slide 101

SMACSS @sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 104

Slide 102

ITCSS @sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 105

Slide 103

OOBEMITSCSS @sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 106

Slide 104

@sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 107

Slide 105

@sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 108

Slide 106

Namespacing Component Type .a-button { … } .m-signup { … } .o-masthead { … } @sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 109

Slide 107

@sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 110

Slide 108

Serving Many Teams @sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 111

Slide 109

Namespacing Product Type .vf-heading { … } .vf-news-item__heading { … } .vf-news-group__heading { … } @sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 112

Slide 110

Namespacing .vf-grid { … } ———————————————— .embl-grid { … } @sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 113

Slide 111

Guidelines @sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 114

Slide 112

Guidelines @sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 115

Slide 113

Linting @sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 116

Slide 114

Linting @sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 117

Slide 115

What makes a component? @sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 118

Slide 116

@sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 119

Slide 117

Variants — — — — — Typography Palette Borders Shadow Spacing — Interaction: hover, focus, active states @sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 120

Slide 118

Typography — — — — font family font size font weight text transform @sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 121

Slide 119

Palette — text colour — background colour @sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 122

Slide 120

Borders — — — — border colour border style border width border radius @sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 123

Slide 121

Spacing — — — — padding top padding bottom padding left padding right — — — — margin top margin bottom margin left margin right @sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 124

Slide 122

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 — transition duration — transition property — transition timing function @sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 125

Slide 123

@sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 126

Slide 124

@sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 127

Slide 125

@sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 128

Slide 126

@sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 129

Slide 127

@sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 130

Slide 128

@sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 131

Slide 129

“ If you aren’t explicit in the way an object’s hover states, touch states, open or closed states, etc., then chances are they will be overlooked and not built. — Jina | @jina @sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 132

Slide 130

@sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 133

Slide 131

@sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 134

Slide 132

@sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 135

Slide 133

@sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 136

Slide 134

@sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 137

Slide 135

@sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 138

Slide 136

@sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 139

Slide 137

How do we maintain a Design System? @sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 140

Slide 138

“ Design systems need be easy and desirable to use by the teams using them. — Charlotte Jackson | @lottejackson @sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 141

Slide 139

@sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 142

Slide 140

@sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 143

Slide 141

@sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 144

Slide 142

@sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 145

Slide 143

Distribution @sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 146

Slide 144

@sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 147

Slide 145

@sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 148

Slide 146

@sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 149

Slide 147

@sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 150

Slide 148

npm install my-components @sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 151

Slide 149

npm install my-components/my-button @sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 152

Slide 150

Versioning @sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 153

Slide 151

@sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 154

Slide 152

@sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 155

Slide 153

Testing @sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 156

Slide 154

@sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 157

Slide 155

@sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 158

Slide 156

@sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 159

Slide 157

@sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 160

Slide 158

@sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 161

Slide 159

Announcements @sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 162

Slide 160

“ Successful design patterns don’t exist in a vacuum. — Yesenia Perez-Cruz | @yeseniaa @sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 163

Slide 161

@sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 164

Slide 162

@sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 165

Slide 163

@sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 166

Slide 164

Component Status @sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 167

Slide 165

@sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 168

Slide 166

@sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 169

Slide 167

@sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 170

Slide 168

New Components @sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 171

Slide 169

@sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 172

Slide 170

Deprecating @sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 173

Slide 171

@sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 174

Slide 172

@sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 175

Slide 173

Resources @sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 176

Slide 174

Slack.Design.Systems @sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 177

Slide 175

News.Design.Systems @sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 178

Slide 176

DesignSystemsBook.Com @sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 179

Slide 177

BuildingDesignSystems.Design @sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 180

Slide 178

FEA.Pub @sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 181

Slide 179

AtomicDesign.BradFrost.Com @sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 182

Slide 180

Thank You twitter.com/@sturobson alwaystwisted.com @sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 183