A Pretty Long List of Style Guides and Pattern Libraries

November 13, 2014

A lot of time, the terms “style guide” and “pattern library” are used interchangebly, but there are distinct differences between the two. Although many examples of these “guides” include features of both, lets look at what makes each unique for a better understanding.

A style guide is a representation of brand properties and values for consistency. These include typography, copy, color values and variations, etc. These can also be guides for coding consistency. A company could, for instance, have a “Python Styleguide” for their developers.

Visual style guides are the next generation of traditional branding guides — functional derivatives of print. In the same way that print designers use physical branding guides for testing color and size samples, style guides are being used for web designers on the web. They should be presented in the format on which their accompanying product is experienced (i.e. online with a basic Internet connection for websites) and include details in a useful format (i.e. hex codes or variable names and examples of typographic scale).

Pattern libraries, like style guides, ensure consistency in a project. However, they focus on function. A pattern library is a functional collection of elements, or components, of a project. These include buttons, forms, input types, messaging, etc. Max Quattromani does a great job in demonstrating how style guides and pattern libraries relate but are distinct.

The following lists include a wide variety of examples from personal websites, blogs, event pages, companies, and toolkits/resources. Like I said earlier, many have qualities of both style guides and pattern libraries, but they are grouped by whichever is most prevalent. Some (like Android) appear on here twice because they have both a style guide and pattern library individual of each other.

Style Guides

Pattern Libraries

Resources and Generators

If you have more resources to submit, please message me or leave a comment here. Big thank you to Jeri for compiling a lot of these resources!