Pattern Lab

Create atomic design systems

  1. Atom

    Atoms

  2. Molecule

    Molecules

  3. Organism

    Organisms

  4. Template

    Templates

  5. Page

    Pages

What It Is

Pattern Lab is a collection of tools to help you create atomic design systems.

  • Static site generator

    At its core, Pattern Lab is a custom static site generator that constructs an interface by stiching atoms, molecules, and organisms together to form templates and pages.

  • component library

    Pattern Lab serves as your project's pattern library and frontend style guide, but you're simultaneously able to see components abstractly and in context.

  • Pattern starter kit

    Pattern Lab provides a whole slew of patterns just to get you started. Don't use them all. You should use Pattern Lab to create your own atoms, molecules, organisms, templates, and pages.

  • Viewport Resizer

    It's our job to make sure our designs look and function beautifully across a whole slew of Web-enabled devices. Pattern Lab provides a robust viewport resizing tool to help you create great designs across all screens.

  • Annotation Tool

    Pattern Lab provides a way to annotate your interface to better communicate design and development decisions to clients and team members.

  • Auto Refresh Tool

    Pattern Lab can reload your browser automatically whenever you save changes to patterns, images, CSS or anything in your project. Make a change and see the results instantly.

  • Page Follow Tool

    Testing across multiple browsers and devices is tedious. Page Follow streamlines the development process by syncing navigation from one browser with any other browser connected to the same Pattern Lab site.

What It Ain't

Pattern Lab doesn't give you all the answers.

  • A UI framework

    Pattern Lab isn't Bootstrap. It's not Foundation. It's not flat. It's not skeumorphic. We've got nothing against UI frameworks, but that's not what Pattern Lab does. How it looks and how it's coded is entirely up to you.

  • Language-dependent

    Like Sass? Great! Go nuts. Use Less instead? That's cool too. Don't like preprocessors? Totally fine. Gotta have jQuery, or wouldn't touch it with a 10 foot pole? Pattern Lab lets you write HTML, CSS and JavaScript however you want. Write code as awesome or as crappy as you like.

  • Incredibly Rigid

    Pattern Lab is designed to be flexible with regards to naming and structure. There's really no One Right Way to do this, and we think that's just fine. Name things as you please, and we'll leave the hair-splitting out of things.

Why

Build systems, not pages.

The need for modularity

Component-driven design has been around for a long while now, but it's become imperative to think now that the Web landscape is so much more complex. It's essential to consider how every thing you include in an interface looks and functions across a whole slew of browsers, devices, and environments.

A better workflow

Anna Debenham explains how pattern libraries create a shared vocabulary between disciplines, make testing easier, and builds a canonical reference to keep coming back to.

Tiny Bootstraps, for Every Client

In this responsive age, our responsive deliverables need to be more than an ad hoc collection of pages. Give clients a custom design system with which they can modify, extend, and grow with into the future.

How

View Pattern Lab's documentation.

Who

Pattern Lab serves as a hub for your web project.

  • Information Designers

    Pattern Lab helps integrate modular thinking into the design process right out of the gate, and helps demonstrate responsive patterns to create.

  • Visual Designers

    Visual designers can use Pattern Lab as a way to see how each module works in a responsive environment and also to keep track of all the design's raw materials.

  • Developers

    Pattern Lab provides developers with an efficient system for quickly developing prototypes and production-ready front-end code.

  • Clients and managers

    Everyone, not just designers and developers, needs to understand the benefits of crafting a design system. Clients and managers can view the project in the browser, as a review, and as a reference.

Where

One URL to Rule Them All

Pattern Lab should live in an environment accessible via a URL where everyone involved with your project can view the design system. Pattern Lab can serve as a hub for your project, so make sure it's accessible.

Share Your Results

Optionally (and ideally) your Pattern Lab can be published publicly like other style guides created by Starbucks, The BBC, and The Guardian. This project wouldn't exist if these organizations didn't share their knowledge and approach. Help makes things better by sharing your Pattern Lab.

Created By