Skip to content

Our Brand

Web/UX Guide

HomeBrand 2020 – Web Guidelines

At Colt, our digital presence matters. From our corporate website, to Colt Online, to our careers site and more, we must be consistent. These guidelines will help you align to our brand identity for a consistent user experience. 

Whilst we encourage creativity, we expect that any user should understand that this is a Colt site, without having to rely on logos or explanatory text. 

If you’re not sure or have any questions, you can always get in touch with us directly, by contacting Laura Perrott, Global Director of Digital & Brand, or Will Woodham, Digital Marketing Specialist.

Site Identity

To maintain a consistent site identity, we recommend using the Colt preferred Favicon. This is in all possible instances the full Colt logo, with the full word visible at all times. Please refer to the Logos section of the full brand guidelines for instructions on how to use this. This also applies to applications deployed to the Google Play / iOS App Store.

The only instance where a different logo may be used is where the icon to be displayed is simply too small to display the full Colt logo clearly. An example of this is displayed on the Colt.net corporate site. In this instance, please use the Colt "C" in white on a teal background. This file can be found here.

Web Experience

Overall web experience covers a wide range of factors, but we’ve broken this down into Ease of Use, Tone of Voice & Consistency. 

Ease of Use

We want to make using Colt digital systems and websites as easy and as clear as possible. We want to make complex tasks simple for the user. 

Ease of navigating the site is key to creating a good user experience. 

Menu navigation should be as descriptive and direct as possible, to help users get to their desired destination as simply as possible. Please attempt to use language in navigation systems that those outside of the Colt ecosystem can understand. This can mean that navigation can drop to two levels, or even a flyout menu, but this prevents multiple steps in what could be a simple journey. More information on menu navigation can be found in the Menus & Navigation section below. 

Internal backlinking is also equally essential to improving ease of accessing a site. Internal links tend to be used more frequently than a menu if the links are relevant to the topic presented. When a new page is created on a site, please link to this page from existing pages to help usability. From a technical perspective, this process is also highly beneficial for search engine optimisation. 

Tone of Voice

Tone of Voice is as important on web pages as it is on printed or sales collateral.  We are personal, confident & distinctive. More information on this can be found in our general Tone of Voice section of our Brand Asset Files. 

Something that is important to add to this for a web experience is clear and concise. 

Some terminologies or product features can be technical and can take a long time to explain. Because the average web user doesn't spend a lot of time evaluating a page before making a decision (often under half a second), we need to present what we say in a way that is easy to scan and understand (this is especially important in descriptive guides or customer support). You can then provide a link to find out more detail. An example of this is below: 

Consistency

While promoting consistency 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.

Creating consistency online is achieved through:

  • A consistent visual theme running through all Colt sites
  • The use of a consistent style of headers & footers
  • A consistent tone of voice

Colours

Colours will be used in the same way as described in the general Brand Guidelines for Colours. However, there are some distinctions specifically for the web. 

When looking at our brand colours for web, they are broken down into background colours, text colours, icon colours, overlay colours, call to action colours & separator colours.

Background colours

These are the only colours to be used as background colours for pages or blocks:

White

Pantone -
CMYK 0 0 0 0
RGB 255 255 255
HEX #000000

Teal (Blocks Only)

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

Light Grey

CMYK 0 0 0 0.0275
RGB 248 248 248
HEX #F8F8F8

Text colours

The only colours needing to be used for are white and black for text and teal for headings.

White

Pantone -
CMYK 0 0 0 0
RGB 255 255 255
HEX #000000

Black

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

Teal (Headings only)

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

Icon colours

Icons on our sites should be any of the following combinations:

No background,
teal icon

Teal background,
white icon

Overlay colours

When using an image as a background, please always use a black overlay, with 50% transparency.

Example

Call to action colours

Calls to action are marked by a hierarchy of importance. Calls to action which result in a contacting sales person are most usually marked as a Tier 1. Calls to action which result in a standard action such as a content download are most usually marked as Tier 2. Calls to action which are noted as 'secondary' or are placed alongside a Tier 1 or 2 call to action are noted as Tier 3 or 4.

Tier 1 CTA Background

Red

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

Tier 1 CTA Hover

Dark Red

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

Tier 1 CTA Text

White

CMYK 0 0 0 0
RGB 255 255 255
HEX FF FF FF

Tier 2 CTA Background

Teal

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

Tier 2 CTA Hover

Dark Teal

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

Tier 2 CTA Text

White

CMYK 0 0 0 0
RGB 255 255 255
HEX FF FF FF

Tier 2 Alt. CTA Background

Blue

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

Tier 2 Alt. CTA Hover

Dark Blue

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

Tier 2 CTA Text

White

CMYK 0 0 0 0
RGB 255 255 255
HEX FF FF FF

Tier 3 CTA Background

White

CMYK 0 0 0 0
RGB 255 255 255
HEX FF FF FF

Tier 3 Border Colour

Teal

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

Tier 3 CTA Text

Teal

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

Tier 3 Alt. CTA Background

Grey

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

Tier 3 Alt. Hover

Dark Grey

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

Tier 3 CTA Text

White

CMYK 0 0 0 0
RGB 255 255 255
HEX FF FF FF

Backgrounds & themes

When creating a website theme or the background of an entire page, please always use the default Colt background colours of white or light grey. We have been making steps to move away from dark backgrounds, and a light background always ensures text is easy to read and clear on various devices and screen sizes. This is similar for menus and navigation. 

Leave the bright colours for either our calls to action or for images/diagrams. This ensures that this information is always front and centre. 

We encourage the use of imagery and colour for the backgrounds of certain blocks, but these should not be of significant height, and should be bordered above and below with a white or light grey block, to prevent an overwhelming colour scheme. 

Headers & footers

Our headers and footers will frame every page that is used on the web, across all devices. They are the most viewed item on any website and are among the very first visual indicators of the Colt brand that a first-time user will recognise.

Our approach to headers and footers is like our approach to backgrounds. Keep them clean and unintrusive, and save the bright and noticeable information for the page itself.

Headers

The Colt header is indicative of Colt's approach to delivering digital information. This means that the header is:

  1. Clean and unintrusive - The header does not distract from the content of the page, and is not clutters with excessive 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.
  2. On brand - As mentioned above, save the heavier colours for the focus of the page, your content.

It is allowed to have multiple headers, for example on the Colt.net site. Here there are three headers, a 'sales bar' at the top, the Colt logo & search bar, and the main menu navigation. While multiple levels are allowed, ensure that this header never takes up more than 25% of a standard screen height when loading a page.

Colt Header

Footers

We want to take the same approach to our footers as our headers. Footers are a great place to include important links that are not relevant to the main menu navigation, such as Legal Information, Data Privacy Statements etc. as well as one last call to action in the form of a contact opportunity.

For the Colt.net site, as an example, there are two footers in use at one time. The first one, our Contact Us footer, gives options to reach out to relevant people. This is always encouraged to have, whether it be for customer support, or applying for a job. If this page already has a prominent way to contact someone, this footer can be removed from the page.

Footer 1

Footers should be similar to your header and should be either white or light grey. If you have multiple sections within a footer, separate them with 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, make sure the footer is positioned closely to the site content so the colour blends in. This way footers do not distract from page content or appear as jarring blocks. 

Footer 2

Our navigation takes the same approach given in our web experience section above. We aim to make moving throughout the site as simple and as intuitive as possible.

With the right page structure and relevant links on page, for an average user, using the main navigation should not be necessary. However everyone browses a site differently and it is important we highlight the areas of importance clearly and concisely.

A menu on a Colt website should be:

  • Prioritised by importance - We display all items that are the most important to the user, and to Colt. In the example of the Colt.net site, Products (what we do), Propositions (what we add), and 'Why Colt' (why choose us to do it) are the three main things we want to get across to a user, in that order. This approach can be taken across all other implementations
  • As direct as possible without sacrificing clarity - Try to get users to where they need to go in as few clicks as possible. However if your page structure dictates a user has to go more than three links deep, take them as close as possible. (An example of this is Colt.net's site going from the home page to White Label Solutions. Going from Home -> Products & Services -> Voice -> Service Provider Solutions -> White Label Solutions is too long of a step to put on a menu, so we simply take them to Service Provider Solutions and let them continue from there. Never go more than three steps in a menu item.
  • Responsive - Menus should fold into a hamburger icon and flyout menu when put in a mobile screen. This encourages ease of use and is a best practice across our sites. A hamburger icon is universally recognised as a menu for mobile now without needing to state 'menu'.
Menu Mobile

Text & fonts

We keep a consistent typography across all Colt tools and systems.  

For more information on our typography including our use of sentence casing, punctuation and suggested font pairings, please refer to the Typography section of the generic brand guidelines. 

Gotham is our primary font, we use this for everything. Gotham is available for download from our files below:

[wpmedia_list folder="Fonts" thumbnails="true"]

Headings

We regularly use <heading> tags to signify sections and distinguish elements of text. Below you can find a guideline on how to create consistent headings.

Heading 1

H1 Font Size: 42px

H1 Line Height: 1.25

H1 Letter Spacing: 0

Heading 2

H2 Font Size: 32px

H2 Line Height: 1.25

H2 Letter Spacing: 0

Heading 3

H3 Font Size: 26px

H3 Line Height: 1.25

H3 Letter Spacing: 0

Heading 4

H4 Font Size: 20px

H4 Line Height: 1.25

H4 Letter Spacing: 0

Heading 5

H4 Font Size: 16px

H4 Line Height: 1.25

H4 Letter Spacing: 0

Heading 6

H4 Font Size: 14px

H4 Line Height: 1.25

H4 Letter Spacing: 0

As a note, heading tags can be used in either 'Medium' or 'Normal' font weight.

If your website is public facing and listed on search engines such as Google & Bing, please be aware that one of the most important aspects in a search engine ranking position is heading tags. If your heading tags are not relevant to the focus of the page, this can have a negative impact on the page's organic strength.

If your heading tags are not relevant to the focus, you can recreate the text using the font styles listed above without needing to use an <h> tag.

Buttons & Calls to Action

Information regarding the colouring schemes of calls to action is referenced above in the 'Colours' section of this page. It is important to stick to our main brand colours for this, and creating a hierarchy of importance is proven to improve user engagement to the areas you want.

For our buttons and calls to action, our rule is that we always have a border radius of 0, and do not use a drop shadow. Our buttons tend to have a hover state, changing to a slightly darker colour when in this state. Examples are below:

If you are to use a scrolling call to action bar, buttons should be full width with no gaps, and either a colour or line to distinguish between them. Examples are below:

or:

Photography

We use a wide range of photography across our Colt systems, and use a variety of photos and diagrams to portray our message. As a general rule, we do not use illustrations from third parties, and will only use non-photography if it is a diagram used for descriptive purposes.

Images to be used on websites should always be over 720x450px, as this ensures that we never use blurry imagery. Please use .png files over .jpeg for image compression and scaling efficiency.

As a rule of thumb for our photographs, our style is as follows:

  • Feels natural, not staged
  • Natural lighting
  • If involving people, depict a real life interaction between people and technology
  • Images should not include lens blur or filters
  • Subjects are not looking directly at the camera

Our photography guide can be categorised into three key themes, what we do, where we do it and who we are. Some examples of each of these three are shown below:

AP195569-1-720x450

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.

Viewpoint from directly above.
Roof of building.

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

DSC05964

Who we are

Smartly dressed office professionals, preferably from a tech environment.

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 icons when shown together, and use a consistent clear space around each icon.

Please don't edit or alter the icons provided, overlap icons with text, or over-use icons in a single context or area.

If you need more details of icon colours and styling, refer to the 'Colours' section of this document.

Examples below of icons consistent with brand guidelines:

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.

Responsive design

As a technology company, we want people to see us as modern, reliable and consistent. To this end, we need to reflect this in the way our websites work. In increasingly vital aspect of web design is creating responsive layouts that are effective and compelling whether viewed on a tablet, phone or laptop of any size.

Be aware that different screen sizes will re-order how you intend to lay out a page, and most website builders now do this as a default. Cross browser testing and fixes are an essential long before a potential launch date.

Responsive menu design has been covered above in the 'menus and navigation' section above.

Always ensure that if a function or web design does not work as expected on mobile devices or other screens, do not show it at all. Better to have less visible functionality of a high quality than lots of poor quality content.

When making edits to padding and margins, you can anticipate this by using em spacing instead of px. This ensures that your style will scale by size of displayed screen.

If you have any questions about these guidelines, would like some advice on a Colt site, please reach out to the Brand & Digital team, and we will always be happy to help.