456 Website Style Guide Resources

Examples

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

Carbon Design System

By IBM

Carbon Design System is a series of individual styles and components, that when combined make beautiful, intuitive designs.
- frontend
- code
- patterns
- voiceandtone
Code For America
- frontend
- patterns
Codepen's design patterns

The design patterns used in Codepen
- patterns
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
Mapbox

An extensive guide featuring HTML and CSS patterns, a writing guide, and tutorials for implementation.
- frontend
- code
- writing
- patterns
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. Design Standards

Open source UI components and visual style guide to create consistency and beautiful user experiences across U.S. federal government websites
- frontend
- patterns
- code
Yelp
- frontend
- patterns

See all 184 examples…

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.

See all 108 articles…

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.
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.
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.

See all 13 books…

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.

See all 11 podcasts…

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

See all 35 talks…

Tools

Things to help you make your own style guide.

Barebones

By Paul Robert Lloyd

An initial directory setup, style guide and pattern primer
- PHP
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.

See all 105 tools…

Contributors

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

View on GitHub

Add