Brand 2020 – Web Guidelines

HomeOur brandBrand 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 Colt teal background. This file can be found here.

Web experience

Overall web experience covers a wide range of factors. Below, we break down our three key pillars: 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

Our brand influences everything we do, and that includes the way we speak and write.

We all need to write in a way that's friendly, knowledgeable and brave.

And just as we all use our visual brand identity, we all need to speak with the same tone of voice.

That means you.

We all write for Colt - including agencies. Whether you're writing an internal email to your team, a proposal, a big customer presentation, content for Colt Online or a customer email. It all shapes the way we come across.

Find out more...

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

Our primary brand colours are Colt teal, white and black. These are the colours to use for the majority of our brand material. These are the only colours that should be used when creating themes, templates, and event collateral unless pre-approved by a member of the brand team.

Background colours

These are the only colours that should be used for solid colour backgrounds.

White

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

Colt Ash

Pantone n/a
CMYK 0 0 0 5
RGB 245 245 245
HEX #F5F5F5

Colt Teal (Block only)

Pantone 3265
CMYK 70 0 40 0
RGB 0 215 189
HEX #00D7BD

Text colours

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

Black

Pantone n/a
CMYK 0 0 0 100
RGB 0 0 0
HEX #000000

White

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

Colt Teal (Heading only)

Pantone 3265
CMYK 70 0 40 0
RGB 0 215 189
HEX #00D7BD

Secondary colours

Our supporting colour palette is for use in the stream graphic (as detailed in the next section), text, tables, diagrams, charts, and other information design.

Colt Blue

Pantone 2727
CMYK 85 24 0 0
RGB 0 153 255
HEX #0099FF

Colt Purple

Pantone 2607
CMYK 83 99 0 2
RGB 80 0 145
HEX #50009B

Colt Yellow

Pantone 2607
CMYK 0 24 100 0
RGB 255 196 61
HEX #FFC43D

Colt Pink

Pantone 2040
CMYK 0 95 45 0
RGB 239 71 111
HEX #EF476F

Colt Dusk

Pantone 3272
CMYK 94 0 48 0
RGB 0 165 155
HEX #00A59B

Colt Ash

Pantone n/a
CMYK 0 0 0 5
RGB 245 245 245
HEX #F5F5F5

Colt Charcoal

Pantone 432
CMYK 15 15 15 75
RGB 72 74 71
HEX #484A47

Black

Pantone n/a
CMYK 0 0 0 100
RGB 0 0 0
HEX #000000

Supporting hover-states

In some instances, the Colt primary and secondary colours may be too bright for easy legibility, or you simply may need an alternate colour to be used as a hover-state. In this case, you may use the colours below.

Please note not to use these colours in place of secondary colours.

Colt Teal
Alternative

HEX #18A08E

Colt Dusk
Alternative

HEX #107C74

Colt Blue
Alternative

HEX #1175BC

Colt Purple
Alternative

HEX #3B0A6B

Colt Yellow
Alternative

HEX #EBA427

Colt Pink
Alternative

HEX #D41944

Colt Charcoal Alternative

HEX #383838

Typography

Font

Gotham is our primary font, to be used across all Colt communication and marketing materials.

When a system font is required – for example in email, or Powerpoint and Word documents sent to clients and partners – then Arial should be used.

Gotham is available for purchase from Typography.com. It is available for use on the web as part of the cloud typography service from Hoefler&Co.

For Japanese font alternatives, please use Meiryo UI.

Headings, primary

When using body headings, please be aware of legibility and accessibility when considering contrasts between the Colt Teal, and a white or ash background. Ensure that the heading size and weight is significant enough to be distinguishable on varying screen sizes.

This is a example of an H1 with default weight.

Header layout: <h1>
Size: 42px
Line height: 1.25
Letter spacing: 0
Weight: any

This is a example of an H2 with default weight.

Header layout: <h2>
Size: 32px
Line height: 1.25
Letter spacing: 0
Weight: any

This is a example of an H3 with default weight.

Header layout: <h3>
Size: 26px
Line height: 1.25
Letter spacing: 0
Weight: any

This is a example of an H4 with default weight.

Header layout: <h4>
Size: 20px
Line height: 1.25
Letter spacing: 0
Weight: any

This is a example of an H5 with default weight.

Header layout: <h5>
Size: 16px
Line height: 1.25
Letter spacing: 0
Weight: any

Headings, secondary

In some instances, you could have multiple instances of headings on a single page (like this one). To create a hierarchy, you can use alternative headers. These are the same sizes as the ones listed above, but are a lighter font weight (Gotham: normal), and in black.

When putting both primary and secondary headings next to each other, try to make the primary heading at least one scale up in size e.g. Primary H2, Secondary H3 etc.

Typography, additional

For more information on typography, please refer to our general guidelines.

Accordions

As we can sometimes have a lot on information on a single page, alongside important technical information. With this, it is important not to overwhelm the page with content.

We use accordions to hide information that isn't immediately required, with the example styles below:

Accordion, closed

Closed accordions use a Colt Teal heading in default weight, or a Black heading in normal weight. Accordions should use a Colt Ash background, and a solid 1px border using a Grey of #e0e0e0.

Accordion, open

Open accordions use the same colour content backgrounds as their header counterparts. They use the same border width as the header, to the left, right and bottom.

This is some example content that is in a simple accordion.

Example body copy here: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Buttons & CTAs

Buttons can be styled using the below branded colours. It is important to understand the dimensional, spacing & colouring elements when creating a button.

Structure

Buttons are always created with a border radius of 0. Please do not create rounded edge, or 'pill' shaped buttons. The text placed in a button uses Gotham, as in line with standard typography rules. Text is created, on average, 1px larger than the copy text accompanying it (this doesn't include headings) e.g. if text copy is 15px, button text size is 16px.

When creating spacing within buttons, it is recommended to create a 10px padding on both top and bottom, and a 25px padding on left and right. If sizing is changed due to requirements, try to keep to the 1:2.5 ratio.

Colours & hierarchy

When colouring call to actions, please only use the Colt brand colours, with full colour. Keep away from using gradients, overlays, or transparencies. Also, keep the text in the same colour to an icon (if used).

Priority #1 - High emphasis / Active intent. Used for major priority actions e.g. contact sales, raise ticket, create order etc.

Priority #2 - Medium emphasis / passive intent. Used for secondary actions e.g. download content, read more, download invoice etc.

Priority #3 - Low emphasis / low intent. Used for other tertiary actions. e.g. Go back, open in full screen etc.

Hover state

It is advised when creating buttons to have them implement a hover state. As our colours do not have a 'darker' version to sit behind, nor do we utilise box shadows, we recommend using a 'hollow-out' hover, as highlighted below:

Banners

Banners (web)

For web banners, we tend to take a clean approach, using either the Colt Teal, or White, as shown below:

When constructing banners for web with a white background, it is important to ensure that the font is heavy enough to be noticeable. In this instance, we have not used standard paragraph font, but an H4 with a default font weight. For the white header only, there is a 1px border on all sides to ensure that it doesn't blend into the page background.

Banners (application)

Applications have more need for multiple banner types, and so can use a more diverse colour palette. See examples below:

:info

:success

:error

:warning

Modals

Our modal windows are triggered by either a button, or a standard text link. Modals can be styled as the below:

Applications have more need for multiple banner types, and so can use a more diverse colour palette. See examples below:

Photography (Web)

Web specific information regarding use of photography is being updated soon. In the mean time, please refer to our general photography guidelines.

Iconography

Web specific information regarding use of iconography is being updated soon. In the mean time, please refer to our general iconography guidelines.

Menus & Navigation

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. This of course, is not as true for application development. 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 clarityTry 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'.

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. While multiple levels are allowed, ensure that this header never takes up more than 20% of a standard screen height when loading a page.

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.

If you are directing users away from the site, please keep these in the footer rather than the main nav.

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.

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.