When you get started with the process of creating and applying your own Style Guides, be aware that you're not on your own. Style Guides have been around for a while now so there is a mountain of useful information available. You can learn a tremendous amount from examining what's already out there.
There are also several great tools and resources you can put to work in your projects, the majority of which are free. In this article we're rounding up all the Style Guide material you have at your disposal. We'll be adding to it too, so if new resources are brought to our attention you can expect this to go way beyond 50!
Note: As you will have read in our introduction to this week's Style Guide series, sometimes the term "Style Guide" is used interchangeably with other similar terms. In line with this some of the resources listed below could arguably fall under different classifications.
Style Guide Learning Resources
Take a look at these excellent articles and tutorials on working with Style Guides:
Style guide Wikipedia entry
A great primer on the classical definition of Style Guides.
Maintain Consistency With a Website Style Guide
Tuts+ Aaron Lumsden takes us through creating a Style Guide.
Creating a Rockstar Brand, Logo & Styleguide in Illustrator
A fascinating tour behind the scenes of the creation of the "Rockable Press" brand and Style Guide.
The Way We Build The Web is Changing
A look at some of the driving forces that have led to the emergence of Style Guides, from Natasha Postolovski at the "Inside Envato" blog.
A Maintainable Style Guide
A discussion from Ian Feather on how to efficiently keep Style Guides up to date.
Front end style guides and pattern libraries
A sizeable collection of example Style Guides and Pattern Libraries from Anna Debenham
Brand identity style guides from around the world
The big list of branding and identity Style Guides of major companies and institutions.
Creating Style Guides
By Susan Robertson on A List Apart.
Front-end Style Guides
By Anna Debenham on 24 Ways.
Front-end Style Guides: A Pocket Guide
Another resource from Anna Debenham. Part of the original Five Simple Steps Pocket Guides collection.
Example Style Guides
Check out some Style Guides from some of the biggest and best known brands on the web, plus some great entries from individuals:
New York City Transit Authority Graphics Standards Manual
First up has to come the iconic first edition NYCTA Graphics Standards Manual designed by the late Massimo Vignelli. If you follow one link in this roundup, make it this one.
Tuts+ Style Guide
Voice & tone, branding, formatting and plenty more.
Twitter Brand Assets and Guidelines
Logo usage guidelines, color palette, typography.
Adobe Corporate Brand Guidelines
A comprehensive sixty page guide on everything you can imagine to do with Adobe, including logos, photography, trademarks, stationary and merchandise.
BBC GEL Web Style Guide
The BBC have aimed to completely nail down everything to do with their web presence, dubbing their Style Guide the "Global Experience Language" (GEL).
Mozilla Style Guide
The Mozilla Style Guide is extremely thorough. They isolate identity and branding for each major aspect of their offering; Mozilla, Firefox Family, Firefox Browser, Firefox OS, Marketplace, Webmaker and Thunderbird. They then go on to cover styles for their websites, presentations, videos, typography, and text content. Finally, they provide a complete Style Guide for Firefox OS. This is an example Style Guide at its best.
Lonely Planet Style Guide
The Lonely Planet Style Guide gives full coverage of their Design Elements, UI Components, JS Components and CSS, with each category broken down into further subcategories listing individual components therein.
Skype Style Guide
The Skype Style Guide does a great job of conveying the identity of the company through it's branding and overall design style. It covers logo, typeface, colors, illustration, photography and a number of other subjects.
Salesforce Style Guide
A very visual Style Guide laying out guidelines, color, typography and icons with components and examples.
facebookbrand.com
Branding assets and style guides from the world's biggest social network.
Salesforce Style Guide
Some beautiful visuals from the Customer Relationship Management giant.
findguidelin.es
The fastest way to find brand assets!
All The Style Guides
This really is starting to be all the styles guides, curated in a neat Tumblog.
Apple
Guides for developers creating apps for Max OSX and iOS.
OSX Human Interface Guidelines
iOS Human Interface Guidelines
Guidelines for developers working with Google Glass, plus an extensive two part walkthrough of just about every aspect Google's visual style.
Google Visual Assets Guidelines - Part 1
Google Visual Assets Guidelines - Part 2
Individuals' Sites
Two sites demonstrating how useful Style Guides can be even for personal websites.
Code Style Guides
GitHub Style Guides
GitHub's guide to formatting CSS, JavaScript and Ruby for GitHub projects.
Google Open Source Projects Style Guides
Conventions for projects to be hosted at Google Code, covering ten different languages.
Style Guide Tools
Put these tools to work to generate and maintain your own Style Guides:
Style Guide Boilerplate
Style Guide Boilerplate is essentially a starter pack for creating basic Style Guides - it describes itself as generating "tiny Bootstraps".
Stylify.me
This is great fun: enter the url of a site you want to analyze, then watch as a style guide is generated. Once complete, you can download the guide as a PDF.
Living CSS Style Guide Generators
Each of the following three tools generate "living" Style Guides that are easily updated to stay consistent with the development of your CSS. They work by parsing specially formatted CSS comments into a stand alone Style Guide document.
StyleDocco
StyleDocco is a Node.js module that parses Markdown formatted comments into a pre-themed Style Guide.
Kalei
Kalei also works by parsing Markdown formatted comments from CSS, but runs as browser based JavaScript and outputs a Style Guide similar to Twitter Bootstrap's.
KSS (Knyle Style Sheets)
KSS requires Ruby and uses it's own commenting syntax. GitHub's Style Guide is generated with KSS.
Style Tile Learning Resources
Let's start putting our knowledge into practical application.
StyleTil.es
The home of the original concept for Style Tiles by Samantha Warren.
Style Tiles: An Alternative to Full Design Comps
Chris Brown of Tuts+ walks us through the advantages of using Style Tiles.
Style Tile Tools
Style Tiles for Sketch
A free, open source Sketch template for the creation of Style Tiles.
Pattern Information
Atomic Design
Brad Frost describes the theory that lead to the creation of his Pattern Lab tool.
patternlab.io
The aforementioned Pattern Lab.
Example Pattern Libraries
MailChimp Pattern Library
MailChimp's pattern library covers their grid system, typography, forms, navigation, tables, lists, icons and more.
A List Apart Pattern Library
A List Apart's documentation of their color swatches, typography, image formatting, headings, article summaries and other aspects of their site's design.
Yahoo! Design Pattern Library
The Yahoo! Design Pattern Library is a resource of 59 different patterns they use in their own properties, made available for use by other developers.
UI Patterns
UI Patterns is a very large site that documents patterns from various sites all over the web. Patterns can be browsed by category and voted up or down by site users.
Pattern Tools
Pattern Primer
Pattern Primer allows you to save snippets of markup into a "patterns folder" and have them generated into a list with previews and a copy & paste area for each snippet. Example pattern primer
Pea.rs
Pears is a free, open source WordPress theme designed to help you set up a site with example markup previews you can then work on applying your own custom patterns to.
Patternry
Patternry is a commercial service that allows patterns to be designed, shared, organized and collaborated on among a team.
Pattern Lab
Pattern Lab is the creation of Brad Frost, based on his concepts of "Atomic Design". It helps you create pattern libraries according to the system of atoms > molecules > organisms > templates > pages. Pattern Lab demo.
Wrapping Up
If you previously weren't quite sure where to start with your own Style Guides, you should now find you have plenty of sources of inspiration and extra help.
I recommend putting a little time aside to read the articles, take a close look at the examples to see how they work "in the wild", and try out some of the different tools to see which ones suit you best.
This list is by no means exhaustive, so we'd love to hear your own suggestions in the comments. Still, there's a lot to learn and play with, so have fun!
