Style guidelines

Logo

The main logo which sits at the top left of every page. It had its dimensions changed slightly by Headscape to 150 x 150.

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.

Back to top

Colours

We have a palette of five colours that can be used on digital media.

Primary blue: Pantone 289

C:100, M:64, Y:0, K:60
R:0, G:43, B:92
#002b5c

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

C:100, M:16, Y:0, K:27
R:0, G:120, B:174
#0078AE

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.

Back to top

Contrasting colours

Red, green and orange are contrasting colours compared to the primary blue. These colours should be used sparing as not to dilute the brand.

Red: Pantone 485

C:0, M:95, Y:100, K:0
R:238, G:50, B:36
#ee3224

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

C:56, M:0, Y:100, K:27
R:93, G:151, B:50
#5D9732

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

C:0, M:64, Y:100, K:0
R:244, G:123, B:32
#F47B20

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 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 and the related text will change to orange.
  • When hovering over an orange block the the background should change to the darker shade of orange
  • For functional links (eg 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

Back to top

Font

We use one web font -  Alegreya Sans (Google font)

36. the quick brown fox jumps over the lazy dog
36. THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG

24. the quick brown fox jumps over the lazy dog
24. THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG

16 the quick brown fox jumps over the lazy dog
16. THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG

Back to top

Headings

H1 heading

H2 heading

H3 heading

H4 heading

H5 heading
H6 heading

Headings have to be listed semantically within a section of the page and run in sequence.

Back to top

Paragraph

Below is an example of how a paragraph should look.

Suspendisse elementum mi nec fermentum rhoncus. Vestibulum venenatis semper metus, sit amet feugiat neque blandit at. Donec at ultricies turpis, ac fringilla arcu. Duis tempus turpis eget sagittis ultricies. Nullam in dui vel ipsum luctus hendrerit sed eget dolor. Morbi vulputate, dui id commodo ultricies, diam mi consectetur dui, a egestas quam nisl id odio. Praesent mattis felis et rutrum tincidunt. Donec a lacus quis nulla pellentesque hendrerit ut ut quam. Suspendisse potenti. Aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pellentesque vel sem porttitor egestas.

Block Quote

This is a block quote.

Back to top

Unordered List

  • List item 1
    • List item 1
      • List item 1
      • List item 2
    • List item 2
  • List item 2

Ordered List

  1. List item 1
    1. List item 1
    2. List item 2
      1. List item 1
      2. List item 2
  2. List item 2

Back to top

Forms

button:

checkbox:

password:

radio:

search:

tel:

url:

color:

date:

date:

datetime-local:

email:

month:

number:

range:

time:

week:

textarea:

Back to top

Tables

Table Caption
thead ththead ththead th
tbody td tbody td tbody td
tbody td tbody td tbody td
tbody td tbody td tbody td
tfoot thtfoot thtfoot th

Back to top

Text elements

Examples

The a element example

The abbr element and an abbr element with title examples

The b element example

The code element example

The del element example

The q element example

The q element inside a q element example

The s element example

The span element example

The strong element example

The sub element example

The sup element example

The u element example

Back to top

Icons

Usage: Search

Usage: Filter/funnel

Usage: Expand

Usage: Colapse

Usage: Phone

Usage: Email address

Usage: Postal address

Usage: Facebook

Usage: Flickr

Usage: Twitter

Usage: YouTube

Loading icon

 

Usage:

Back to top

Images

dpi: 150

type: .jpg, .png, .svg (no .gif)

In most cases, images are set to 100% of their container. In HTML boxes they're set to auto width, which means they'll take their original size. However, to reduce the chance of breaking out of it's container, images have a maximum width of 100%.

Images sizes as they appear

150x150

360x180

Temporary placeholder image

500x500

Temporary placeholder image

600x300

Temporary placeholder image

1600x600

Placeholder Banner

Back to top