Atomic Design
Brad Frost
Atomic Design
Brad Frost
Table of Contents
1. Designing Systems
Create design systems, not pages 8
2. Atomic Design Methodology
Atoms, molecules, organisms, templates,
and pages 38
3. Tools of the Trade
Pattern Lab and the qualities of eective
style guides 64
4. The Atomic Workow
People, process, and making design
systems happen 94
5. Maintaining Design Systems
Making design systems stand the test of time 142
Thanks & Acknowledgements 182
Resources 184
About the Author 191
Copyright © 2016 Brad Frost All rights reserved
Publisher: Brad Frost
Copy editor: Owen Gregory
Print book designer: Rachel Arnold Sager
Ebook designer: Rachel Andrew
ISBN: 978-0-9982966-0-9
Proudly created in Pittsburgh, Pennsylvania
6 ATOMIC DESIGN
Foreword
It was 2013, and we huddled with Brad Frost and Jennifer Brook around
a sunlit kitchen table in Brooklyn. The four of us had just begun work
on a new website for TechCrunch, and we were sketching wireframes
in Jennifer’s apartment, wrestling with the new demands of responsive
design. Brad pulled out his laptop: “I’ve been playing with a new idea.”
Brad’s screen looked like a webpage had exploded. Bits and pieces of UI
oated free of each other, untethered by a unied design or hierarchy.
It looked like a pile of spare parts from a web garage.
Brad ashed his crazy grin and nodded, “Great, right?” The three of
us stared back blankly. Somebody coughed.
And then Brad Frost the front-end developer started talking like Brad
Frost the chemist. He talked about atoms and molecules and organisms
– about how large pieces of design can be broken down into smaller
ones and even recombined into dierent large pieces. Instead
of visualizing the nished recipe for the design, in other words, he
was showing us the ingredients. And we lit up: this was a shift in
perspective, a way to move away from conceiving a website design as
a collection of static page templates, and instead as a dynamic system
of adaptable components. It was an inspired way to approach this
responsive website – and all responsive projects for that matter.
Brad’s new idea was atomic design, and it changed the way we work
in this astonishingly multi-device world. By thinking about interfaces
simultaneously at both the large (page) level as well as the small
(atomic) level, we streamlined our process: we introduced more rigorous
thought into the role of every element; we fell into habits that improved
the consistency of our UX; and crucially, we started working much faster
and more collaboratively. Atomic design was our superpower.
In the early stages of the TechCrunch redesign, there was this moment
where we talked about what we wanted the article page to be. Within
an hour, Brad had a fully responsive version wired up from his kit of
parts. That was the moment we realized just how quickly we were going
to be able to move, a powerful case for investing in this clever, modular
approach.
Almost four years later, we haven’t looked back. Brad continued to
rene his techniques and tools over the projects that followed,
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
1
/
189
100%
