Style Guides

A Style Guide is a definition of the common user interface guidelines that should be used within or across a set of applications or websites.

What it provides

Depending on the level of consistency that is required, the Style Guide may provide guidelines for all or some of the following elements:

  • Brand elements: referencing elements within the Brand Guidelines, such as Logo, Colour Palette, Typography (defined by the Brand Visual Identity) and Tone of Voice
  • Grid: a definition of how the page or screen is organised so that it reflows correctly when resized
  • Page templates: a set of common templates that are used to create web pages
  • Design Patterns: a set of reusable patterns such as a layout to capture a customer’s name and address
  • Forms: a definition for how form elements are displayed and how error messages appear
  • Controls: a definition for how non-standard controls should be visualised and behave, for example a step-by-step progress indicator
  • Terminology: a glossary of terms that should be used consistently within the interface

Once a Style Guide is created, it can be used as a reference for future design work where consistency with other experiences is a requirement.