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.
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.
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.
Cover Photo
Cover Photo
Cover Photo
Youtube
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.