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.