What is a Living Style Guide?
February 28, 2019
A living style guide is a dynamic library of components that is used by developers to build web and mobile applications. It can include anything from single button styles, all the way up to complete screens and workflows.
Importantly: it's defined in the code itself. That means it's always up-to-date, since it defines the style of the application using the exact components that make up the application.
Traditional Style Guides
Historically, style guides have been used to define the look and feel of a brand. They sets the standards for what colors to use, how to position and size the logo, and give general style guidelines in order to maintain consistency across multiple product and business lines.
One of the more famous examples of a style guide is the NASA Graphics Standards Manual, from 1976: https://www.nasa.gov/image-feature/nasa-graphics-standards-manual
It's 60 pages of how to use (and how NOT to use) the NASA logo and typeface on everything from envelopes to airplanes.
You can find other modern examples from many large companies, like GE: https://www.ge.com/brand/
A static style guide takes a lot of effort to produce though. It's great for big companies that need to be protective of their branding and positioning - but what about for developing applications?
For web and mobile app development, there are two major shortcomings with traditional style guides:
- They take too much effort to create
- They take too long to update
So how does a living style guide fix those problems? The answer lies in how the properties of a living style guide allow us to fundamentally change the app development cycle.
Properties of a Living Style Guide
So what makes a "Living" style guide? There are three primary attributes:
- A library of reusable components...
- ...defined in the code...
- ...and viewable by all stakeholders
Let's take a look at each one of those in detail:
A Library of Reusable Components
At its core, a style guide is a group of components that defines the look and feel of an application. These components might be small, like individual buttons:
or complex, like an entire modal window:
Breaking an app design into individual components is a powerful way to split up app development. It lets developers focus on a small piece of functionality at a time - and it allows for more atomic testing of features. It also encourages reusability, which can increase developer speed and reduce bugs.
Defined in the Code
One critical difference of a living style guide compared to a traditional one is that the living style guide is defined in the application code itself. Static style guides are often delivered in large pdfs (like the NASA one above) - and getting them changed or updated is difficult.
When a style guide is defined with the app components themselves, its always up to date, because it is using the same components that it is documenting.
Viewable by All Stakeholders
Another critical difference is that PMs, designers and developers should all be able to see and comment on a living style guide. The reason it is "living" is because it is continuously updated - and it can only be updated if there is constant feedback from the project stakeholders.
This isn't a giant document "handed down from on high" - it's a collaboration between everyone who is working on the app.
It Takes Work
Living style guides can shorten feedback loops, promote code reuse, and reduce development time for new features - but they do have some up front cost. You also have to commit to documenting your components in the code, which might be a new practice for some developers.
Over the long term though, the extra work will pay off with fewer bugs and faster feature development.
Do living style guides sound interesting? We build tools that help you share your style guide and collaborate with your team: amplifydocs.com