Colour
These are the approved colours for use on web sites and applications at the University of St Andrews.
Usage
If importing the University of St Andrews pattern library into your own project then it is recommended that you use the token names rather than specific colour values. For example, use $sta-blue
rather than rgb(0, 83, 155)
or #00539b
. These are available as Sass variables and ensures your project is using the latest colours whenever you update the pattern library version.
Colour contrast
You must make sure that the contrast ratio of text and interactive elements in your web site or application meets level AA of the Web Content Accessibility Guidelines (WCAG 2.1).
Contrast is also important for adjoining colours and can greatly influence how designs are perceived. Low contrasting colours can provide subtle depth to a design wheras high contasting colours are better for distinguishing between elements, such as a data chart.
Main colours
The following list of colours are grouped into typical use cases.
Brand
These are the primary brand colours for the University of St Andrews.
Blue
- Token name
$sta-blue
- RGB colour
rgb(0, 83, 155)
- Hex colour
#00539b
Red
- Token name
$sta-red
- RGB colour
rgb(234, 26, 19)
- Hex colour
#ea1a13
Text
These should be used when on light colour backgrounds.
Dark grey
- Token name
$sta-grey-dark
- RGB colour
rgb(32, 32, 36)
- Hex colour
#202024
Grey
- Token name
$sta-grey
- RGB colour
rgb(106, 106, 107)
- Hex colour
#6a6a6b
Links
These should be applied to primary interactive elements such as links and buttons.
Light blue
- Token name
$sta-blue-light
- RGB colour
rgb(0, 113, 179)
- Hex colour
#0071b3
Highlight orange
- Token name
$sta-orange-highlight
- RGB colour
rgb(255, 180, 0)
- Hex colour
#ffb400
Secondary
These can be used for borders and backgrounds.
Mid grey
- Token name
$sta-grey-mid
- RGB colour
rgb(148, 148, 148)
- Hex colour
#949494
Mid grey alternate
- Token name
$sta-grey-mid2
- RGB colour
rgb(222,222,222)
- Hex colour
#dedede
Light grey
- Token name
$sta-grey-light
- RGB colour
rgb(240,240,240)
- Hex colour
#f0f0f0
Light grey alternate
- Token name
$sta-grey-light2
- RGB colour
rgb(250, 250, 250)
- Hex colour
#fafafa
Lightest blue
- Token name
$sta-blue-light-tint90
- RGB colour
rgb(230, 241, 247)
- Hex colour
#0071b3
Theming
These additional colours can be used alongside the brand colours.
Alternate palettes
Alternate colour palettes can be used for graphs and visualisations or to create a different theme that still visually aligns with the University's existing brand.
Green
- Token name
$sta-green
- RGB colour
rgb(0, 133, 63)
- Hex colour
#00853f
Purple
- Token name
$sta-purple
- RGB colour
rgb(123, 67, 154)
- Hex colour
#7b439a
Burgundy
- Token name
$sta-burgundy
- RGB colour
rgb(198, 12, 70)
- Hex colour
#c60c46
Contextual
Colour should never be solely used to provide meaning as this is not accessible to all users. These colours should only be used for buttons, alerts, and text banners where colour is used to assist meaning.
Green
- Token name
$sta-green
- RGB colour
rgb(0, 133, 63)
- Hex colour
#00853f
Blue
- Token name
$sta-blue
- RGB colour
rgb(0, 83, 155)
- Hex colour
#00539b
Orange
- Token name
$sta-orange
- RGB colour
rgb(191, 89, 9)
- Hex colour
#bf5909
Red
- Token name
$sta-red
- RGB colour
rgb(234, 26, 19)
- Hex colour
#ea1a13
Tints and shades
Lighter and darker versions of these approved colours can also be used to add depth to a design and distinguish interactive states, while ensuring accessiblity standards are met. The pattern library provides Saas functions for shade($color, $percentage)
and tint($color, $percentage)
, which add specific amounts of black or white to an existing colour respectively. Values of 25% tint, 50% tint and 25% shade are good starting points and token names are included in the pattern library for these.
Tint and shade tokens
The following tokens are available as Sass variables within the pattern library.
$sta-blue-tint25
$sta-blue-tint50
$sta-blue-shade25
$sta-blue-light-tint25
$sta-blue-light-tint50
$sta-blue-light-shade25
$sta-red-tint25
$sta-red-tint50
$sta-red-shade25
$sta-green-tint25
$sta-green-tint50
$sta-green-shade25
$sta-purple-tint25
$sta-purple-tint50
$sta-purple-shade25
$sta-burgundy-tint25
$sta-burgundy-tint50
$sta-burgundy-shade25