What is a Pattern Library?

You have to keep the look and feel of all of your business’s branded web assets consistent with one another.  It is wise to create a document that defines how this branding will continue to stabilize as your business offering change and as your staff (i.e. your graphic designer) turn over.

Related to this need, you might have heard of a “style guide.”  Even in literary fields there are guides such as the MLA Handbook or the Chicago Manual of Style.  There is something analogous to this in the web design world called a style guide, examples of which you can find on this post from Canva.

So What’s a Pattern Library?

A pattern library is like a style guide, but instead of it defining the elements which are outwardly facing, a pattern library is a repository of the way code should be written with consistency.  A couple of pattern libraries I like (oddly enough called Style Guides) have been created by AirBnB.  They describe, respectfully, how their programmers should write CSS and Javascript.  They are both available on GitHub at:



A pattern library is great because it allows developers working with you to reuse code without having to slow down to make these types of decisions all on their own. MailChimp has theirs, a much more visually useful pattern library here:


Very nice.

If you are serious about UX, you will want to start collecting all of your code snippets, primarily from those pieces of your web assets that are the cleanest and most compatible with the other development tools you are using.  Start organizing them, and create a living document that might change over time but at least will keep you on track as your business grows.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.


3420 Pump Rd. #181
Henrico, VA 23233

+1 804 430 9444

Contact Us