Scalable Economics

Reading Time Time to read: 5 minutes

Your Product Needs a Style Guide

Alex Williams

Front-end Developer @ Forward Partners

You need to build your product on top of a style guide. As a startup, when creating your minimum viable product it is best to start with a style guide. A style guide acts as a foundation for the product and grows with it. It will help you record your brand as it transforms over the turbulent first few months and will act as a reference as you build up your team.

In this short article I want to explain what a product style guide is, and why it should be living rather than static. Then I’ll outline why it is important to record your product from the beginning, and how having a style guide will help you as your team grows and changes.

Key takeaways​

  • A style guide records the look and feel of your product;
  • If it’s living rather than static then it will update to reflect your product as it changes;
  • As you build up your team it will help ensure everyone is on the same page, reduce overhead, and help keep your product maintainable.

What is a living style guide?

Traditionally a style guide would be a static document produced during the initial design stage of a product. This document, also commonly referred to as brand guidelines (or more adventurously by the BBC as their Global Experience Language) would outline everything that made up the essence of the product. It communicated the brand to the user - its look, feel and sometimes even its voice. It would start off with defining simple elements such as which font family to use, all the way through to where a specific logo could be placed, and in what configuration.

The problem with static style guides has always been their immutability, once written they cannot adapt to reflect the changing nature of the product. This works well for an established brand, like the BBC, but for recording a fast-growing digital product, it’s too rigid.

In the past few years we have seen designers and developers embrace the idea of the living style guide. This style guide is not static, it’s built using the same technology as the product itself - the language of the web, HTML and CSS. It aims to both record the brand and remain flexible as the product goes through sometimes painful early-stage changes. What makes it living is that when one changes, so does the other.

How does this work?

By way of a simple example, consider any web application. It will be built on a foundation of good typography - a font family, several font weights and a collection of different heading and paragraph styles.

With a static style guide, when the typography that makes up the product changes the designer has to manually update the document to reflect the change to the look and feel of the product. If the designer implements a change to the style guide to take the brand in a new direction this change needs to be copied from the document to the product.

Conversely, a living style guide is intimately tied into the product’s codebase. When the designer changes the colour of the headings and the developer updates the product to reflect this the change is able to cascade down into the style guide. The style guide will always be up-to-date, and will move with the product. It will reduce the amount of maintenance work that your designers and developers have to do to ensure the product’s style is well documented.

Let’s consider why this is a good idea in further detail.

Caveat - this is a little harder to do once you move from simple typography to more complex, dynamic components (e.g. a product listing tile). Several rather clever companies have investigated ways of building living components, Lonely Planet using a nice technique.

Recording your product’s look and feel from day one

At Forward Partners we help early stage founders develop great ideas into delightful products. The first stage of this process is a design sprint. During this week the Forward Partners product team and the founder confine themselves to a room and transform the founder’s idea into a concept for the first version of the product. This is where the look and feel of the product begins to take shape.

Over the coming weeks we take that initial concept and flesh it out into a minimum viable product. We test it with potential customers and launch it to a small targeted group of users. With the feedback we receive from our tests and our MVP launch the product concept is tweaked and the look and feel of the product evolves to reflect our findings.

Starting off with a static style guide captures only the initial state of the product and as it evolves gets very quickly left behind.

Starting to create a living style guide with the development of the MVP will allow you to start recording the look and feel of your product when the product is still small and quite manageable. As the MVP is launched and tested with real users the look and feel of the product will change and the living style guide will stay up-to-date without the additional overhead of updating a static document.

In the early stages of a product’s development time spent updating a static style guide is time spent not conducting user interviews, or A/B testing a new feature. A living style guide, set up to launch alongside an MVP, can help you record the look and feel of your product while keeping unnecessary overhead low.

A growing and changing team

The product is not the only part of the company to grow and change. During the first six months at Forward Partners a company will grow from an ambitious founder sitting at an empty bank of desks, to hiring the first intern, and then leading a team of eight or more people.

During the first 18-24 months the company will go from relying on the Forward Partners internal team to hiring its own team responsible for product, technology and marketing. Whether you are working with Forward Partners or an agency is helping you with the first stage of product development your team will fluctuate and change during this period.

During this time a living style guide is essential to helping with the handover from the initial team to the company’s in-house team. In a practical sense it helps by adding up-to-date documentation that is easily maintainable.

At Forward Partners this handover commonly occurs when the company hires its CTO or lead developer. With a living style guide we are able to present the new CTO with a documented collection of the components used throughout the product. This helps them get up to speed much quicker as they have a single source of truth for the product’s look and feel. Going forward, as the CTO hires additional developers to work on the product having up-to-date documentation helps keep the product maintainable across a growing team.

Final thoughts

Taking a great idea and transforming it into a successful product is a time-consuming process. When you are testing a new feature with a group of confused users, or deciding on what colour palette represents your product you will not have the time nor the resources to create a dedicated static style guide and keep it up-to-date.

However, with a little upfront planning you can create a lightweight dynamic style guide to launch with your MVP. It will be less resource-intensive to create, and will always reflect the current look and feel of your product. On top of that it will help keep everyone on the same page as new people join your team.

For some great examples of style guides check out Mailchimp’s pattern library, Lonely Planet’s style guide, and Anna Debenham’s showcase of examples in the links below.

Great Examples of Style guides in the wild

Alex Williams

Front-end Developer @ Forward Partners

Front-end developer for Forward Partners. Helping our companies build a scaleable and maintainable codebase.

Apply for Office Hours

We’re looking for great entrepreneurs with great ideas.

Apply here

Similar Guides