This article is meant to provide you with all the info you'll need to assemble your brand's style guide using Lingo.
β
In this article we'll cover the following areas:
Example style guides built using Lingo.
Structuring your style guide
Example style guides
Below are several style guides that have been assembled by customers. Looking at how others have structured their style guides can serve as inspiration for your style guide.
Structuring your style guide
Important note: You can assemble your style guide on the web or in Lingo's Mac app - download here.
Creating the structure of your style guide is one of the most important steps in building your style guide because it will define what content is included and how it's displayed.
β
Inside a Lingo kit there are two layers of hierarchy that can be used to structure and organize your style guide: Sections and Headings.
Sections are displayed in the Kit Navigator and are self contained meaning you can not scroll to another Section of a Kit but rather have to select it in the Navigator. Sections are created, deleted and renamed in the Kit Navigator on the left.
Headings are nested inside a Section and also display in the Navigator but they are not self contained, meaning you can scroll between Headings inside a Section. To insert a Heading, drag the Heading item from the insert panel and drop it where you want it to display in the gallery.
For your style guide we recommend dividing the major "chapters" of your style guide into different sections and then use headings to add additional organization. We recommend this because it will make your style guide easier for other to navigate through.
What Sections should I include?
The following is a list of the most common Sections and Headings we see included in a style guide.
β
βOverview
Introduction
How to use this guide
Logos
Overview
Logo Elements
Guidelines
Downloads
Typography
Overview
Type Families
Guidelines
Downloads
Colors
Overview
Primary Palette
Secondary Palette
Neutral Palette (if needed)
Guidelines
Voice & Tone
Principles
Guidelines
Iconography
Guidelines
Icon Category 1
Icon Category 2
Next steps!
We hope this article provided you the information you need to structure your style guide. If you want to learn more about assembling your style guide you can read these help center articles or get in touch with a team member by using the chat window below.