Ask DN: Best examples of professional style guides?

over 9 years ago from Seth Tompkins, Web Designer/Developer

I am very interested in learning what DN thinks are the cream of the crop in terms of professional "style guides" for a site/web app.

A few examples that I am keen on: GitHub's styleguide Yelp's stlyeguide

And, on an interesting note, Mail Chimp's multi-part guide for writing and patterns: Style Guide for writing/blogging Pattern Library, or what others call a styleguide

Of course all three have separate pages for brand assets and the like.

So, if I were to set out to make a combined code/visual styling guide in the vein of GitHub and Yelp, are there any other major examples of a clean and cohesive style guide that I am missing?

P.S. Maybe the most important question, is it one or two words?

24 comments

Aaron Stanush, over 9 years ago
I've been collecting a list of frontend style guides here: https://github.com/astanush/ux/blob/master/style-guides.md#frontend-style-guides
Besides the ones mentioned, I like Mapbox's too.
https://www.mapbox.com/base/
18 points
- Seth Tompkins, over 9 years ago
  I wish I could upvote this more than once, exactly the kind of resource that I was looking for!
  0 points
- Darth Bane, over 9 years ago
  "Use px for font-size, because it offers absolute control over text"
  Controversial, GitHub! ;)
  3 points
- Joshua Sortino, over 9 years ago
  Hah! Happy to see Disqus made the list. Hopefully someone can finish up the Components from where I left off!
  0 points
Ryan Murphy, over 9 years ago
http://www.mojotech.com/toolkit
Then there is everyone else.
6 points
- Seth Tompkins, over 9 years ago
  Oh my goodness, oh my
  That is one freaking impressive styleguide!
  1 point
Jamie Wilson, over 9 years ago (edited over 9 years ago )
I was just about to ask this same question. I've found a bunch of resources and a few solid examples, most of which have already been referenced in other comments:
http://rizzo.lonelyplanet.com/styleguide/design-elements/colours http://ianfeather.co.uk/a-maintainable-style-guide/http://kaleistyleguide.com/http://pea.rs/https://github.com/styleguide http://warpspire.com/kss/http://codeguide.co/http://sfdc-styleguide.herokuapp.com/http://brettjankord.com/projects/style-guide-boilerplate/https://ux.mailchimp.com/patterns/https://www.mozilla.org/en-US/styleguide/websites/sandstone/http://paulrobertlloyd.com/about/styleguide/http://24ways.org/2011/front-end-style-guides/http://www.codecademy.com/blog/141-codecademy-reimagined https://medium.com/ui-designs/e5bb62db91e5 http://style.codeforamerica.org/https://www.mapbox.com/base/http://www.yelp.com/styleguide http://demo.patternlab.io/http://daverupert.com/2013/04/responsive-deliverables/http://semantic-ui.com/http://resource.github.io/fabricator/http://bem.info/method/http://voiceandtone.com/https://docs.google.com/a/groupswitch.com/spreadsheet/ccc?key=0AiN0QfBTPpOCdDFjWlM0eU1ra21XanZkekxGbjA2WWc#gid=0 http://www.mojotech.com/toolkit https://github.com/astanush/ux/blob/master/style-guides.md#frontend-style-guides http://disqus.com/pages/style-guide/http://chriscoyier.github.io/SurveyMonkey-Design-Patterns/http://vinspee.me/style-guide-guide/http://stuffandnonsense.co.uk/blog/about/an-extract-from-designing-atoms-and-elements http://trulia.github.io/hologram/http://sourcejs.com/http://livingstyleguide.org/
5 points
Sam Pierce Lolla, over 9 years ago
Salesforce has a good one
http://sfdc-styleguide.herokuapp.com/
4 points
- Seth Tompkins, over 9 years ago (edited over 9 years ago )
  This is very nice. It seems strange that they would keep a .herokuapp address though. If there is one thing Salesforce has, it's money to spend on URL's.
  0 points
  - Marc Köhlbrugge, over 9 years ago
    Heroku is a owned by Salesforce. Maybe that has something to do with it.
    0 points
Alexander Haniotis, over 9 years ago
Lonely Planet's is really extensive. http://rizzo.lonelyplanet.com/styleguide/design-elements/colours
2 points
Josh Sullivan, over 9 years ago
I've been incredibly impressed with Atlassian's Design Guidelines for AUI (Atlassian User Interface)
https://developer.atlassian.com/design/latest/
1 point
Eric R, over 9 years ago
https://ux.mailchimp.com/patterns
http://mailchimp.com/about/brand-assets/
http://mailchimp.com/about/style-guide/
1 point
lackar zhao, over 9 years ago
Dropbox https://www.dropbox.com/branding
1 point
- Jim Silverman, over 9 years ago
  branding guide ≠ style guide
  3 points
  - Seth Tompkins, over 9 years ago
    Yes this is very true. Even the guides that combine code and visuals make sure to separate Branding assets from everything else.
    0 points
Michael Sacca, over 9 years ago
If you're looking to create something that makes your assets really easy to distribute take a look at http://www.brandisty.com
0 points
deleted user, over 9 years ago
a set of style guides
0 points
Sasan Hezarkhani, over 9 years ago
Starbucks: http://www.starbucks.com/static/reference/styleguide/
0 points
Ray Brigleb, over 9 years ago
Here's a wealth of great examples.
http://www.logodesignlove.com/brand-identity-style-guides
0 points
Tanveer C., over 9 years ago (edited over 9 years ago )
A few more examples :
0 points
Matt Sisto, over 9 years ago
https://www.gov.uk/service-manual/user-centred-design
0 points
James Young, over 9 years ago
BBC GEL is pretty extensive and well worth digging around http://www.bbc.co.uk/gel
0 points
- Daniel Fosco, over 9 years ago
  Love the acronym.
  0 points

Designer News

Join Us

Ask DN: Best examples of professional style guides?

24 comments

Join Us

Login to Comment

Register Today