With brand touchpoints reaching across multiple channels and platforms, designers and developers need more than just a PDF to ensure the brand is properly presented.
Style Guide
Traditionally brands will have a style or brand guide, which charts the exact ways all the visual elements of their brand should be used. The guide ensures the brand is presented correctly and consistently every time. Style guides usually contain the following:
- Brand story
- Logo guidelines
- Colour palette (primary, secondary, and incorrect colour usage)
- Typographical hierarchy
- Brand voice
- Imagery and iconography (Guidelines for photos, illustrations, charts, infographics, etc.)
Design System
A design system is a ‘a system of concepts’. Simply put, it not only includes all of the visual elements that are normally found in a Style Guide but also gives ready-made code for their function. This enables developers to quickly and easily implement branding across several digital experiences.
This ready made code contains the set of rules belonging to the elements of a graphical user interface (GUI) - including the CSS styles applied to each element. CSS describes how HTML elements are to be displayed on screen, paper or in other media. CSS saves a lot of work, as it can control the layout of multiple web pages all at once.
Design Systems usually contain the following:
- Style guide
- Brand values
- Sketch library
- Pattern/components library - all the elements of a graphical user interface (GUI), like buttons, form fields, alerts, the hover states of every element, etc.
- Organisation principles
- Best practices
- Templates
- Fonts
- Typography
- Weights and scales
- Margins
- Paddings
- Grids
- Icons
- Color palettes
- The CSS styles applied to each element.
If any element or the style of any element is changed within the brand, then Style Guides ensure updating that element across several digital platforms is seamless.
