Styleguide What it is & How to create one.

A styleguide is a standards manual that represents a brand or organization.

Oscar de la Hera Gomez
Written by Oscar de la Hera Gomez
First published on 07/07/2022 at 15:37
Last Updated on 03/16/2024 at 14:26
A slide that shows the styleguide for Sans Hands.

A styleguide, which is sometimes referred to as a brand book or brand styleguide, is a standards manual that represents a brand or organization and which allows a designer to create printed media, multi-media, physical products or digital applications quickly and coherently.

SubscribeWhat is a Brand Book?What are Brand Guidelines?

A styleguide is something that is vital to a brand or organization in order for them to quickly output content across media channels; or upgrade/create new products coherently.

We believe that it is fundamental to any design system, whether physical or digital, and we often request it or engage in its creation early on to augment velocity during a prototyping or creation phase.

Please note that they require often updates over time, as the brand or organization evolves.

What is a Design System ?

What does a Styleguide include ?

A styleguide is composed of the following key elements:

  • Colors
  • Typography
  • Assets
  • Numerical values such as margin, padding or shadow size
Additionally, they can also include
  • UI Elements or Component Guide
  • Visual Treatment Guide
  • Moodboard
Learn how to create a design system that uses variablesDownload a template that demonstrates this in Figma

Colors

This refers to the color palette and can be broken into primary, secondary, tertiary and/or accents to inform a designer on how and where to use colors. If the colors are not broken up into categories, a treatment guide or moodboard is suggested to help a designer understand how to use color.

For anyone seeking to for a more extensive naming convention for all the tokens that you can use in a system, we recommend checking out Google's Material Design.

How to setup color styles in FigmaDiscover Google Material Design's Color System
An example of our colors for our Farm Tales App

Farm Tales's Color guide

Discover Farm Tales
Candid's Color Guide

Candid's Color guide

Discover Candid
A color guide broken down into categories

Here's an example of a colors broken down into categories.

How to setup color styles in Figma

Typography

This refers to the typefaces (fonts) that are used along with their respective sizes. A typographic styleguide should ideally involve responsive font sizes that information a designer what size of font to use where and when i.e. on mobile use Helvetica Neue, 14pt.

How to setup text styles in Figma
A slide that shows the styleguide for Sans Hands.

Sans Hand's color & responsive typographic styleguide

An example of how we created a typographic styleguide for Farm Tales.

Farm Tales's typographic styleguide

Discover Farm Tales
A slide showing our typographic styleguide for Candid.

Candid's typographic styleguide

The lead image for the Typography Styleguide tutorial on Figma.

Here's what a typographic styleguide could look like for a website.

Typography Styleguide Example on FigmaHow to setup text styles in Figma

Assets

This document and associated package involves the logo and other key multimedia that are fundamental to the recreation of a brand.

An example of our assets guide for Farm Tales

Farm Tales's Assets

Discover Farm Tales
Candid's Brand Icon Assets

Candid's Icon Asset Guide

Discover Candid

Optional | UI Element or Component Guide

With the vision of modularizing and building coherent systems quickly, a UI Element or Component guide allows a designer to know what components are available for use when creating new webpages or mobile experiences in a way that reduces development time.

If an application has yet to be built, this guide helps the development team identify which reusable components are needed to be built and where their flexibility lies - cutting down development time down the line.

Our component guide for Farm Tales

Farm Tales's Component Guide

Discover Farm Tales

Optional | Visual Treatment Guide

This guide refers to how media and typography should be manipulated or laid out to guarantee coherence and the expected outcome.

A visual treatment guide for Spotify's logo.

Visual treatment guide for Spotify's logo

A visual treatment guide for Netflix's logo.

Visual treatment guide for Netflix's logo

Optional | Moodboard

This can be a PDF document or Pinterest board that shows the kind of visuals that represent the brand for a designer to take inspiration from.

A slide showing the moodboard for the Candid Brand.

Candid's Brand Moodboard

A slide showing the moodboard for Candid's product

Candid's Product Moodboard

Discover Candid

Any Questions

We are actively looking for feedback on how to improve this resource. Please send us a note to inquiries@delasign.com with any thoughts or feedback you may have.

SubscribeInquireView All PostsView All ServicesView All Work

Partner with us

We would love to get to know you and see how we can help your organization with its goals and needs.
Let's Talk

Stay Informed

Get occasional updates about our company, research, and product launches.
Subscribe