Website Style Guide Resources

• GitHub repo
• Twitter updates
• Contributors

Examples

Real life pattern libraries, code standards documents and content style guides.

• Carbon Design System

  By IBM

  Carbon is the design system for IBM Cloud products. It is a series of individual styles, components, and guidelines used for creating unified UI.

  • frontend
  • code
  • patterns
  • voiceandtone

• Code For America

  • frontend
  • patterns

• Codepen's design patterns

  Codepen’s old design patterns, now deprecated for fractal.build.

  • patterns

• Finastra Design System

  By Finastra

  Design and build the future of finance. From prototype to product, build ready to use financial applications faster and better with our design system.

  • patterns
  • components
  • frontend
  • code

• Harry Roberts's CSS Guidelines

  By Harry Roberts

  High-level advice and guidelines for writing sane, manageable, scalable CSS

  • code

• Lonely Planet

  • frontend
  • patterns

• Mailchimp's Pattern Library

  • frontend
  • patterns

• Mailchimp's Voice and Tone

  By Mailchimp

  • voiceandtone
  • writing
  • designlanguage

• Mark Brown's Standards Guidelines

  By Mark Brown

  To aid a shared understanding of front-end development best practice at PUP.

  • code
  • frontend

• Max Quattromani

  • frontend
  • patterns

• Salesforce

  • designlanguage
  • frontend
  • patterns

• Sass Style Guide

  By Chris Coyier

  Chris Coyier’s personal style guide for writing Sass

  • code
  • frontend

• South Tees Hospital

  A style guide for an NHS hospital’s website

  • frontend
  • patterns

• Starbucks

  • frontend
  • patterns

• U.S. Web Design System

  A design system for the U.S. federal government. The U.S. Web Design System makes it easier to build accessible, mobile-friendly government websites for the American public.

  • frontend
  • patterns
  • code

• Yelp

  • frontend
  • patterns

Articles

Things people have written about style guides.

• A Maintainable Style Guide

  By Ian Feather

  An explanation of the principle’s behind Rizzo: Lonely Planet’s Style Guide

  • living

• A living style guide for GOV.UK

  By Edd Sowden, GDS

• Atomic Design

  By Brad Frost

  Atomic design is a methodology for crafting effective interface design systems.

• Creating Style Guides

  By Susan Robertson

• Front-End Style Guides

  By Anna Debenham

  An introduction to Front-End Style Guides.

• Living Design System

  By Sönke Rohde

  How the Salesforce UX team built their cross-platform design system

• Pattern patter.

  By Ethan Marcotte

  Ethan Marcotte shares his thoughts about design patterns, and ways we can present them better in pattern libraries.

• Style Guide Best Practices

  By Brad Frost

  Tips for making your style guide readable, accessible, useful, and lasting.

• Styleguide & Boilerplate Patterns

  By Tyler Sticka

  Compares the range of patterns in different style guides.

• Systemic Design

  By Federico Holgado

  Federico Holgado of Mailchimp explains how modular design systems from other industries apply to constructing our own interfaces.

Books

Books written about style guides.

• A Pattern Language - Towns, Buildings, Construction

  By Christopher Alexander, Sara Ishikawa, Murray Silverstein, Max Jacobson, Ingrid Fiksdahl-King, Shlomo Angel

  A Pattern Language helps lay the basis for an entirely new approach to architecture, building and planning, which will we hope replace existing ideas and practices entirely.

• Atomic Design

  By Brad Frost

  Atomic Design details all that goes into creating and maintaining robust design systems, allowing you to roll out higher quality, more consistent UIs faster than ever before. This book introduces a methodology for thinking of our UIs as thoughtful hierarchies, discusses the qualities of effective pattern libraries, and showcases techniques to transform your team’s design and development workflow.

• Design Patterns - Elements of Reusable Object-Oriented Software

  By Erich Gamma, Richard Helm, Ralph Johnson, John Vlissides

  Capturing a wealth of experience about the design of object-oriented software, four top-notch designers present a catalog of simple and succinct solutions to commonly occurring design problems.

• Design Systems

  By Alla Kholmatova

• Design Systems Handbook

  By Marco Suarez, Jina Anne, Katie Sylor-Miller, Diana Mounter, Roy Stanfield

• Designing Interfaces

  By Jenifer Tidwell

  By capturing UI best practices and reusable ideas as design patterns, Designing Interfaces provides solutions to common design problems that you can tailor to the situation at hand.

• Expressive Design Systems

  By Yesenia Perez-Cruz

  Learn to build purposeful design systems that support and strengthen your team’s creativity.

• Front-End Style Guides

  By Anna Debenham

  Learn how to create comprehensive style guides for the web, whether you’re starting from scratch or assembling one for an existing site.

• Frontend Architecture for Design Systems - A Modern Blueprint for Scalable and Sustainable Websites

  By Micah Godbolt

  This book takes experienced web developers through the new discipline of frontend architecture, including the latest tools, standards, and best practices that have elevated frontend web development to an entirely new level.

• Mobile Design Pattern Gallery, 2nd Edition

  By Theresa Neil

  This handy reference provides more than 90 mobile app design patterns, illustrated by 1,000 screenshots from current Android, iOS, and Windows Phone apps.

• Web Anatomy - Interaction Design Frameworks that Work

  By Robert Hoekman Jr., Jared Spool

  Web Anatomy delivers a complete guide to using interaction design frameworks, an examination of the psychology behind major frameworks, and a thorough look at how frameworks will change the way you work for the better.

Podcasts

Episodes from various podcasts where style guides are discussed.

• Design process with Samantha Warren

  Big changes in web technology are forcing us all to look at what many have been saying for a while — the web design workflow that was enshrined over the last decade really doesn’t work. The creator of Style Tiles, Samantha Warren, joins Jen Simmons to talk about workflows, design processes, and how new ideas about our tools can help us all better design websites for the modern age.

• Jeremy Keith on Everything Web

  Jeremy Keith joins Jen to talk about Mobilewood, future-friendlying websites, responsive design techniques, digital preservation, html5 semantics, Firefox 7, and much more.

• Modular Design

  Ethan and Karen explain how a modular design process that puts content modeling and design patterns first will help you.

• Starbucks

  Starbucks considers mobile to be the first customer touchpoint. Lincoln Mongillo tells us why managing for “one web” forces them to focus on what’s important, and puts performance, accessibility, and security at the center of their design process.

  • responsive

• Successful Product Design, pt. 4 - Atomic Design with Brad Frost

  Brad discusses Atomic Design, designing systems, Pattern Lab, style guides, and why these are good practices.

Talks

Conference presentations about style guides.

• Future Friendly Style Guides

  By Luke Brooker at Web Directions

  How style guides can help in a responsive design workflow.

• Style Guides Are The New Photoshop

  By Stephen Hay at Fronteers 2012

  Use of image editors for creating web design mockups has worked until now, but responsive design is forcing us to find alternatives, as we can’t simply create more mockups as we design for more screens… Let’s take a look at one of the most important aspects of this method: the creation of clear, semi-automated, self-updating style guides.

• Styleguide Driven Development

  By Matt Fordham at Seattle Interactive Conference 2014

Tools

Things to help you make your own style guide.

• Bootstrap

  By Twitter

  Sleek, intuitive, and powerful front-end framework for faster and easier web development.

  • html
  • css

• Foundation

  By ZURB

  Front-end framework created for developing fully responsive web apps.

• KSS

  By Kyle Neath

  Structured documentation for (pre-processed) CSS with generated live style guides

• KSS-node

  By kss-node

  A Node.js implementation of Knyle Style Sheets (KSS), “a documentation syntax for CSS”.

• Pattern Lab

  By Brad Frost and Dave Olsen

  Create atomic design systems

• Snack

  By Snack

  Library to give the ‘kick-off’ on a web project with Style Guide option included.

• Style Prototypes

  By Sam Richard

  Tool for creating pattern libraries and atomic design systems

• Style Tiles

  By Samantha Warren

  Style Tiles are a design deliverable consisting of fonts, colors and interface elements that communicate the essence of a visual brand for the web.

• Web Fundamentals

  By Google

  A comprehensive resource for multi-device web development.

• Web Starter Kit

  By Google

  Google’s Web Starter Kit includes an HTTP server, responsive boilerplate, live reloading, and a component style guide.

Contributors

Resources on this site have been added by the following contributers:

View on GitHub