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.
Accessibility - alt text
Alternative text is used in place of images, describing what they are. Screen readers can read the text out loud. If an image doesn't load, the alt text will appear.
Here are a few quick pointers on alt text for the Colt brand:
- In general logos are there as visual brand signposts. “Alt Text” should do the same and just say the name of the brand.
Never use words like “image” or “logo” as the screen reader will already announce this - When naming logos like the Colt IQ Network, make sure the “I” and “Q” are separated. This makes sure they're pronounced separately by the assistive technology
- Stream graphics are not considered core content, so should be left with an empty alt attribute “” in web pages
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.
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
Background colours for individual blocks
To create variance, or to highlight a specific section of the page, you can use a number of our brand colours. It should be noted to always maintain a high level of colour contrast between the background colour and the text used.
Colt Pink
Pantone 2040
CMYK 0 95 45 0
RGB 239 71 111
HEX #EF476F
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 Blue
Pantone 2727
CMYK 85 24 0 0
RGB 0 153 255
HEX #0099FF
Text colours
The only colours needed for body text are black, if using a light background, or white if using a dark background. When using headings, you may use Colt Charcoal, Black, White or Colt Teal. Please keep in mind when using the Colt Teal that your heading is bold enough to be easily legible and accessible.
Black
(Body text)
Pantone n/a
CMYK 0 0 0 100
RGB 0 0 0
HEX #000000
White
(Body Alt)
Pantone -
CMYK 0 0 0 0
RGB 255 255 255
HEX #ffffff
Colt Teal
(H1 only)
Pantone 3265
CMYK 70 0 40 0
RGB 0 215 189
HEX #00D7BD
Colt Charcoal
(Headings)
Pantone 432
CMYK 15 15 15 75
RGB 72 74 71
HEX #484A47
Link colours
When creating links, it is preferred to use our Colt Purple. White can also be used where a higher contrast is required.
Colt Purple
(Default)
Pantone 2607
CMYK 83 99 0 2
RGB 80 0 145
HEX #50009B
Colt Purple Alt
(Hover)
HEX #3B0A6B
White
(Alternative)
Pantone -
CMYK 0 0 0 0
RGB 255 255 255
HEX #ffffff
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
CMYK 85 0 11 37
RGB 24 160 142
Colt Dusk
Alternative
HEX #107C74
CMYK 87 0 6 51
RGB 16 124 116
Colt Blue
Alternative
HEX #1175BC
CMYK 90 37 0 26
RGB 17 117 188
Colt Purple
Alternative
HEX #3B0A6B
CMYK 45 91 0 58
RGB 59 10 107
Colt Yellow
Alternative
HEX #EBA427
CMYK 0 30 83 8
RGB 235 164 39
Colt Pink
Alternative
HEX #D41944
CMYK 0 88 68 17
RGB 212 25 68
Colt Charcoal
Alternative
HEX #383838
CMYK 0 0 0 78
RGB 56 56 56
Typography
Font
Montserrat is our primary webfont, and is to be used wherever possible in web applications. Gotham is not to be used for web applications. Montserrat is available as a free, open-sourced license owned by Google Fonts. For Japanese font alternatives, please use Meiryo UI.
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.
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: 56px
Line height: 1.25
Letter spacing: 0
Weight: Bold
This is a example of an H2 with default weight.
Header layout: <h2>
Size: 46px
Line height: 1.25
Letter spacing: 0
Weight: Bold
This is a example of an H3 with default weight.
Header layout: <h3>
Size: 36px
Line height: 1.25
Letter spacing: 0
Weight: Bold
This is a example of an H4 with default weight.
Header layout: <h4>
Size: 24px
Line height: 1.25
Letter spacing: 0
Weight: Medium
This is a example of an H5 with default weight.
Header layout: <h5>
Size: 22px
Line height: 1.25
Letter spacing: 0
Weight: Medium
This is a example of an H6 with default weight.
Header layout: <h5>
Size: 22px
Line height: 1.25
Letter spacing: 0
Weight: Light
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, 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 White background, and no border - with an icon the same colour as the text. Keep it simple.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi non suscipit mi. Ut sed tincidunt mauris, sit amet convallis arcu. Nullam quis feugiat diam, eu vehicula urna. Donec risus erat, dapibus eget varius ac, tincidunt vitae lacus. Maecenas ac erat sollicitudin, congue orci dignissim, vestibulum risus. Praesent nec interdum quam. In massa ante, euismod ornare magna a, rutrum ornare odio. Vestibulum a finibus sapien. Fusce sed fringilla ipsum. Donec fringilla, sem vel euismod fringilla, ligula leo commodo leo, nec consequat ex est vel nibh. Nam magna libero, maximus non magna ut, porttitor laoreet ipsum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi non suscipit mi. Ut sed tincidunt mauris, sit amet convallis arcu. Nullam quis feugiat diam, eu vehicula urna. Donec risus erat, dapibus eget varius ac, tincidunt vitae lacus. Maecenas ac erat sollicitudin, congue orci dignissim, vestibulum risus. Praesent nec interdum quam. In massa ante, euismod ornare magna a, rutrum ornare odio. Vestibulum a finibus sapien. Fusce sed fringilla ipsum. Donec fringilla, sem vel euismod fringilla, ligula leo commodo leo, nec consequat ex est vel nibh. Nam magna libero, maximus non magna ut, porttitor laoreet ipsum.
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 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 Montserrat, 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.
Hover states
It is advised when creating buttons to have them implement a hover state. When using the default 'full colour' call to actions, we indicate a hover state by using the alternative, darker, version of our branded colour, as below:
If using the alternative layouts, we indicate a hover state by 'filling in' the background colour, as below:
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:
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 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'.
Headers
The Colt header is indicative of Colt's approach to delivering digital information. This means that the header is:
- 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.
-
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.
