- Logo
- Colours
- Contrasting colours
- Hover states
- Font
- Headings
- Paragraph
- Blockquote
- Unordered list
- Ordered list
- Forms
- Tables
- Text elements
- Icons
- Loading icon
- Images
Logo
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.
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:60R: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:27R: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.
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:0R: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:27R: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:0R: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.
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
Font
We use two web fonts - 'ClanProBold", sans-serif' for headings and Roboto for everything else.
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
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.
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.
Unordered List
- List item 1
- List item 1
- List item 1
- List item 2
- List item 2
- List item 1
- List item 2
Ordered List
- List item 1
- List item 1
- List item 2
- List item 1
- List item 2
- List item 2
Tables
thead th | thead th | thead th |
---|---|---|
tbody td | tbody td | tbody td |
tbody td | tbody td | tbody td |
tbody td | tbody td | tbody td |
tfoot th | tfoot th | tfoot th |
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
exampleinside
a q element
The s element example
The span element example
The strong element example
The sub element example
The sup element example
The u element example
Usage:
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%.