A Pretty Long List of Style Guides and Pattern Libraries
Published on
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).
Styleguide (Visual) +
Pattern Library (Functional) =
Awesomesauce
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
- A List Apart
- Android
- Bootstrap
- Baseline CSS
- Code for America
- Drupal
- Edible (unofficial project)
- Google Material Design
- MailChimp
- Max Quattromani
- Mozilla
- Lonely Planet
- Paul Robert Lloyd
- Oli
- Salesforce
- Sass Conf
- South Tees Hospitals
- Starbucks
- UI Patterns
- Una Kravets
- Web Starter Kit
- Yelp
Pattern Libraries
- A List Apart
- Android
- Bancomail
- Bare Bones
- BBC
- Bootstrap
- Brad Frost
- Concise
- Dan Eden
- Do Something
- Ebay
- Fellowship Technologies
- Foundation
- Isobar
- Lonely Planet
- MailChimp
- Mapbox
- Material UI
- Max Quattromani
- Onsen Components
- Patternry
- Pears
- Yahoo
Resources and Generators
- Pattern Lab
- Kalei
- Style Guide Boilerplate
- Style Prototype
- Style Guide Gen. Roundup - Welch Canvan
- StyleDocco
- Knyle Style Sheets
- Hologram
- Style Guide Links - Kevin Suttle
- Styleguide Generators
- Stylify.me
- Creating Style Guides - ALA
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!