Pattern Lab helps you and your team build thoughtful, pattern-driven user interfaces using atomic design principles.
At its core, Pattern Lab is a static site generator (powered by either PHP or Node) that stitches together UI components. But there's a whole lot more to it than that!
Pattern Lab lets you include UI patterns inside each other like Russian nesting dolls. Make a change to a pattern, and see those changes reflected anywhere the pattern is included!
Unlike static design tools, Pattern Lab lets you easily swap in different representative content into your components to ensure they can handle the dynamic nature of your content.
Pattern Lab doesn't impose any tools or libraries on you, which means you can choose what's right for your project. Like Sass? Cool, go for it! Don't need it? That's fine too! jQuery? No jQuery? Totally up to you.
Atomic design is a helpful mental model, not rigid doctrine. You can rename pattern categories to whatever makes the most sense for your organization and team.
Define and describe your UI patterns so your entire team can start speaking the same language to collaborate more effectively.
Pattern Lab has device-agnostic viewport resizing tools to ensure your design system is fully responsive and embraces the intrinsic fluidity of the web.
Lose the gigantic static PDFs and annotate your living, breathing UI from within Pattern Lab. Clients and colleagues can review annotations right within the browser.
Speed up your design, development, and QA time by quickly seeing which patterns make up any given component, as well as seeing where each component is employed.
Spin up Pattern Lab loaded with frameworks like Bootstrap, Foundation, or Material Design. Or of course start from scratch and build your own custom design system.
Pattern Lab can be used for simple rapid prototyping or for developing production-level frontend code. Some teams have even modified it to power their live sites!
Choose your own templating engine to better match your production environment. Also you can or build a plugin to extend Pattern Lab's capabilities even further.
Learn how to get Pattern Lab up and running, use patterns, work with dynamic data, and make the most of all Pattern Lab's features.
The PHP version and Node version of Pattern Lab are respectively led by Dave Olsen and Brian Muenzenmeyer, with occassional input from Brad Frost and a growing number of contributors from around the world.