Go to blog

Style guide 2: different types for different uses

of reading
Elisabetta Ferraro
thumbnail

As already mentioned in the previous article, a style guide is a document containing the whole design system and that acts as a guide, first for the creation of new graphic mock-ups and, later, for their implementation.

There are different types of style guide according to the context for which they are created and applied:

Brand style guide

They contain all the information on the brand in question:

  • The logo in all its versions, with examples of how it can or cannot be used
  • The brand colour palettes
  • The fonts and styles
  • If they exist, the coordinated image elements (business cards, letterhead paper, envelopes, stamps, etc.)

Design language

We increasingly hear about design systems or individual interfaces (screens). A design language style guide describes precisely this: the principles underlying the whole design.

  • Introduction to the concept
  • Colours
  • Fonts and styles
  • Grids and layouts
  • Gestures and interactions

Voice and tone

These style guides describe how the brand presents itself to its users.
Therefore they define the type of language to use and the recurring elements for defining the personality of the brand.

Code

Code guides are used to describe the conventions used, patterns and examples.

Pattern library

This is the library of components used for constructing interfaces.
It should contain, for each component:

  • A preview of the component in all its states
  • The copyable code
  • A description of correct use

It is useful for these components to also correspond to another library of components in a single graphic format, which can be used by the designer for designing new screens.

Writing style guide

They specifically describe the writing style to be used in relation to the presentation of contents. The language, punctuation and style of the sentences are defined.

To have an exhaustive document, it is advisable to combine at least two types of style guide: design language and pattern library.
The document can be drawn up with the preferred tool.

Elisabetta Ferraro
Written by
Elisabetta Ferraro

I studied Product Design in Ferrara. At Antreem, I deal with UI and Interaction Design, and with spreading kitten videos.