Organizational style guides

Tonight I attended an event at Shutterstock office on style guides used at Etsy. Kyle Turman talks about consistency in UI product at Etsy where they have continuous integration.

He summarizes highlights from a project in 2013 that revamps the front end development workflow and processes. First he starts with the basics of style guides.

Style Guides

  • … is a marriage of design and code.
  • … is started by designers
  • … is about creating the styles != implementing the styles

Rules were not well defined before so it was hard to implement. The front end infrastructure team built tools - compilers, minifers, etc to improve the workflow. They are responsible for checking load times and file sizes to make website really fast to load for consumers.


* SASS components
* human readable

object oriented CSS


  • alerts, buttons, typography, icons, etc. were all classes
  • separated by base and types

utility classes - used for responsive .text-gray .text-gray-darker .col-lg-6 //col grids . mb-xs-2 //

“Designers should design controls, rather than design controls” Give people options to improve with

Not good response, didn’t know how to use it. Were open to the idea. Had to explain to people how toolkit works People aren’t used to complete standardization Should have good documentation

Example: Nasa Logo uniform patches

Open meetings to train people “Devil’s Development” Scalable updates performance updates “Freaky fast” prototyping -> “in half of a day” Prototyping from sandboxes Listing manager is an example of using the style guide Search page

“Less markup to make beautiful webpages”

Lessons learned…

Readible variables:

/* to indicate zindex for readability */

/* rather than */
blue: #34A8CA;
black: #222;

/* SASS functions such as*/
lighten(blue, 0.1)

/* made it easier to understand breakpoints
max width or min width*/
@include breakpoint(sm-down)

Share early, share often

  • weekly standups to update progress
  • company wide emails - changes regarding button styles, type styles
  • basecamp to get feedback from stakeholders
  • Github to manage changes, can get pull requests. i.e. accessibility changes from one of the engineers
  • documentation of styles, written in markdown

Product Feature (New carousel) jquery 1.3 -> upgraded to newer js

sketch instead of photoshop

Think about things that might happen 5 years from now Style guides are living and breathing

versioning is difficult, transitioning over is hard scoped version of toolkit — Questions

  • What do you use to create documentation? Is there a framework?

seller side supports IE8 etsy checkout supports IE7

working on this over a year leadership was supportive, now dedicating more support


Entirely written in javascript 2.7x faster than less preprocessor