Skip to content

Our Brand

HomeBrand 2020

Our brand is what Colt represents in the minds of our people, our customers and our prospects. It’s what they think of us, their gut feeling and first thought when they hear our name. That’s why it’s a big deal.

We know that our customers and prospects want a consistent and proactive customer service, as individuals and as a business. So we want to make sure every time someone interacts with Colt they get the same great experience.

This area is to help you make sure that all of the communications you create, look and feel like Colt. Nothing brings a brand to life more than consistency, so please refer to this document to make sure what you are doing is on brand.

If you are an agency or partner and need access to our brand assets, please click here.

If you’re not sure or have any questions, you can always get in touch with us directly, by contacting Laura Perrott, Laura.Perrott@colt.net - Global Director Digital and Brand or Hannah Davies, Hannah.Davies@colt.net - Brand Marketing Executive. If you would like to download a version of this webpage as a .pdf, please click here.

Colt Brand Team

Logos

The Colt logo

Our logo is primarily used with the teal or black on a white background. Alternatively you can also do a white logo on a teal or black background. Please note when our logo is used over an image it should be clearly visible.

04 White on teal
.PNG | .EPS | .JPG

02 Teal on white
.PNG | .EPS | .JPG

03 White on Black
.PNG | .EPS | .JPG

01 Black on white
.PNG | .EPS | .JPG

05 Black over image
.PNG | .EPS | .JPG

06 White over image
.PNG | .EPS | .JPG

Clear space

Please keep the space above, below and adjacent to the logo clear of other graphic elements, images and document edges. This allows the logo to be read clearly without confusion. The amount of clear space is equal to the size of the ‘o‘ in the logo.

Position, print

When designing for print our logo should be on the top left or right corner of the page. If required the logo can also be placed on the bottom left or right
corner. On the adjacent image you can see suggested A4 portrait and landscape positioning.

Position, digital

When designing for digital, our logo is placed in the top-left corner.

What not to do

As a general rule of thumb, if you don’t see an example within this brandbook, it’s probably not allowed. Please don’t:

  1. Redraw, retype or source our logo online
  2. Rotate or flip the logo
  3. Reorder / move the letters
  4. Stretch or distort our logo
  5. Recolour / use non-brand colours
  6. Add additional effects to our logo

Colt IQ Network

When using the Colt IQ Network logo or in text, you must use the full name – you should never refer to it as ‘Colt IQ’ or ‘IQ Net’.

01 Black on white
.PNG | .EPS | .JPG

02 Teal on white
.PNG | .EPS | .JPG

03 White on black
.PNG | .EPS | .JPG

04 White on teal
.PNG | .EPS | .JPG

Use of Logo

The Colt IQ Logo has been produced in two variations and is a sub logo. Depending on the space available please consider which logo works best in the space provided.  This should not replace Colt’s current logo and should not sit adjacent to the Colt logo. However it can be placed on the same page.

Size of Logo

To maintain the details on the Colt IQ logo please ensure ‘Powered by’ is legible at all times.

ColtIQlogo-wide-black

Co-branding

Lockups

Using the Colt logo with other logos is simple, but there are a few steps to follow, shown on this page. If you need a new lockup created, please contact the Brand Team.

Partner logo size

The partner logo should look the same size as our logo.

A tall thin logo would be shrunk until its height or overall visual footprint is the same as our logo. Similarly a short, wide logo would be shrunk until its width is the same as our logo.

Typography

Gotham is our primary font, we use this for everything. When Gotham is unavailable, i.e email and PowerPoint presentation sent to clients and partners, then Arial may be used.

Gotham is available for purchase from www.typography.com/fonts/gotham/styles/. It is available for use on the web as part of the cloud typography service from Hoefler&Co www.typography.com/cloud/pricing.

Gotham:

Connectivity matters: light

Connectivity matters: book

Connectivity matters: medium

Connectivity matters: bold

Arial:

Connectivity matters: regular

Connectivity matters: bold

Typography, in use

When using Gotham, stick to the same sizes and style to create a consistent experience for the reader.

Headings weight 01
gotham light

Lorem Ipsum dolor

Headings weight 01
gotham medium

Lorem Ipsum dolor

Headings weight 01
gotham bold

Lorem Ipsum dolor

Below are a few font pairings and layouts that follow this advice:

Text pairing 01
light + medium

Gotham Light. Colt leads the way in enabling your digital transformation through agile and on demand, high bandwidth solutions.

Gotham Medium. Colt leads the way in enabling your digital transformation through agile and on demand, high bandwidth solutions.

Text pairing 01
book + medium

Gotham Book. Colt leads the way in enabling your digital transformation through agile and on demand, high bandwidth solutions.

Gotham Medium. Colt leads the way in enabling your digital transformation through agile and on demand, high bandwidth solutions.

Text pairing 01
medium + bold

Gotham Medium. Colt leads the way in enabling your digital transformation through agile and on demand, high bandwidth solutions.

Gotham Bold. Colt leads the way in enabling your digital transformation through agile and on demand, high bandwidth solutions.

Text Style

When writing copy, there are a number of style rules that should be adhered to, we’ve detailed and illustrated each of these rules:

Use sentence case for titles and headings

Sentence case only capitalises the first word

Title Case Capitalises Every Letter

Do not place a full stop after headings and bulletpoints

No full stop after a heading

This is not how to do it.

• Or after a bullet point

• This is not how to do it.

–   This is an en dash, please don’t use these

Please use correct bullet points

• They're easy to use and are the 'original' bullet point

— This is an em dash, please don’t use as in some cultures this can be indicative of quotations

-   This is a hyphen, please don’t use these

Colours

Primary

Our primary brand colours are teal, white and black. These are the colours to use for the majority of our brand material.

Teal

Pantone 3272
CMYK 94 0 48 0
RGB 0 165 155
HEX 00 A5 9B

White

Pantone -
CMYK 0 0 0 0
RGB 255 255 255
HEX FF FF FF

Black

Pantone Black 6
CMYK 20 20 20 100
RGB 0 0 0
HEX 00 00 00

Support colours

These are our support colours, they can be useful to highlight different types of information, within graphs and presentations.

Bronze

Pantone 4645
CMYK 11 46 64 30
RGB 175 125 90
HEX AF 7D 5A

Blue

Pantone 647
CMYK 96 54 5 27
RGB 35 100 145
HEX 23 64 91

Infographic Colours

These are our infographic colours. These are the only colours to be used for creating infographics.

Teal

CMYK 94 0 48 0
RGB 0 165 155
HEX 00 A5 9B

Dark Teal

CMYK 85 30 60 25
RGB 0 105 95
HEX 00 69 5F

Orange

CMYK 0 50 90 0
RGB 255 140 45
HEX FF 8C 2D

Dark Orange

CMYK 0 75 100 0
RGB 205 85 0
HEX CD 55 00

Bronze

CMYK 11 46 64 30
RGB 175 125 90
HEX AF 7D 5A

Dark Bronze

CMYK 30 55 75 35
RGB 135 90 55
HEX 87 5A 36

Blue

CMYK 96 54 5 27
RGB 35 100 145
HEX 23 64 91

Dark Blue

CMYK 100 70 30 20
RGB 0 70 110
HEX 00 46 6E

Red

CMYK 10 95 85 10
RGB 200 45 45
HEX C8 2D 2D

Dark Red

CMYK 20 100 100 20
RGB 140 45 45
HEX 8C 2D 2D

Grey

CMYK 10 10 10 45
RGB 150 150 150
HEX 96 96 96

Dark Grey

CMYK 20 20 20 65
RGB 80 80 80
HEX 50 50 50

Photography

Style guide

  • Feels natural not staged
  • Natural lighting, and lenses to keep imagery fresh, human, and inviting
  • Depict real-life interaction between people and technology
  • Images can incorporate movements and lens blur
  • Subjects aren't looking directly at the camera

01 What we do:

These images should feature examples of what we do e.g. fibre optics, data centres and other services. Images should be of high quality and not feature people unless they are interacting with the systems or tools.

02 Where we do it

Real-life imagery of large cities. Daytime scenes have a clear focus on cities or buildings where we would be serving our customers

03 Who for / us

Smartly dressed office professionals, preferably from a tech environment.

Examples:

Brand property

We use a circle to support the concept of a business with a deep focus on customers needs. A focal ring is placed on the part of the image you’d like to draw the eye to.

 1. We focus on a location

A bright daytime image of a city.

 2. Create a circular blur

The size of the circle is the same proportion as the ‘o‘ in the logo. Crop the image and add a Gaussian Blur 70 Pixels

 3. Combine

Overlay image 2 over image 1 to create focus.

Overlay

We use a curve over images to help with readability and legibility of text, this can also be used with the focus ring.

 Overlay specification

  • Even circular curve
  • Transparency 80% - 95% (depending on the image)
  • Multiply transparency

Iconography

We have an extensive icon library that has been produced with lots of people across the business, so we should have something to meet your needs.

Please

  • use icons in appropriate places to illustrate content in the adjacent paragraph
  • keep consistent heights for each icon
  • use consistent clear space around the icon

Please don't

  • edit or alter the icons
  • overlap icons with text
  • over-use the icons in one context

Examples

Can’t find what you need?

If there is something you need but cannot find, or if you have a new requirement, then please contact the Brand Team. We manage the icon library centrally so we can limit duplication. This way we can make sure everyone is using our icons correctly, repeatedly and consistently. We regularly check with the business to see if there are new icon needs, so if you want to be consulted about icons please drop us a note.

Infographics

Style 1

We like to use our photography and icons to help get our message across in a clear and direct way.

Step 2

You can use bold colours from our brand palette to have a big impact, the graphic shouldn't be too busy.

Brand asset files

This content is password protected. To view it please follow the link below and enter the password when prompted.

Brand Asset Files

Tone of voice

This content is password protected. To view it please follow the link below and enter the password when prompted.

Brand Asset Files

Website / UX

For all Colt web assets, it is important that we maintain a level of brand consistency. While this doesn’t mean that you are unable to express creativity (in fact, we encourage you to do so), what we are expecting to achieve is that any user, no matter the platform they are interacting with, is able to understand that this is a Colt site, without having to rely on Logos or descriptive text.

Below, we highlight some key elements that should be kept within a consistent design. The basics covering brand guidelines such as Colours, Tone of Voice, Typography and Logos are listed above in their corresponding sections.

Site Identity

To maintain a consistent site identity, we recommend using the Colt preferred Favicon.

For all browsers and device types, a minimum sizing of 512x512 is required. You can find the file here.

Page Headers

Our primary headers are among the very first visual indicators of Colt’s brand that a user will see when landing on a site for the first time. An example of Colt.net’s header and navigation is listed below.

The Colt header & navigation is indicative of Colt’s approach to delivering digital information. The header is:

Clean and unintrusive – The header does not distract from the content of the page, and is not cluttered with extensive information – as with Colt’s recommendations on tone of voice, the menu does not include more information than it has to, to the benefit of user experience.

On brand – Save the heavier colours for the focus of the page, your content.

Prioritised by importance – All items that are the most important to Colt – Viewing products, case studies, calling sales and getting support – have a visual distinction through colour or bolding. This helps solidify a better user journey.

Do:

Do not:

Navigation should be informative, but should not go beyond one level of menu embedding. An example of a legacy menu we would like to move away from. The ‘solutions’ drop-down alone contains 20 different options. Think about how pages could be structured to avoid this.

As an overall rough reference, try to keep menu drop downs to under 10 items.

Page Footers

We want to take the same approach to our footers. Combined, the Header and Footer provide a frame for all web content, as well as serving as a consistency that is maintained no matter the content on page.

Footers should be of a close similarity to your header, and should be either white or light grey. If you are to have multiple sections within a footer, have them separated by spacing, and if possible, a vertical line.

Again, action-orientated items are colour-coded, with the most prioritised actions highlighted in attention-grabbing red, and the secondary call to action (contact us form) with a slightly subtler teal.

If a secondary footer is required, as with the Colt.net site, try to have the footer closer to the site content to be closer to the colour of the page. This way footers do not distract from page content or appear as jarring blocks.

Image Sizes & Scaling

As with Colt’s brand prioritising photography, and with a mind of responsive web design, please keep the following in mind as best practice when adding images to web pages:

  • Ensure that the size of the area the image will take up is at most 75% of the image’s native resolution. This ensures that on larger screens such as TVs & Projectors, the image does not appear blurry or low-resolution
  • Ensure that if an image is important in conveying a message, such as a piece of text, that the important information sits within the middle 50% of the image. As the web page will be viewed on desktops, tablets and mobiles, images can sometimes be cropped and information lost
  • Images on Colt.net will automatically be optimised for web performance, so please go for a higher resolution image wherever possible, within reason – as there is a file size upload limit active on the site.

Forms

Although forms are a vital asset in gaining user information, we try to not make them overly flashy or out of line with the styling of the page. Keep forms with:

  • A transparent background – preferably on a light section background
  • No more than 8-10 fields unless specifically required to do more
  • An included Data Privacy statement
  • A teal call to action with a simple proposition – submit, download, get [item] etc.

Video Requirements

Please keep public videos hosted on the Colt YouTube account.

Call to Actions / Buttons

Call to Action buttons should be kept in a consistent styling of a solid colour block and short text.

Colt-Button-1
Colt-Button-4
Colt-Button-3
Colt-Button-2

The following colours can be used to create a visual prioritisation of button hierarchy:

Red – Sales-Orientated Action / Priority #1 – Only have one of these per page.

Teal – Content-Driven (Secondary) Action / Priority #2 – Generally use these to link to content or more information pages

Grey / Dark Grey – Tertiary Action / Priority #3 Used in side-by-side with a Priority #1 CTA to prevent colour clash

White – Non Revenue Driving Links / Priority #4 – Can use these for outward links, or low-priority links

Icons

Technical icons used to describe Product-Centric items should be used as Teal outlines with no background colour. Examples in Icon section.

Non-Technical icons used to describe anything else, such as Social Icons, should be used as solid Teal colour blocks. Examples below:

Icons

Video Guidelines

The Colt video guidelines are to enable our internal and external stakeholders to express our company brand and values in a consistent way.

At the start of the video our Colt logo should be placed on a plain white, black or teal background as per our Colt brand book guidelines. This should then fade into an optional title screen for the video using our Colt font Gotham, where Gotham is unavailable you may use Arial.

Logo

Our logo is our most important brand element so we are very careful with how we use it. Our logo can be positioned - ranged far left, ranged far right, and at the top or the bottom of the screen. We recommend the ranged left logo is used digitally and remains on-screen throughout video. The logo should only ever be one full colour; white, black or teal. The logo should never be stretched or distorted and must retain an exclusion zone around it. We use the ‘o’ in our logo to help us determine the size of the exclusion zone (see brand book for more details).

Imagery

Videos should use real people talking to off-camera in colour. This should be done against a real or photograph background or a plain white background. If imagery is required, as per our imagery guidelines, photography and / or icons should be used. Photography must always reflect our Colt brand book where possible; what we do, where we do it, who for/us. Headings can be placed over video as long as they are clear and easy to read – Ideally in the Colt font Gotham / Arial.

Icons

Our icons are one-dimensional representations of concepts. You can use any of the colours from the Colt brand book where appropriate and use any icons from the icon library.

Text

Text should be in Gotham bold for headings and Gotham medium for body copy. If these fonts are not available then Arial can be used. Text should be black on white backgrounds or white on Colt colour backgrounds.

Call-out boxes

If call-out boxes are being used, they should be a single block Colt colour with no gradients, shadows or textures. For customer references a call-out box should show with ‘Customer case study’ in white on a Colt colour background with another call-out box directly underneath with the customer name.

Concluding a video

We should display our Colt logo or Colt IQ Network logo (where appropriate) on a plain white, black or teal background with www.colt.net underneath in our Colt font Gotham / Arial.