Style Guide Blueprint

A starter template for your next online Style Guide.
Download as PDF

About This Guide

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.

Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.

Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.

Logos

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.

Primary Logo

Logo Variations

Logo Spacing, Size & Use

Space

The importance of whitespace around brand elements and throughout all layouts cannot be overstated. It adds clarity to the visual messaging. The more the better. These visuals are used to demonstrate the minimum being 50% of the logo’s height should be used as a margin around the logo.

Sizes

For readability, scale needs to have special considerations. Do not reduce these elements below 50px wide.

Use

As well as knowing how to use our logo, it’s important to know how not to use our logo. Don’t do these things

Icons

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.

Primary Icon

Secondary Icons

Colours

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.

Core Palette

L

Pantone:

RGB: 19 120 229

CMYK: 78 53 0 0

Hex: #1378E5

L

Pantone:

RGB: 0 79 252

CMYK: 84 69 0 0

Hex: #004ffc

L

Pantone:

RGB: 0 0 0

CMYK: 72 68 67 88

Hex: #000000

Extended Palette

L

Pantone: 432 C

RGB: 65, 71, 87

CMYK: 25, 18, 0, 66

Hex: #414757

L

Pantone: Cool Gray 8 C

RGB: 143, 146, 151

CMYK: 5, 3, 0, 41

Hex: #8f9297

L

Pantone: 428 C

RGB: 188, 192, 201

CMYK: 6, 4, 0, 21

Hex: #bcc0c9

L

Pantone: 427 C

RGB: 228, 230, 234

CMYK: 3, 2, 0, 8

Hex:e4e6ea

Typography

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.

Font Families

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.

Heading Font – Montserrat

AaBbCcDdEeFfGgHhIiJjKk

AaBbCcDdEeFfGgHhIiJjKk

AaBbCcDdEeFfGgHhIiJjKk

AaBbCcDdEeFfGgHhIiJjKk

0123456789!@#%^&*

Lato

AaBbCcDdEeFfGgHhIiJjKk

AaBbCcDdEeFfGgHhIiJjKk

AaBbCcDdEeFfGgHhIiJjKk

AaBbCcDdEeFfGgHhIiJjK

0123456789!@#%^&*

Patterns

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.

Primary Pattern

Photography

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.

Subjects & Structure

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.

Photo Treatment

Downloads

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.

Questions

Unsure about something? Better ask than get it wrong. 🙂

Get Divi freebies in your inbox every month.

Subscribe to Octygon to get a FREE Divi Layout, Child Theme or Plugin in your inbox every month.

You have Successfully Subscribed!