May 20, 2024

29 Well-Designed Online Style Guides

Companies and large projects will often develop a series of design rules in relation to branding, logos, icons, and mascots. These rules are referred to as style guides or alternatively branding guides. They’re used both internally for employees and externally for media kits.

Traditionally these style guides were created as books which would be shared around to anyone who needed them. Nowadays it’s just as popular to create a webpage dedicated to the company’s branding guidelines. The following illustrative examples demonstrate the most important facets of any online style guide. If you’re designing an online guide then spend time perusing this gallery to put together your favorite ideas and design elements.


linux ubuntu style guide homepage

Yelp Style Guide

yelp website style guide design

Lonely Planet

lonely planet website design elements


mapbox style guide website layout


salesforce heroku app style guide

MailChimp UX

mailchimp ux patterns design website

Windows Dev Center

windows dev center style guide


woothemes wordpress themes style guide


dropbox style guide website


clearleft style guide website design

IBM Design Language

ibm design language website

Buffer App

buffer app style guide

BBC Style Guide

bbc style guide website layout

GitHub Styles

github styleguide website design


fontshop style guide website colors

WordPress Branding

wordpress logo branding page design

Pivotal Web Services

pivotal web services website

DoSomething Pattern Library

dosomething pattern library website layout

Best Buy Brand Identity

bby best buy branding


polymer website material design

Material Design

google material design style guide

Max Quattromani

max quattromani frontend styles

Bourbon Patterns

bourbon refills patterns styles

South Tees Hospital

south tees hospital style guide website

Tuts+ Writing Guide

tutsplus style guide writing copy

Foundation Style Guide

zurb foundation style guide


homify living style guide website

Sky Global

sky global website style guide

Mozilla Style Guide

mozilla branding style guide website

Jake is a creative writer and UI designer by trade. You can follow him on twitter @jakerocheleau or learn more at his personal website

Leave a Reply

Your email address will not be published. Required fields are marked *