patternlab: atomic design & living styleguides (refresh hilo)
TRANSCRIPT
![Page 1: Patternlab: Atomic Design & Living Styleguides (Refresh Hilo)](https://reader034.vdocument.in/reader034/viewer/2022042821/55d3a17dbb61ebf3098b46a0/html5/thumbnails/1.jpg)
pattern lab 1
pattern labcreate atomic design systems
![Page 2: Patternlab: Atomic Design & Living Styleguides (Refresh Hilo)](https://reader034.vdocument.in/reader034/viewer/2022042821/55d3a17dbb61ebf3098b46a0/html5/thumbnails/2.jpg)
pattern lab
About Jason Kalawe
2
Gemini Observatory Web Architect
makeaweli @makeaweli
![Page 3: Patternlab: Atomic Design & Living Styleguides (Refresh Hilo)](https://reader034.vdocument.in/reader034/viewer/2022042821/55d3a17dbb61ebf3098b46a0/html5/thumbnails/3.jpg)
pattern lab 3
atomic design
atoms molecules organisms templates pages
![Page 4: Patternlab: Atomic Design & Living Styleguides (Refresh Hilo)](https://reader034.vdocument.in/reader034/viewer/2022042821/55d3a17dbb61ebf3098b46a0/html5/thumbnails/4.jpg)
pattern lab 4
atoms
basic design elements
![Page 5: Patternlab: Atomic Design & Living Styleguides (Refresh Hilo)](https://reader034.vdocument.in/reader034/viewer/2022042821/55d3a17dbb61ebf3098b46a0/html5/thumbnails/5.jpg)
pattern lab 5
molecules
groups of elements that function as a group
![Page 6: Patternlab: Atomic Design & Living Styleguides (Refresh Hilo)](https://reader034.vdocument.in/reader034/viewer/2022042821/55d3a17dbb61ebf3098b46a0/html5/thumbnails/6.jpg)
pattern lab 6
organismsgroups of molecules joined together to form a section of an interface
![Page 7: Patternlab: Atomic Design & Living Styleguides (Refresh Hilo)](https://reader034.vdocument.in/reader034/viewer/2022042821/55d3a17dbb61ebf3098b46a0/html5/thumbnails/7.jpg)
pattern lab 7
templates
organisms combined to form page-level objects
![Page 8: Patternlab: Atomic Design & Living Styleguides (Refresh Hilo)](https://reader034.vdocument.in/reader034/viewer/2022042821/55d3a17dbb61ebf3098b46a0/html5/thumbnails/8.jpg)
pattern lab 8
templates
focus on content structure rather than actual content
![Page 9: Patternlab: Atomic Design & Living Styleguides (Refresh Hilo)](https://reader034.vdocument.in/reader034/viewer/2022042821/55d3a17dbb61ebf3098b46a0/html5/thumbnails/9.jpg)
pattern lab 9
pages
specific instances of templates
![Page 10: Patternlab: Atomic Design & Living Styleguides (Refresh Hilo)](https://reader034.vdocument.in/reader034/viewer/2022042821/55d3a17dbb61ebf3098b46a0/html5/thumbnails/10.jpg)
0
![Page 11: Patternlab: Atomic Design & Living Styleguides (Refresh Hilo)](https://reader034.vdocument.in/reader034/viewer/2022042821/55d3a17dbb61ebf3098b46a0/html5/thumbnails/11.jpg)
pattern lab 11
pattern labcreate atomic design systems
![Page 12: Patternlab: Atomic Design & Living Styleguides (Refresh Hilo)](https://reader034.vdocument.in/reader034/viewer/2022042821/55d3a17dbb61ebf3098b46a0/html5/thumbnails/12.jpg)
pattern lab 12
pattern labcreate atomic design systems
user interface
![Page 13: Patternlab: Atomic Design & Living Styleguides (Refresh Hilo)](https://reader034.vdocument.in/reader034/viewer/2022042821/55d3a17dbb61ebf3098b46a0/html5/thumbnails/13.jpg)
pattern lab 13
pattern labcreate atomic design systems
create patterns
![Page 14: Patternlab: Atomic Design & Living Styleguides (Refresh Hilo)](https://reader034.vdocument.in/reader034/viewer/2022042821/55d3a17dbb61ebf3098b46a0/html5/thumbnails/14.jpg)
pattern lab 14
pattern labcreate atomic design systems
mustache includes
![Page 15: Patternlab: Atomic Design & Living Styleguides (Refresh Hilo)](https://reader034.vdocument.in/reader034/viewer/2022042821/55d3a17dbb61ebf3098b46a0/html5/thumbnails/15.jpg)
pattern lab 15
pattern labcreate atomic design systems
data
![Page 16: Patternlab: Atomic Design & Living Styleguides (Refresh Hilo)](https://reader034.vdocument.in/reader034/viewer/2022042821/55d3a17dbb61ebf3098b46a0/html5/thumbnails/16.jpg)
pattern lab 16
pattern labcreate atomic design systems
data iteration
![Page 17: Patternlab: Atomic Design & Living Styleguides (Refresh Hilo)](https://reader034.vdocument.in/reader034/viewer/2022042821/55d3a17dbb61ebf3098b46a0/html5/thumbnails/17.jpg)
pattern lab 17
pattern labcreate atomic design systems
pattern-specific data
![Page 18: Patternlab: Atomic Design & Living Styleguides (Refresh Hilo)](https://reader034.vdocument.in/reader034/viewer/2022042821/55d3a17dbb61ebf3098b46a0/html5/thumbnails/18.jpg)
pattern lab 18
pattern labcreate atomic design systems
pseudo patterns
![Page 19: Patternlab: Atomic Design & Living Styleguides (Refresh Hilo)](https://reader034.vdocument.in/reader034/viewer/2022042821/55d3a17dbb61ebf3098b46a0/html5/thumbnails/19.jpg)
pattern lab 19
resourcespatternlab.io
bradfrost.comdaisy