Create a Style Guide with Pattern Lab


Feb Dao


Following the series on Web Style Guide, today I will introduce to you a very useful tool to create Style Guide: Pattern Lab.

Pattern Lab is a great tool for creating Style Guides, you can easily set up and get started on creating your own style guides with just a few simple commands.

Lets take a look at the image below to see how the Pattern Lab is structured


Pretty easy to understand, right?

Let's get more specific on this demo:, pay attention to the top navigation section you will see on the right are the features:

top right

- Change the width of the display - emulator to test the interface on different devices, from mobile to desktop



- The rightmost pinion is where you can choose from more options such as:

  • Displays detailed information of each component
  • Opens the current page in a new browser window
  • Link to the instruction page for Pattern Lab
  • Search for certain ingredients


While, on the left of the top navigation are all the elements listed in the Style Guide, sorted and sorted into separate sections based on the atomic design concept (You can take a closer look at the concept. This concept is in the link: ).

Let's dive in and learn a little more:

ptl - atom

- Atoms: A place to list the color variables, fonts, effects types used in your website. This is also the place to show the styles of the basic elements in your website like: Text, form elements, images, video, button, link...

ptl - molecules

- Molecules: A place where you can list ingredients with a larger level, it can be a simple component like: block search, hero banner, menu ... or a complex component item like: item of a list Book of new articles, item of a slider....

ptl - organisms

- Organisms: With components of higher level than molecules, this is the place to enumerate and display it, for example a slideshow, a block list, the elements of the header, the footer...



- Templates: Can be called a layout, where we can list the types of layouts that will be used in the website, be it 1 column, 2 columns, full width or have a container.

ptl - pages

- Pages: And finally pages, this is where we list all the pages the client requested, the page is made up of a combination of Molecules, Organisms and Templates together.

Pattern Lab has many different versions: Node version and PHP Editions with many types of templates suitable for each person's choice to create a Live Style Guide - a style guide that supports maximum in terms of templates, you just need to include the template of the Style Guide and use it in the template in your website, later when you need to update or change something, just do it once in the Style Guide, it will automatically change in the website: D

Isn't that great?

Learn more and try getting started with Pattern Lab here:

Add new comment

The content of this field is kept private and will not be shown publicly.

Plain text

  • No HTML tags allowed.
  • Lines and paragraphs break automatically.
  • Web page addresses and email addresses turn into links automatically.


  • Allowed HTML tags: <em> <strong> <cite> <blockquote cite> <ul type> <ol start type> <li> <dl> <dt> <dd> <p>
  • Lines and paragraphs break automatically.
  • Web page addresses and email addresses turn into links automatically.
  • Use [gist:#####] where ##### is your gist number to embed the gist
    You may also include a specific file within a multi-file gist with [gist:####:my_file].

Spread the word