Create atomic design systems with Pattern Lab

• Read the docs

  Learn how to get up and running with Pattern Lab, work with patterns, design with dynamic data, and use Pattern Lab's advanced features.

• Demos

  Demos of pattern starterkits for your project as well as a gallery of Pattern Lab projects in the wild

• Resources

  Links to articles and resources around Pattern Lab and design systems

Pattern Lab features

At its core, Pattern Lab is a Node-powered static site generator that stitches together UI components. But there's a whole lot more to it than that!

• Nested Patterns

  Include UI patterns inside each other like Russian nesting dolls. Make a change to a pattern and immediately see those changes reflected anywhere it is included.

• Design With Dynamic Data

  Create living UI prototypes using dynamic data to ensure your components can handle the dynamic nature of your content.

• Tool Agnostic

  Pattern Lab doesn't impose any tools or libraries on you, which means you have full control over how author your project.

• Language Agnostic

  Use atomic design language, or don't! it's totally up to you how you name, structure, and organize your Pattern Lab project.

• Pattern Documentation

  Define and describe your UI patterns so your entire team can start speaking the same language to collaborate more effectively.

• Viewport Resizer Tools

  Pattern Lab includes viewport resizing tools to ensure your design system's components and pages are fully responsive.

• Pattern Lineage

  X-ray vision! Quickly view where patterns where components are used, speeding up design, development, and QA time.

• Pattern Starter Kits

  Start your Pattern Lab project with a blank slate, a few sample components, or a full-on demo project.

• Flexible and Extensible

  Pattern Lab supports Handlebars and Twig templating engines. Also you can or build a plugin to extend Pattern Lab's capabilities even further.