Brand Guidelines and Asset Library

These guidelines should be followed carefully to ensure brand continuity

Introduction

All the design elements you need. Here, in one place. And how to use them. From the smallest digital icon to the largest printable billboard.

 

Our brand’s DNA visually represented by a unique combination of logo, colour and fonts.

Read on to discover how we apply this unique combination in order to maintain total branding consistency throughout.

 

Whatever the media.

 

The outcome of these guidelines is to ensure brand continuity.

Brand Identity

The purpose of this section is to connect our audience with the vision of what we do and why we do it.

 

Using simple words to articulate the heart and soul of our brand.

These core principles and standards define our brands DNA.

 

It is what we stand for and what makes it special.

Mission Statement

We help small business owners get results online whilst enjoying the process

Values

Passion

Kindness

Focus

Simplicity

Brand Essence

To provide a calm environment that helps to remove overwhelm by using simplistic design.

Brand Logo

When our brand logo is seen by someone for the first time it will tell our story. Designed to evoke a positive emotion. The next time, and every time after, it will trigger that same response. It will tell and keep re-telling our story. It’s the visual bedrock of our brand.

 

There are simply millions of brand logos worldwide. Even so, ours is unique. To be positioned and placed whenever and wherever we want our brand to be.

Wordmark

Our brand’s identity is expressed typographically in the form of a word, styled into a logo.

Variants of the logo are displayed here.

Whatever the medium, when applying the logo to our design, only the associated DOWNLOAD should be used. This ensures that brand consistency is maintained across all our branding materials – landing pages, social media, stationery, print advertising – and anything else you can think of.

Dark Logo

For use on white or light backgrounds

Click here

Light Logo

For use on black or dark backgrounds

Click here

Do

Ensure that the wordmark has an exclusion zone – on all sides – equivalent to the width of the uppercase letter S in the logo. If you are creating a bounding box, set a transparent margin (or padding) to 13% on all sides. The wordmark, Slackboy, will then sit comfortably in the centre, occupying 74% of the overall box width.

Don’t

Don’t distort the logo’s proportions. It can scale to any size, but both axes should manintain their dimensions relative to each other and to the orignal design.

Brandmark

Our brand’s identity is expressed typographically in the form of a word, styled into a logo.

Variants of the logo are displayed here.

Whatever the medium, when applying the logo to our design, only the associated DOWNLOAD should be used. This ensures that brand consistency is maintained across all our branding materials – landing pages, social media, stationery, print advertising – and anything else you can think of.

Dark Logo

For use on white or light backgrounds

Click here

Light Logo

For use on black or dark backgrounds

Click here

Brand Colours

When our brand logo is seen by someone for the first time it will tell our story. Designed to evoke a positive emotion. The next time, and every time after, it will trigger that same response. It will tell and keep re-telling our story. It’s the visual bedrock of our brand.

 

There are simply millions of brand logos worldwide. Even so, ours is unique. To be positioned and placed whenever and wherever we want our brand to be.

Primary

Secondary

Tertiary

Fonts

Call to Action

Primary Colours

Consistent use of specified colours will encourage and reinforce audience association with our brand.

 

Red and yellow are in the same segment on the colour wheel. They’re both associated with warmth, optimism, dynamism and energy. Of all the warm colours, yellow is considered to be the most energetic.

 

We use the primary colour – specifically the energy associated with yellow – to grab attention to our brand.

Hex

#0a68cf

RGB

rgb(25, 118, 210)

Material Design

TBC

Dark

Primary

Hex

#0a88f4

RGB

rgb(33, 150, 243)

Material Design

TBC

Core

Primary

Hex

#54abf7

RGB

rgb(100, 181, 246)

Material Design

TBC

Light

Primary

Hex

#b1d9fd

RGB

rgb(187, 222, 251)

Material Design

TBC

Lightest

Primary

Secondary Colours

Consistent use of specified colours will encourage and reinforce audience association with our brand.

 

Red and yellow are in the same segment on the colour wheel. They’re both associated with warmth, optimism, dynamism and energy. Of all the warm colours, yellow is considered to be the most energetic.

 

We use the primary colour – specifically the energy associated with yellow – to grab attention to our brand.

Hex

#5c9629

RGB

rgb(104, 159, 56)

Material Design

TBC

Dark

Primary

Hex

#7ebc37

RGB

rgb(139, 195, 74)

Material Design

TBC

Core

Primary

Hex

#a4d171

RGB

rgb(174, 213, 129)

Material Design

TBC

Light

Primary

Hex

#d7ebbe

RGB

rgb(220, 237, 200)

Material Design

TBC

Lightest

Primary

Tertiary Colours

Consistent use of specified colours will encourage and reinforce audience association with our brand.

 

Red and yellow are in the same segment on the colour wheel. They’re both associated with warmth, optimism, dynamism and energy. Of all the warm colours, yellow is considered to be the most energetic.

 

We use the primary colour – specifically the energy associated with yellow – to grab attention to our brand.

Hex

#bc104f

RGB

rgb(194, 24, 91)

Material Design

TBC

Dark

Primary

Hex

#e81056

RGB

rgb(233, 30, 99)

Material Design

TBC

Core

Primary

Hex

#f05486

RGB

rgb(240, 98, 146)

Material Design

TBC

Light

Primary

Hex

#f8b2ca

RGB

rgb(248, 187, 208)

Material Design

TBC

Lightest

Primary

Font Colours

Consistent use of specified colours will encourage and reinforce audience association with our brand.

 

Red and yellow are in the same segment on the colour wheel. They’re both associated with warmth, optimism, dynamism and energy. Of all the warm colours, yellow is considered to be the most energetic.

 

We use the primary colour – specifically the energy associated with yellow – to grab attention to our brand.

Hex

#1e1e1e

RGB

rgb(33, 33, 33)

Material Design

TBC

Heading

Font

Hex

#565656

RGB

rgb(97, 97, 97)

Material Design

TBC

Body

Font

Hex

#939393

RGB

rgb(158, 158, 158)

Material Design

TBC

Light

Text

Hex

#dcdbdb

RGB

rgb(224, 224, 224)

Material Design

TBC

Lightest

Text

Call to Action Colours

Consistent use of specified colours will encourage and reinforce audience association with our brand.

 

Red and yellow are in the same segment on the colour wheel. They’re both associated with warmth, optimism, dynamism and energy. Of all the warm colours, yellow is considered to be the most energetic.

 

We use the primary colour – specifically the energy associated with yellow – to grab attention to our brand.

Hex

#ff8600

RGB

rgb(255, 145, 0)

Material Design

TBC

Call to Action

Primary

Hex

#ffa227

RGB

rgb(255, 171, 64)

Material Design

TBC

CTA Hover

Primary

Hex

#1d50ff

RGB

rgb(41, 98, 255)

Material Design

TBC

Call to Action

Secondary 

Hex

#367bff

RGB

rgb(68, 138, 255)

Material Design

TBC

CTA Hover

Secondary

Brand Fonts

Delivering your message.

Colour, especially a primary colour, may come first, evoking and affecting emotion. And our logo will strike a chord every time it’s seen.

But what next?

Next – we deliver our message. Through the use of typographical design in the form of fonts. Our fonts reflect our brand’s personality and resonate with our audience.

Two principal and complementary fonts are available for the main text elements of our design. Notably, headings and body copy.

A subtle variation within our secondary font family is available where monospace typography is required. The availability of a further secondary font gives us the option of distinguishing quotes and articles from body copy.

In each case, we apply as appropriate, being careful to follow the stipulations detailed below.

Primary Fonts

Our primary fonts are intended for headings and body copy.

 

The body copy font is used for hyperlinks(within body text) in standard sentence case. It is also used on calls to action (CTA’s) and buttons, but always in UPPERCASE. All instances should be in conjunction with our primary or secondary brand colors to catch the attention of our audience.

Headings

Font Family

Montserrat

Weight

500 Medium

Size

2 EM

Letter Spacing

0.01 EM

Line Height

1.3

Styles

Regular

Medium

Semi-Bold

Bold

Characters

a b c d e  f g h i j k l m n o p q r s t u v w x y z

a b c d e  f g h i j k l m n o p q r s t u v w x y z

1 2 3 4 5 6 7 8 9 0

‘ ? ’ “ ! ” ( % ) [ # ] { @ } / & \ < – + ÷ × = > ® © $ € £ ¥ ¢ : ; , . *

Body

Font Family

Montserrat

Weight

500 Medium

Size

2 EM

Letter Spacing

0.01 EM

Line Height

1.3

Styles

Regular

Medium

Semi-Bold

Bold

Characters

a b c d e  f g h i j k l m n o p q r s t u v w x y z

a b c d e  f g h i j k l m n o p q r s t u v w x y z

1 2 3 4 5 6 7 8 9 0

‘ ? ’ “ ! ” ( % ) [ # ] { @ } / & \ < – + ÷ × = > ® © $ € £ ¥ ¢ : ; , . *

Secondary Fonts

This is an example of how an article would read. A serif font like this is comfortable for the reader to follow in larger bodies of text.

 

The line and paragraph spacing helps the story to breathe and flow.

“This is an example of how quotes should be displayed. Quotes are always presented in italics and bookended by speech marks.”

Quotes

Font Family

Montserrat

Weight

500 Medium

Size

2 EM

Letter Spacing

0.01 EM

Line Height

1.3

Styles

Regular

Medium

Semi-Bold

Bold

Characters

a b c d e  f g h i j k l m n o p q r s t u v w x y z

a b c d e  f g h i j k l m n o p q r s t u v w x y z

1 2 3 4 5 6 7 8 9 0

‘ ? ’ “ ! ” ( % ) [ # ] { @ } / & \ < – + ÷ × = > ® © $ € £ ¥ ¢ : ; , . *

Our secondary fonts are both proportional (variable-width) and monospace (fixed width). The proportional secondary fonts are used for quotes and articles. The monospace fonts are used for distinguishing single characters.

 

We use monospace fonts where we need to distinguish single characters.

 

Here you see how each character is fixed-width occupying the same horizontal space, as opposed to a proportional or, variable-width, font.

Monospace

Font Family

Montserrat

Weight

500 Medium

Size

2 EM

Letter Spacing

0.01 EM

Line Height

1.3

Styles

Regular

Medium

Semi-Bold

Bold

Characters

a b c d e  f g h i j k l m n o p q r s t u v w x y z

a b c d e  f g h i j k l m n o p q r s t u v w x y z

1 2 3 4 5 6 7 8 9 0

‘ ? ’ “ ! ” ( % ) [ # ] { @ } / & \ < – + ÷ × = > ® © $ € £ ¥ ¢ : ; , . *

Brand Social

Color comes first. It evokes emotion and is the most visual stimulus to the brain. Color registers before imagery or typography and is the primary trigger when engaging your audience.

 

Variants of the Primary and Secondary Brand Colors are detailed here, along with Font Colors. Consistent use of specified color will encourage and reinforce audience association with the brand.

 

When designing for online applications use the specified HEX and/or RGB code. When designing for print applications use the specified CMYK code.

Facebook

Profile Photo

For use on white or light background

Click here

Cover Photo

Twitter

Profile Photo

For use on white or light background

Click here

Cover Photo

Linkedin

Profile Photo

For use on white or light background

Click here

Cover Photo

Youtube

Profile Photo

For use on white or light background

Click here

Cover Photo

Brand Stationary

Color comes first. It evokes emotion and is the most visual stimulus to the brain. Color registers before imagery or typography and is the primary trigger when engaging your audience.

 

Variants of the Primary and Secondary Brand Colors are detailed here, along with Font Colors. Consistent use of specified color will encourage and reinforce audience association with the brand.

 

When designing for online applications use the specified HEX and/or RGB code. When designing for print applications use the specified CMYK code.

Business Cards

These cards are not designed to provide contact details. 

 

They are a statement. 

 

They should be delivered with the message. 

 

“If I’m not at the top of Google then I’m not doing my job.”

Front

Back

Digital Assets

Color comes first. It evokes emotion and is the most visual stimulus to the brain. Color registers before imagery or typography and is the primary trigger when engaging your audience.

 

Variants of the Primary and Secondary Brand Colors are detailed here, along with Font Colors. Consistent use of specified color will encourage and reinforce audience association with the brand.

 

When designing for online applications use the specified HEX and/or RGB code. When designing for print applications use the specified CMYK code.