fizbits web design style guide

The benefits of a style guide for your business

It can be good to have three to five design principles for your business that reflect the values and ethos of your products or services. For example, Spotify came up with the acronym TUNE for their design principles (tone, usable, necessary, emotive). These principles guide each and every design decision that the various designers make. Another example is AirBnB, whose design principles are “unified” “universal” “iconic” and “conversational”.

This is helpful because it connects the fundamental values of your company to decisions in design day to day, so that the design of your interfaces or materials reflects the core value of your products or services.

Elements of a style guide

In the same way it is a great idea to develop a style guide with your designer. A palette of colours, typography and graphics can really help when you want to develop or design marketing materials. Consistency is key. Especially in branding exercises, when you want your potential customers to associate your brand with the product category.


It is important for your designer to determine the typography of your website and to stipulate the style of each of the header tags and body text.

This is an example of a style guide:Style guide with typography and colours

Colour palette

Your colour scheme will probably have a dominant colour. It should have no more than three shades. However, you may need secondary or tertiary colours in your colour scheme. Don’t forget to include neutral shades such as grey, black and white to highlight your primary colours.

For a more complex colour palette, check out AirBnB’s style guide:airbnb style guide with colour palette


You want to choose and use photography that has a certain style and direction and stick to the same kinds of imagery for your website. You might find that your branded product imagery sets the tone for the rest of your style guide.

set the tone of your photography - style guide


When representing your brand on social media or other public place, including on your website, it can be useful to think about what kind of ‘voice’ you want to use. For example a corporate website would not use colloquial English or make a joke, whereas a younger, more trendy brand may indeed use these forms of language.

Other style guide elements

Other elements that you or your designer can define in your style guide are: forms, spacing, icons and buttons. You might find it useful to have a do’s and don’t graphic to give to your employees or to reference when you are designing marketing materials to give you examples. For example of a great style guide see the Spotify style guide here.

style guide don'ts

I think that the process of developing a style guide with your designer and getting clear about the desired style of your interfaces and materials can really help you to develop your brand personality. If developed effectively and used consistently, it will also enhance design harmony across your materials.

No Comments

Post A Comment