Brand Playbook

01. Brief History

This section will include a brief history of the business.

02. Brief Foundation

This section will include the vision, mission, purpose and positioning statements.

VISION

Vision statement will be listed here.

MISSION

Mission statement will be listed here.

PURPOSE

Purpose statement will be listed here.

POSITIONING

Positioning statement will be listed here.

03. Keywords

Keyword 1

This is a description of the keyword if needed.

Keyword 2

This is a description of the keyword if needed.

Keyword 3

This is a description of the keyword if needed.

04. Logo

This is a short description of the logo. This will include the anatomy and rationale for inclusion of certain elements.

MAIN LOGO

SECONDARY LOGO

BRAND MARK

04.1a Proper Logo Use

Place the primary logo on a solid, non-black background.

Place the secondary logo on a solid, black background.

04.1b Incorrect Logo Use

Do not skew the logo.

Do not add a box around the logo.

Do not rotate the logo. 

Do not add a drop shadow to the logo.

04.2 Application

The following are examples of the logo in action.

STATIONARY

EU business cards

US business cards

VEHICLES

WAYFINDING

EVENTS AND BANNERS

05. Colour Palette

In this part of the style guide, you can modify each color inside the Text Module’s background settings. Use that same color code inside the Text Module below it to have a written version of the color code too. Use these color codes inside your Divi Theme Builder default color palette afterward.

#FFFFFF

#FFFFFF (90%)

#F2F2F2

#E0E0E0

#40C9C0

#111111

#FFFFFF

#444444

#444444

#000000

06. Text Styles

The font used for headings is Poppins.
The font used for paragraph text is Open Sans.

These fonts must be used consistantly across web and print. This font pairing communicates the firendly, yet professional feel of the brand.  

HEADING 1

72px Desktop, 54px Tablet, 54px Mobile

HEADING 2

52px Desktop, 32px Tablet, 32px Mobile

HEADING 3

46px Desktop, 26px Tablet, 26px Mobile

HEADING 4

18px Desktop, 18px Tablet, 18px Mobile

HEADING 5

22px Desktop, 18px Tablet, 16px Mobile

BODY

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

LIST

  • Lorum Ipsum
  • Lorum Ipsum
  • Lorum Ipsum

ALL IN ONE

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Lorum ipsum dolor sit amet.

  • Lorum Ipsum

07. Graphic Styles

The following are examples of the style of imagery used across the brand. 

PHOTOGRAPHY

List any photography usage guidelines here.

ILLUSTRATIONS

List any illustration usage guidelines here.

PATTERNS

List any pattern usage guidelines here.

ICONOGRAPHY

List any iconography usage guidelines here.

~
=
1

08. Modules

The following are variations of modules and styles that are commonly used throughout the website.  

PRIMARY

SECONDARY

TERTIARY

BUTTON

This is a link

BOX SHADOW

This is a subtle shadow. It is used for card elements.

This is a more dramatic shadow. It’s used on darker coloured backgrounds, e.g. the middle block of a pricing section.