Service Manuals

This is an old post from 2015. As such, it might not be relevant anymore.

Service Manuals, Playbooks, Style Guides, call them what you want but to any large-ish organisation they are a vital way to maintain consistency among the different departments and outside organisations, to ensure your brand does not get misused and misrepresented.

It’s a sad fact* that many people see no value in service manuals, because many of them have never been in a development environment. Actually, the outlay in a few days work can result in massive payoffs:

  1. More refined code
  2. Shared code (markup, behavioural, and styling)
  3. Brand consistency
  4. Maintainability
  5. Happy designers and developers

I really cannot emphasise how important everything on that list is, so let’s take them one-by-one.

More refined code

You have already discussed everything in the service manual with the other developers who, hopefully, largely agree that everything in there is sane, useful, and correct. This leads to a greater proportion of the code already having been code reviewed.

Shared code (markup, behavioural, and styling)

Need to add a button? It’s already there. A table? Already there. A carousel? Despite the numerous experiments proving they do not work aside, already there. Which colour do I use for this thing? Already there. How many pixels should this image be here? Already there.

Not only does this allow the developers to focus on their work, it frees up the designers time allowing them to get on with what they like to do best: design. Interrupting a developer also causes massive time wastage, this article entitled “Programmer Interrupted” gives an excellent overview on why it takes ~15 minutes for a developer to get back “into the flow”.

If you’re an agency then you also have the components that you can reuse project after project, just needing to update the CSS to have a unique brand associated element.

Brand consistency

This one is quite obvious: The service manual will define colours, type faces, visuals, and the padding/margin required, all leading to a consistent feeling across the website and their offline stationary, banners, signage, work clothes, etc. This won’t be used just by internal teams, but external as well – make sure they know how your brand should be portrayed.


Let’s take for example the carousel. Update the Javascript for it and every single item will then be updated. You don’t need to update each one individually. Has one of your brand colours been updated from #FFF to #FFE? No problem, just update the SASS variable and it will flow down to everything using it (you are using SASS, right?)

Also, because everything has been determined before a single line of code has been written it means there is far less spaghetti code. Spaghetti code is hard to maintain, makes the barrier to entry point higher for new developers, and causes bugs.

Happy designers and developers

A crucial point; making your staff happy matters. It will improve the office morale, make them work harder which will pay dividends in the quality of work they ship, and creates a friendly working atmosphere where they enjoy coming to work – don’t make them dread the morning alarm clock. It’s also the right thing to do.


So, a service manual isn’t a waste of time. It isn’t just about what colour something should be. It has far more meaning and importance than one first gives it credit. It will save you time and money. Please, use one and make the world a better place. Some excellent service manuals can be found below for your enjoyment:

* my own personal experience of ~100 clients and organisations