There's no variation on the logo used on digital media. The tabbed primary blue is the only logo used (above). It's 150x150 pixels in size.

Primary blue: Pantone 289

This colour signifies the corporate brand. When used it gives a relationship to the logo and brings together the idea of ‘One Strathclyde’, as the corporate colour is a constant throughout the site.

Using this colour heavily on every page gives a consistency to the site. Allowing a splash of the colour enables important areas to be highlighted on a page.

The other colours that can be used are blue, red, orange and green. They're used to help guide the user’s eye and give colour a meaning on a page by page basis. This reduces the effort the user has to make to interact with the site. The colours are not used to brand faculty pages.

Having only one brand throughout the site helps to familiarise users so after the first or second page the user has acclimatised to the site and can enjoy their experience. When two (or more) competing brands are represented on a site the user has to keep reorienting themselves. This can be distracting and uncomfortable resulting in them to stopping and going elsewhere.

Blue: Pantone 307

Blue is seen as a neutral colour and complementary to the primary blue of the corporate brand. Using this blue for related or supplementary content is advised.

Red: Pantone 485

Red should be used sparingly. When used too much it can cause a strobing effect on some devices. Also, it's a common colour affected by colour blindness so it's important that the colour is not given too much importance.

There are also meanings attached to red that can be seen as negative. Red is a predominate colour with preconceived connotations. In western society red is often used for danger or sales but in China can mean wealth or money. Users can be put off due the impression the colour gives them. It's better to use colours sparingly for emphasis rather than for meaning.

Green: Pantone 370

Universally, green is a colour that means go (as in traffic lights). Therefore, calls to actions are often coloured green. Green should be used sparingly as to not dilute the impact of these calls to actions.

Green is another colour that is affected by colour blindness.

Orange: Pantone 166

Orange is a warm colour and like green has a universality. Orange is used throughout the site to highlight important pieces of information eg bullet points, apply buttons etc. It should be used sparingly as to not detract the user’s attention from important information.

Orange is also used heavily across the site for hover states, so caution has to be taken so as not to overwhelm the user with over use of the colour.

Back to top

Hover states

The hover colour used for a hover state is a 10% darker shade of the corporate orange.

C:11, M:70, Y:100, K:2
R:214, G:98, B:11
#D6620B

All hover states have strict rules:

• content links should be blue with an underline and change to orange with no underline
• on block links the background should change to orange and the text to white
• on complex block links (blocks with headings, text and/or images) the background of the heading block should change. If the heading has a separate background colour, its background will change to orange with white text and the related text will change to orange.
• when hovering over an orange block the background should change to the darker shade of orange
• for functional links (for example, tabs) that keep the user on the same page the background should be made 10% darker of its current colour
• buttons should be green and turn orange with white text on hover