Brand Guidelines
Version 1.0
Updated 2019/07/24
Introduction
Brand Platform
These guidelines were prepared by the Milk Studio in order to enhance the creative process and to support the development of WebSupport brand communication.
Foreword
The following guidelines show the basic principles of how to use the revised WebSupport identity.
The WebSupport identity is built as a set of components. When used according to the rules, together they form the distinctive visual expression of the WebSupport brand.
This kit outlines these parts, their structure and how they are linked, in order to help you communicate the WebSupport brand consistently across all channels.
Brand Assets
Here is an overview of the individual elements that make up our brand. Think of them as tools in your brand toolkit.
.jpg){kind=logo}
Principal Assets
Standard Logo
Our logo is the primary expression of our brand. It should feature prominently in all internal and external communications.
.jpg){kind=logo}
Primary Brand Colours
Colour plays an important role in brand recognition. We have selected a set of primary and secondary WebSupport colours.
Typeface
The primary brand typeface is Bebas Neue. It works to strengthen the brand look and feel and to express the WebSupport personality.
.jpg){kind=logo}
Visual Style
The WebSupport visual style can be used to deliver immediate impact by separating the logo and placing it as a dynamic element within the layout of the design.
Illustrations
Illustrations allow us to communicate ideas. They are one of the core elements of our brand — when the people see them, they instantly think ‘WebSupport’.
Substitutes Assets
Stacked Logo
This version should be used for use when the legibility of the Standard Logo is compromised due to the scale of usage.
.jpg){kind=logo}
Partnership Logo
This version is intended for use when our brand has a dominant position in a partnership.
.jpg){kind=logo}
Symbol
The Standard Logo should be used on all corporate materials, whenever possible. However, there may be instances when branding is required, but where the space available does not allow the Standard Logo to be used effectively. In these rare cases, the symbol may be used on its own.
.jpg){kind=logo}
Secondary Brand Colours
Our secondary colours form the main palette for illustration and icons.
.jpg){kind=logo}
Supporting Typeface
Optimized for legibility, clarity, and consistency, SF Pro is the WebSupport body copy typeface.
Photography
Our photography reinforces our brand that is bright, confident, positive and inspiring.
.jpg){kind=logo}
Icon
To support our imagery and typography, we use fitting icons for clear navigation.
.jpg){kind=logo}
Pattern
To allow flexibility within our brand applications, we have created a pattern structure.
Updated 2019/07/24
Logo
Overview
Our updated logo is accessible, easy to read, and takes full benefit of our brand recognition. Optical kerning, refined symbol, and defined clear space, as well as careful placement in relation to other content, all help to make it as instantly recognizable as possible.
.jpg){kind=logo}
Logo Components
The WebSupport logo consists of two components: the symbol and logotype.
Construction
The current characters of the logotype have been carefully revised and typographically homogenized in order to secure a better image. The characters "b", "S" and "p" were recut to stylistically align with defining attributes of a custom typeface. Other letters received more subtle updates; cleaning up overly nuanced attributes, and bringing a more cursive feel to the mark.
.gif){kind=logo}
Collection
Our communication makes use of four distinct logos, used according to the type of communication.
Black and white versions have been created in Pantone colours, CMYK and RGB. Please, ensure you select the correct logo, for the specific case.
Using Our Logo
- Always use the original logo artwork (available for use in all formats to
download from our brand site) - Do not modify the logo artwork in any way
Standard Logo
This version is to be used in most instances.
Black
White
Stacked Logo
This version should be used for use when the legibility of the Standard Logo is compromised due to the scale of usage.
Black
White
Partnership Logo
This version is intended for use when our brand has a dominant position in a partnership.
Black
White
Symbol
The Standard Logo should be used on all corporate materials, whenever possible. However, there may be instances when branding is required, but where the space available does not allow the Standard Logo to be used effectively. In these rare cases, the symbol may be used on its own.
Black
White
Clear Space
There needs to be a clear space around our logo at all times.
Standard Logo
If not stated otherwise, this space is equal to the height of the letter 'W'.
Stacked Logo
If not stated otherwise, this space is equal to the height of the letter 'W'.
Partnership Logo
If not stated otherwise, this space must be 1/2 of the height of the silhouette.
Symbol
In this case, the clear space must be equal to the height of the symbol.
Special Cases
The logo placement depends on the specific use. Here are some exceptions from the rule.
Social icon
USB memory stick
Signage
Website favicon
Minimum Size
It is important that all parts of the identity can be easily read in every application. For this reason, the logo should not be reproduced smaller than the sizes specified below. There are no maximum size restrictions as long as the clear space requirements are met.
Standard Logo
The Standard Logo should not be reproduced smaller than 160px in digital or 30mm in print.
Partnership Logo
The Partnership Logo should not be reproduced smaller than 120px in digital or 20mm in print.
Partnership Logo
The Partnership Logo should not be reproduced smaller than 180px in digital or 30mm in print.
Symbol
The Symbol should not be reproduced smaller than 40px in digital or 7mm in print.
Scale
We have calculated the perfect logo sizes for different uses in print and digital. The width is measured from the left edge of the Symbol to the right edge of the ‘T.’
Standard Logo on Website
Here are the pixel-perfect logo sizes for website format.
| Breakpoint | Width in Percentage |
|---|---|
| XSmall (480 px) | 20% (Symbol) |
| XSmall (600 px) | 45% (Logo) |
| Small (960 px) | 28% (Logo) |
| Medium (1280 px) | 21% (Logo) |
| Large (1920 px) | 14% (Logo) |
| XLarge (∞) | 14% (Logo) |
Standard Logo on Tablet
Here are the pixel-perfect logo sizes for the tablet format.
| Breakpoint | Width in Percentage |
|---|---|
| XSmall (600 px) | 45% (Logo) |
| Small (759 px) | 36% (Logo) |
| Medium (1024 px) | 26% (Logo) |
| Large (1280 px) | 21% (Logo) |
| XLarge (∞) | 21% (Logo) |
Standard Logo on Mobile
Here are the pixel-perfect logo sizes for the mobile format.
| Breakpoint | Width in Percentage |
|---|---|
| XSmall (480 px) | 30% (Symbol) |
| Small (750 px) | 20% (Symbol) |
| Medium (960 px) | 55% (Logo) |
| Large (1080 px) | 50% (Logo) |
| XLarge (∞) | 50% (Logo) |
Standard Logo in Print
Here are the Standard Logo sizes for different print formats.
| Paper Format | Width in Percentage |
|---|---|
| A1 | 30% |
| A2 | 30% |
| A3 | 30% |
| A4 | 30% |
| A5 | 40% |
| A6 | 50% |
Symbol in Print
Here are the Symbol sizes for different print formats.
| Paper Format | Width in Percentage |
|---|---|
| A1 | 24% |
| A2 | 24% |
| A3 | 24% |
| A4 | 24% |
| A5 | 30% |
| A6 | 40% |
Placement
The position of our logo is flexible and responds to the content of the application. Below are examples of how our logos could be placed.
Standard Logo
Our Standard Logo can appear in the top-left, top-centre, top-right, bottom-right, bottom-centre or bottom-left corner. However, it is always important to observe and maintain the rules for proper clear space.
Stacked Logo
Our Stacked Logo can appear in the top-centre or bottom-centre. However, it is always important to observe and maintain the rules for proper clear space.
Partnership Logo
Our Partnership Logo must be centred vertically and horizontally on the given area.
Pro Logo
Our Pro Logo can appear in the top-left or bottom-left corner. However, it is always important to observe and maintain the rules for proper clear space.
Symbol
Our Symbol can appear in the top-left, top-centre, top-right, bottom-right, bottom-centre or bottom-left corner. However, it is always important to observe and maintain the rules for proper clear space.
Partnership
Aligning partnership logos has to follow the rules of clear space. Permission to use the WebSupport logo must be provided in advance by the WebSupport Creative Team, and all artwork must be approved prior to publication or production.
.gif){kind=logo}
Partnership Logo
Our Partnership Logo indicates that our brand has the dominant position into the partnership.
Standard Logo
Our Standard Logo is the approved logo for all partnerships.
Stacked Logo
Our Stacked Logo is the approved logo for all partnerships and it is intended for use when the legibility of the Standard Logo is compromised due to the scale of usage.
Incorrect Use
Here are some examples of unacceptable logo misuse. Any alteration of the logo negatively affects the integrity of our brand. Always use the approved logo artwork to ensure consistency.
Do not change the colours of the logo.
Do not place the logo over an image that makes it illegible.
Do not recreate any parts of the logo.
Do not use an unapproved logo and colour background combination.
Do not apply any effects or gradients to the logo.
Do not rotate the logo.
Do not skew or condense the logo.
Do not add foreign elements to the logo.
Updated 2019/07/24
Colour
Overview
The use of colour is an important aspect of the WebSupport identity. The primary colours are WS Navy, WS Red, WS Black and WS White. The logo colour should be shown in WS Black when the background colour is white or light, and in WS White when the background colour is black or dark.
Colour Specifications
Pantone® Spot Colours, as well as CMYK process colours, are specified for print use. RGB and HTML specifications are for use with on-screen and web applications, and are provided for a consistent appearance.
Primary Brand Colours
We use navy, red, black, and white to anchor our secondary palette and ensure consistency across our brand communications.
.jpg)
Navy
RGB — 44 55 66
CMYK — 87 65 49 54
HEX — 2c3843
PMS — 7546
.jpg)
Red
RGB — 221 86 86
CMYK — 0 78 57 0
HEX — DD5656
PMS — 1787
.jpg)
Black
RGB — 0 0 0
CMYK — 0 0 0 100
HEX — 000000
PMS — Black
.jpg)
White
RGB — 255 255 255
CMYK — 0 0 0 0
HEX — FFFFFF
PMS — White
Secondary Colours
Our secondary colours form the main palette for illustration and icons.
.jpg)
Green
RGB — 110 157 82
CMYK — 72 13 87 0
HEX — 6E9D52
PMS — 362
.jpg)
Aqua
RGB — 158 206 202
CMYK — 50 0 25 0
HEX — 9ECECA
PMS — 5503
.jpg)
Orange
RGB — 219 140 59
CMYK — 0 53 86 0
HEX — DB8C3B
PMS — 715
.jpg)
Purple
RGB — 83 75 101
CMYK — 70 69 36 25
HEX — 534B65
PMS — 668
.jpg)
Light Grey
RGB — 145 161 156
CMYK — 49 24 36 6
HEX — 91A19C
PMS — 442
Tint Values
These tints are examples that can be applied to all colour breakdowns.
Logo Use on Solid Backgrounds
White Logo on Coloured Background
Our primary logo colour is black. However, the white version can be used on a coloured background.
Navy
Red
Green
Aqua
Orange
Purple
Light Grey
Background Opacity Control
These examples should be used as a guide for selecting the correct option (Black or White) for your background.
Light Background
This is the preferred method of reproducing the logo.
Mid Background
The Black or White option of the logo may be used depending on the tone of the background.
Dark Background
The White option of the logo must be used on dark backgrounds.
Incorrect Use
Here are some examples of unacceptable colour misuse.
.jpg)
Do not use the logo that does not stand out from the background.
.jpg)
Do not use the logo in any colour other than white or black.
Updated 2019/07/24
Typography
Overview
At WebSupport, we use two typefaces: Bebas Neue (Fontfabric) and SF Pro (Apple). Both typefaces come in a variety of weights and offer the flexibility of use. Commitment to these typefaces will create a consistent and strong identity.
Where using these typefaces isn’t possible (for example in emails), we use Arial.
External Suppliers
You can download the typefaces at:
Primary Typeface
Bebas Neue
The primary brand typeface is Bebas Neue. It works to strengthen the brand look and feel and to express the WebSupport personality. The primary typeface is used for headings — not for body copy and buttons.
Bebas Neue Regular
Bebas Neue Bold
Supporting Typeface
SF Pro
Optimized for legibility, clarity, and consistency, SF Pro is the WebSupport body copy typeface.
SF Pro Light
SF Pro Regular
SF Pro Medium
SF Pro Bold
Applying The Type
Main headlines can be aligned to the left, right or centred.
Left-aligned
Right-aligned
Centred
Numbers
Bebas Neue can be used for numbering and for number highlights.
Kerning and Tracking
Kerning is the adjustment of space between individual letters in a word. In most design applications you can easily set the application to optical kerning which allows the computer to adjust kerning for you — use this setting for all of our copy.
Tracking is the overall setting of the space between the letters in a body of copy. In most design applications you can easily adjust the tracking settings.
Bebas Neue
Always set Bebas Neue kerning to optical and track to plus 50px.
SF Pro
Always leave SF Pro kerning set to Auto and tracking at zero.
Leading
Leading is the space between the lines of type in a body of copy. Follow these guidelines to control your leading.
Note: This formula is a guide and should be followed when possible, but there may be applications when it is not appropriate.
Bebas Neue
The minimum leading point should always be set at two points above the chosen font size.
SF Pro
The minimum leading point should always be set at six points above the chosen font size.
Hierarchy
It is crucial to organize typography in 
a hierarchical system according to importance and use.
.jpg)
Awareness
In this example, the most important elements are made to hold the most attention through scale and type.
Call to Action
Even with just the smallest adjustments, the focus moves to the "Call to Action" message.
Call to Action
There are two ways to create and signify a call to action for brand communications. Use SF Pro Bold for Action and for Buttons.
Label Button
Label buttons with what they do. Add a clear message of what happens after the click.
.jpg)
Inactive
Hover/Active
Text Button
The text buttons are text labels that fall outside of a block of text. The text should describe the action that will occur if a user clicks or taps a button.
.jpg)
Inactive
Hover/Active
Colour Palette
The colour palette is set to help communicate different moods. Below are examples of how to use it.
White and Navy Background
.jpg)
Navy on white background
.jpg)
White on a navy background
.jpg)
Red on white background
.jpg)
Red on a navy background
.jpg)
Green on white background
.jpg)
Green on a navy background
.jpg)
Aqua on white background
.jpg)
Aqua on a navy background
Orange on white background
.jpg)
Orange on a navy background
.jpg)
Purple on white background
.jpg)
Purple on a navy background (this option is not approved)
.jpg)
Light grey on white background
.jpg)
Light grey on a navy background
Coloured Background
.jpg)
Red background
.jpg)
Green background
.jpg)
Aqua background
.jpg)
Orange background
.jpg)
Purple background
.jpg)
Light grey background
Incorrect Use
Below are examples of incorrect typography uses.
Do not use more than one colour on the same page unless you are working with graphs and charts.
Do not change kerning or tracking.
Do not use Bebas Neue for different levels of hierarchy.
Do not make different levels of hierarchy using the same size.
The Type System Recommendation
We use typography to present our design and content as clearly and efficiently as possible. The type system includes a range of contrasting styles that support the needs of WebSupport and its content.
Recommended Styles for Digital Use
Here are the 14 standard type system styles for all the digital formats.
You can access the type system using type styles in Sketch by downloading this file.
| Category | Typeface | Font | Size | Letter Spacing | Line Hight |
|---|---|---|---|---|---|
| Heading 1 | Bebas Neue | Bold | 56 px | 20 px / 1 em | 56 px |
| Heading 2 | Bebas Neue | Bold | 40 px | 10 px / 0,5 em | 40 px |
| Heading 3 | Bebas Neue | Bold | 32 px | 10 px / 0,5 em | 32 px |
| Heading 4 | Bebas Neue | Bold | 24 px | 10 px / 0,5 em | 24 px |
| Subtitle 1 | SF Pro | Regular | 32 px | Normal | 40 px |
| Subtitle 2 | SF Pro | Regular | 24 px | Normal | 32 px |
| Subtitle 3 | SF Pro | Regular | 18 px | Normal | 24 px |
| Subtitle 4 | SF Pro | Bold | 14 px | Normal | 16 px |
| Body 1 | SF Pro | Regular | 14 px | Normal | 16 px |
| Body 2 | SF Pro | Regular | 12 px | Normal | 16 px |
| Button 1 | SF Pro | Bold | 12 px | 60 px / 3 em | 16 px |
| Button 2 | SF Pro | Bold | 12 px | 10 px / 0,5 em | 16 px |
| Caption | SF Pro | Regular | 10 px | 10 px / 0,5 em | 16 px |
| Overline | SF Pro | Medium | 9 px | 20 px / 1 em | 16 px |
Download Typography Styles (Sketch)
Recommended Styles for Print Use
Here are the 12 standard type system styles for A4 print format.
| Category | Typeface | Font | Size | Letter Spacing | Line Hight |
|---|---|---|---|---|---|
| Heading 1 | Bebas Neue | Bold | 54 pt | 50 pt | 56 pt |
| Heading 2 | Bebas Neue | Bold | 38 pt | 50 pt | 40 pt |
| Heading 3 | Bebas Neue | Bold | 30 pt | 50 pt | 32 pt |
| Heading 4 | Bebas Neue | Bold | 22 pt | 50 pt | 24 pt |
| Subtitle 1 | SF Pro | Regular | 24 pt | Normal | 30 pt |
| Subtitle 2 | SF Pro | Regular | 18 pt | Normal | 22 pt |
| Subtitle 3 | SF Pro | Bold | 14 pt | Normal | 20 pt |
| Body 1 | SF Pro | Regular | 12 pt | Normal | 18 pt |
| Body 2 | SF Pro | Regular | 10 pt | Normal | 16 pt |
| Body 3 | SF Pro | Regular | 8 pt | Normal | 14 pt |
| Caption | SF Pro | Bold | 10 pt | 10 pt | 16 pt |
| Overline | SF Pro | Medium | 9 pt | 20 pt | 16 pt |
Pairings
It is essential to maintain these type pairings. This allows for accuracy, persistence, and a strong hierarchy for all communications.
Recommended Pairings
| Category | Typeface | Font | Size | Letter Spacing | Line Hight |
|---|---|---|---|---|---|
| Heading 1 | Bebas Neue | Bold | 54 pt | 50 pt | 56 pt |
| Subtitle 1 | SF Pro | Regular | 24 pt | Normal | 30 pt |
| Body 3 | SF Pro | Regular | 8 pt | Normal | 14 pt |
| Caption | SF Pro | Bold | 10 pt | 10 pt | 16 pt |
| Overline | SF Pro | Medium | 9 pt | 20 pt | 16 pt |
| Category | Typeface | Font | Size | Letter Spacing | Line Hight |
|---|---|---|---|---|---|
| Heading 2 | Bebas Neue | Regular | 38 pt | 50 pt | 40 pt |
| Subtitle 2 | SF Pro | Regular | 18 pt | Normal | 22 pt |
| Body 3 | SF Pro | Regular | 8 pt | Normal | 14 pt |
| Caption | SF Pro | Bold | 10 pt | 10 pt | 16 pt |
| Category | Typeface | Font | Size | Letter Spacing | Line Hight |
|---|---|---|---|---|---|
| Heading 1 | Bebas Neue | Bold | 56 px | 20 px / 1 em | 56 px |
| Subtitle 2 | SF Pro | Regular | 24 px | Normal | 32 px |
| Body 2 | SF Pro | Regular | 12 px | Normal | 16 px |
| Caption | SF Pro | Regular | 10 px | 10 px / 0,5 em | 16 px |
| Overline | SF Pro | Medium | 9 px | 20 px / 1 em | 16 px |
Examples
.jpg)
Updated 2019/07/24
Visual Style
Overview
Never static, always scalable, the visual style is a brand-building element that can be used in multiple ways.
Construction
These are the six steps we follow to create a basic visual style.
.jpg)
Step 1
Select format. This could be either portrait or landscape.
.jpg)
Step 2
Add a grid of squares (not to be confused with grid layouts) that always fits the screen no matter the width or height of the screen. Use this fixed sizing scale: 8x8px on web and 8x8mm on print.
.jpg)
Step 3
Add a shape as a new layer.
.jpg)
Step 4
Put the Standard Logo over the shape. It is important to observe and maintain the rules for proper clear space.
.jpg)
Step 5
Identify the four points and play with them in order to create a new dynamic shape.
.jpg)
Step 6
Finally, change the colour to make the visual more interesting.
Types
We consider two modes when applying the visual style.
One Layer
We use this option with an illustration.
Two Layers
We use this option with photography.
Animated Examples: One Layer
We use this option with an illustration.
Animated Examples: Two Layers
We use this option with photography.
Colour Palette
This section is your guide to help create the visual style with colour in B2C and Internal communication.
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
Incorrect Use
Below are examples of incorrect typography uses.
Do not make the visual style wider than necessary.
Do not ignore the clear space around the logo.
Do not use unofficial colours.
Do not play with the visual style in an unfashionable way.
Updated 2019/07/24
Illustration
Overview
The illustrations always depict subjects that are related to WebSupport products and can be used in print and digital applications. The full suite of illustration is available to those who have access to design software such as Illustrator, InDesign and Photoshop.
Principles and Characteristic
Principles
The WebSupport illustration style follows two main principles: 'Inspiring through metaphor' and 'Easy to understand'.
Inspiring through metaphor
Embrace realism to create compelling images.
Easy to understand
Educate through straight forward symbols.
Characteristic
Our illustrations are simple, created from geometric shapes and rendered in solid, flat colours.
.jpg)
Geometric Shapes
Do not use rounded corners.
Solid Colours
Do not use gradients.
Placement
The placement of illustrations is flexible and responds to the content. It can be placed either on the left, right, centre it below or above the text.
Left
Right
Centred below
Centred above
Background
Our illustrations are always accompanied by a coloured background. Please note that these images are only examples. Each illustration can be placed on different colour background.
Illustration on navy background
Illustration on red background
Illustration on green background
Illustration on aqua background
Illustration on orange background
Illustration on purple background
Illustration on light grey background
Updated 2019/07/24
Photography
Overview
We use photography that reinforces our brand — it is bright, confident, positive and inspiring and supports the subject matter.
Principles
The WebSupport image style consists of two levels: Portrait and Editorial. Each level has been developed to reflect a different aspect of our company.
.gif)
Level 1: Portrait
Our series of portraits have been created to reflect our brand attributes: smart, analytical, pioneering, inspiring, creative and rigorous.
.gif)
Level 2: Editorial
Our editorial style focuses on capturing our colleagues in their workplace. The individual should look relaxed and comfortable in their environment, and able to express their personality.
Updated 2019/07/24
Icons
Overview
When creating new icons, it is important to illustrate the concept as simple as possible. We refer to our existing iconography and make sure that any new icons created follow the same style.
Construction
These are the three steps we follow to create a symbol.
.jpg){kind=icon}
Step 1
Always start with the silhouette that uses a dark background.
.jpg){kind=icon}
Step 2
Create a symbol by using all the illustration rules.
.jpg){kind=icon}
Step 3
By combining our element silhouettes and a symbol, we can create a distinctive icon. The symbol should be always go beyond the edges of the silhouettes.
Clear Space
There needs to be a clear space around the icon at all times, and this space must be 1/3 of the height of the silhouette.
.jpg){kind=icon}
Sizing
Icons have been designed to work in different sizes, but these are our best two recommendations: 100px and 180px in width on web.
.jpg){kind=icon}
Minimum size
Recommended size
Working With Text
When you combine icons and text, the distance between these two elements needs to be equal or 1/2 of the height of the silhiuette.
.jpg){kind=icon}
Version 1
Version 2
Examples
Collection
Our icons are bold and impactful. Always use the original artwork (available for download in all formats from our brand site).
.jpg){kind=icon}
Updated 2019/07/24
Pattern
Overview
Never static, always scalable, our pattern is a brand-building element that can be used in multiple ways.
Construction
These are the five steps we follow to create a pattern.
Step 1
Create a parallelogram.
Step 2
Duplicate it in order to create a grid.
Step 3
Choose a template.
Step 4
The WebSupport pattern consists of two elements that are similar in shape, but different in size.
Step 5
The elements should be creatively cropped to generate visual interest and to accommodate other WebSupport brand assets such as headlines, photography and the logo. You can choose between any of our corporate colours.
Applications
Please note that these examples are not intended to define or limit the use of patterns.
T-shirt
Carpet
Phone case
Mug
Updated 2019/07/24
Preview of Applications
Website
The navigation bar and footer.
Measurements
Design
Administration Page
Login page and navigation bar.
Login page
Admin page - Option 1
Admin page - Option 2
Profile picture
Facebook page
Grid - Left-alignment
Grid - Right-alignment
Examples with photography
Examples with illustration
Cover image
Cover image example
Facebook Co-branding
Co-branding - Left-alignment
Co-branding - Right-alignment
Examples with photography
Examples with illustration
Youtube
Profile picture
Youtube page
Youtube graphic panel
Youtube graphic panel
Profile picture
Podcast
Example
Example
Newsletter
Example
Example
Poster
Grid
Grid
Grid
Grid
Grid
Grid
Example
Example
Example
Example
Updated 2019/07/24
B2B Communication
Overview
The following section is dedicated to B2B communication.
Colour Palette
We use black, red, dark grey, and white to anchor our secondary palette and ensure consistency across our B2B brand communications.
.jpg)
Black
RGB — 0 0 0
CMYK — 0 0 0 100
HEX — 000000
PMS — Black
Red
RGB — 221 86 86
CMYK — 0 78 57 0
HEX — DD5656
PMS — 1787
Dark Grey
RGB — 83 85 86
CMYK — 30 23 17 58
HEX — 535556
PMS — Cool Gray 9
.jpg)
White
RGB — 255 255 255
CMYK — 0 0 0 0
HEX — FFFFFF
PMS — White
Typography
This section is your guide to help create typography with colour in B2B communication.
Dark grey on white background
White on dark grey background
Red on white background
White on black background
Visual Style
This section is your guide to help create the visual style with colour in B2B communication.
Applications Preview
Business Card
The following provides an example of how the visual elements come together to create a business card.
Front
Back
Flyer
The following provides an example of how the visual elements come together to create a flyer.
Front
Back
Offer
Cover
There are a number of different layout styles for offers — illustrated below. While layouts can vary, the size and position of the WebSupport logo and strapline must not be modified.
Grid
Elements
Design
Design
Design
Design
Design
Design
Spread
The images below show the layout grid examples for different types of offers.
Grid
Elements
Design
Design
Updated 2019/07/24
Internal Communication
Overview
The following slides are examples of how internal communication should use brand assets. The primary visual element in the internal communication is our symbol.
Colour Palette
Our internal communication is colourful; a true reflection of our personality.
Navy
RGB — 44 55 66
CMYK — 87 65 49 54
HEX — 2c3843
PMS — 7546
Red
RGB — 221 86 86
CMYK — 0 78 57 0
HEX — DD5656
PMS — 1787
Green
RGB — 110 157 82
CMYK — 72 13 87 0
HEX — 6E9D52
PMS — 362
Aqua
RGB — 158 206 202
CMYK — 50 0 25 0
HEX — 9ECECA
PMS — 5503
Orange
RGB — 219 140 59
CMYK — 0 53 86 0
HEX — DB8C3B
PMS — 715
Purple
RGB — 83 75 101
CMYK — 70 69 36 25
HEX — 534B65
PMS — 668
Light Grey
RGB — 145 161 156
CMYK — 49 24 36 6
HEX — 91A19C
PMS — 442
Typography
This section is your guide to help create typography with colour in Internal communication.
White and Navy Background
Navy on white background
White on a navy background
Red on white background
Red on a navy background
Green on white background
Green on a navy background
Aqua on white background
Aqua on a navy background
Orange on white background
Orange on a navy background
Purple on white background
Purple on a navy background (this option is not approved)
Light grey on white background
Light grey on a navy background
Coloured Background
Red background
Green background
Aqua background
Orange background
Purple background
Light grey background
Visual Style
This section is your guide to help create the visual style with colour in internal communication.
Aqua - One layer
Aqua - Two layers
Updated 2019/07/24