UI style guide

A style guide focuses on the main building blocks of the UI, such as colour, typography, buttons, forms etc, providing a foundation for building a coherent user interface and ensuring consistent implementation.

A style guide is a document that describes the design standards of a digital interface.

It provides examples of different elements that form the interface, notes on their responsive behaviour and instructions for when and how each element should be used.

It can be a stand-alone document or a part of a wider design system where it sits alongside a pattern library and provides instructions for content creators. Most commonly, a style guide is created as a part of the user interface design process and serves as an instruction manual giving rationale to the UI examples. Alternatively, it can be an output of a UX Audit created after all the building blocks of the current interface have been documented, reviewed and refined.

Unlike a complete design system, the style guide does not aim to document every instance of every element. Instead, it focuses on the main building blocks of the UI, such as colour, typography, buttons, forms etc, ensuring consistent implementation. As a result, a style guide is a lot quicker to create and easier to maintain. It can be used by everyone in the company from designers, developers to project managers, content creators and even external contractors. 

A style guide provides a foundation for building a consistent user interface that can scale and adapt to future requirements without needing constant maintenance from a dedicated team.

 

Our process

At Make it Clear, we typically follow the structure below to create a style guide:

  1. Discovery: identify and review existing principles, standards or brand assets that should be included.
  2. Definition: at this stage, we will work with you to define the exact requirements and the format the guide should take. Typically, we use Figma to create the guide, as this provides an excellent link between design and development 
  3. Solution: the guide is created in an iterative process with feedback and approval from your internal teams. The outputs are developer-friendly and form the basis of an ongoing structure that will define your digital presence.

 

What should a typical style guide include?

Depending on the interface type, a style guide typically covers the following areas:

  • Colour
  • Typography (including links)
  • Grid
  • Buttons
  • Forms
  • Controls and selectors
  • Icons
  • Images
  • Navigation
  • Search
  • Help
  • Cards
  • Lists
  • Modals
  • Responsive principes

 

Where possible, it should include examples of default and responsive states and notes on use and implementation.

 

Can we help you create your style guide?

Make it Clear has extensive experience in creating style guides. Why not book a free 30 minute Clarity Consultation with our team and we can help you achieve your goals.