There are websites that we could stare at for hours.

They’re different, addictive, and well crafted to the pixel. Before the Internet, brands had to rely on limited channels like print ads, TV commercials, billboards, and all sorts of print collateral to share their stories. These channels, however versatile, are no match for the level of depth that websites can offer.

Maxwell_house_coffee_newspaper_ad_1921

A Maxwell House print ad in 1921 versus its current website at maxwellhousecoffee.com, which expands on recipes, social media profiles and product features.
Maxwell_House_Coffee

Want to learn more about the team behind a product? Done. Need to contact the support team? It’s a couple of clicks away. Would love to watch a video about a specific feature? Probably right there too. In many ways, websites have become the natural hub for brands. As such, making sure that this “home” aligns with the brand’s overall identity is crucial. And that’s exactly where a carefully crafted web style guide comes into play.

girl_scouts_posters

Girl Scouts concept posters
Girl_Scouts___Official_Web_Site

as described in the organization’s brand guidelines, show complete visual cohesion with their current website

What is a Web Design Style Guide

In simple terms, a web design style guide is a set of instructions and assets for everyone in charge of building your online presence. This includes developers, designers, content creators, and even partners that are collaborating on different online initiatives (contests, social campaigns, landing pages, among others). Because various design disciplines have to interact with them, you may have heard about web design style guides under different names: pattern libraries, UI toolkits, front-end style guides, human interface guidelines, UI guidelines, among many (many!) others. No matter how you call them, remember this:

Your web style guide contains essential building blocks for anyone in charge of constructing your online properties.

Let’s look at 10 inspiring examples of carefully crafted web design style guides:

01. AIRBNB

Airbnb’s UI Toolkit (I told you there would be hundreds of different names for this!) provides a clear idea about how different form fields, inputs, menus, ads and toolbars should look like. Particularly interesting is how they’ve also included sample color harmonies like Rausch, Tirol, Foggy, and Hof.

airbnb-web-toolkit

What we can learn from Airbnb:

Web design involves playing with different levels of hierarchy, depth and contrast. While you may want to limit your primary brand colors to 3 or 4, consider adding a wide spectrum of secondary hues that can help web designers and other users shaping your online presence.

02. MOZILLA

Mozilla, the talented team behind the Firefox browser, has made their web design style guide completely public. To unify their entire online presence, they created a framework called Sandstone. This comprehensive guide defines style and form for all of their web properties, addressing everything from their tiniest button to the overall grid.

sandstone.14af85386126

The fact that Mozilla chose a unifying concept to guide web design does not mean that everything looks exactly the same. To prove it, their web design style guide also includes examples of their concept in use where it becomes clear that these building blocks can be used to create great diversity:

mozilla

What we can learn from Mozilla:

When you think about your web design style guide, coming up with an overarching concept like Sandstone will help you maintain consistency. No matter which element you need to incorporate into the guide later on, there will always be a central idea that dictates an overall look & feel for the site.

03. DISQUS

To address both print and web design needs, the team at Disqus divided their style guide into two sections: Brand & Styles and Components. They included specific assets for icons, typography, and buttons. In this case, the web design style guide was created to inform both in-house design work and components created by third parties (using their API).

Disqus_Style

Designer Joshua Sortino, who was involved in the project, uploaded an animated shot that showcases their impeccable style guide:

Disqus Style Guide (animated)

What we can learn from Disqus:

Sometimes you are creating a product that is, in and of itself, a building block for something else. This is the case with Disqus, which has an open API that exposes their brand to thousands of developers around the world. If this is your case, make sure to display your web design style guide publicly and in a highly visible location.

04. MEDIUM

This UI guide displays the most important elements that characterize Medium’s online identity: buttons, backgrounds, dropdowns, icons, tooltips, popovers, among others. Teehan+Lax, the agency who helped shape this identity (and has since joined Facebook), shared that there were lots of changes in the product development phase. This is the case for most new products. Rather than frustrate you, these visual changes should encourage you to constantly update your brand’s web design style guide.

style-guide

What we can learn from Medium:

There is also an opportunity to bring your brand identity to seemingly small UI components like loaders, popovers, image uploaders, and progress bars. Even though some web development frameworks provide out-of-the-box skins for items like these, try to customize them for an added sense of authenticity.

05. UBER

Uber’s web design style guide pays special attention to typography and hierarchy. They have specific rules for the amount of weights than one can combine in a single design piece.

Uber_Brand_Guide_-_Hierarchy_1

Also fascinating is how they’ve brought their brand identity to components like maps. Because they are a transportation-focused company, the use of maps becomes a crucial part of their user interface. Taking note of this, the design team established a set of guidelines to work with different kinds of maps.

Uber_Brand_Guide_-_Hierarchy

What we can learn from Uber:

If your brand has a signature product or service (like maps for Uber), think hard about how you can portray your identity through it. Uber has not only set a fixed look for large components like maps, but also enacted its brand identity through the very lines that connect two locations on those maps. As you build your web design style guide, think about how you can bring your brand to items as small as dots and as large as hero images.

06. MAILCHIMP

As your product becomes more complex, there will be more online components to take into account for a style guide. Mailchimp, for example, provides a fairly comprehensive analytics package that involves a ton of different graphs. It is only natural, then, that their web design style guide includes clear indications on the types of charts that fit the Mailchimp brand:

mailchimp

To add a touch of brand personality, they also created a custom set of icons dubbed “Freddicons”, after their mascot Frederick von Chimpenheimer IV.

freddicons

What we can learn from Mailchimp:

In an environment where most sites seem to be using the same icon sets, take a risk and add custom iconography to your brand assets. While time consuming, creating a unique package of images to represent site functions allows you to cater to your product’s specific needs.

07. BUFFER

Buffer defines its style guide as “a collection of reusable styles and components for faster product development”. Interestingly enough, they are applying the principles of a practice known as Atomic Design. These principles indicate that web design style guides should start out with small, independent parts (atoms) that combine to create molecules and, eventually, the entire organism.

Style_Guide_1

Aside from having such a unique approach to web design, the Buffer style guide includes a set of rules to create an increasingly important component: the Call to Action.

Style_Guide

What we can learn from Buffer:

Web design is not all about buttons and grids. Designing effective online properties requires thinking about the actual intention behind setting up a site in the first place. What is your main call to action? How do you want to convey it? Add these considerations to your web design style guide for more consistent form & function.

08. YELP

Designers at Yelp open their web design style guide with the question Have You Used Your Style Guide Today? to emphasize how important it is to get in the habit of recurring to a set of visual rules.

Styleguide_1

Their comprehensive guide goes beyond simple recommendations and gives developers actual code to work with right away. In this example, the guide provides specific instructions for marketing blocks:

Styleguide

What we can learn from Yelp:

Go a step further and provide developers with useful code out of the box. Sure, anyone can understand what you mean by that image you included in your web design style guide. Here’s the problem: not everyone will execute it in the same way. Different developers will bring to life each of your components to the best of their ability, unless you provide some standardized methods. Handing them some standard code will help preserve a common language between everyone who interacts with your website’s front and back ends.

09. EVERNOTE

Dribbble has become an impressive showcase of living, evolving style guides for dozens of creative teams. The Evernote team, for example, is keen on sharing their evolving set of web components. They consistently upload shots to share their icons, illustrations, badges, layouts, user flows and much more with the design community. Unlike an internal web design style guide, maintaining a living, public portfolio is opening the door for feedback and continuous improvement.

Dribbble_-_Evernote_Design

What we can learn from Evernote:

Take the plunge and share your web design best practices with the community. You’ll be surprised at the amount of actionable feedback that creators thousands of miles away can share. There’s only one certainty in the world of web design: everything will change soon. As long as this is true, you are better off taking advantage of other people’s’ different knowledge levels.

10. VIRGIN AMERICA

This airline’s most recent web redesign was described as “the first radical rethinking of the flight booking experience in a decade” by Wired. Work & Co, the agency in charge of the change, shared a complete case study that tells the story of the brand’s new web design guidelines.

Case_Study__Virgin_America_-_Work___Co_1

This example is particularly fascinating because it’s a case where a company’s web design style guide was so successful that it is also being deployed across traditional channels. This notion of “digital-first branding” is set to become more and more popular. Soon we could be talking about how a brand’s web design style guide should inform its print guidelines, and not the other way around.

Case_Study__Virgin_America_-_Work___Co

What we can learn from Virgin:

Building a web-based product? Turn brand development on its head and consider your web elements first. What should certain interactions look like? Rely on the essence of your brand story to design an ideal set of web design assets. Then, go back to the drawing board and create other traditional brand assets (like stationery, ads and merchandise) based on this visual system.

Tools to Build & Maintain Your Web Design Style Guide

Keeping your web design style guide up to date is not an easy task, but there are tools that can help you save time and effort. Check out some of the following apps:

Stylify: An online style guide generator that scrapes color & typography palettes from any URL.

Bynder: Brand Management Software to keep your files up to date, centralized, organized and easily shareable.

Patternlab: If Buffer’s design approach rung a bell, take a look at this open source tool for creating atomic design systems. What does that look like, you ask? Like this.

Fabricator: A UI toolkit template for any team that needs to create a comprehensive style guide.

Frontify: Create and maintain your style guide with this fast, free tool trusted by brands like Lufthansa. Upload and manage your image files, color palettes, typography schemes and icon sets.

Style Guide Boilerplate: The name says it all. A template to create a living, evolving web design style guide.

Laura (@laurabusche) is a Brand Content Strategist and regularly blogs about branding and business at laurabusche.com/blog. Laura earned a Master of Arts in Design Management from the Savannah College of Art and Design (SCAD). She is the author of O'Reilly Media’s Lean Branding book.