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

The University of St Andrews brand blue.
Token name
$sta-blue
RGB colour
rgb(0, 83, 155)
Hex colour
#00539b

Red

The University of St Andrews brand 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

Main colour used for text.
Token name
$sta-grey-dark
RGB colour
rgb(32, 32, 36)
Hex colour
#202024

Grey

Lower emphasis text.
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

Main colour used for links and interactive elements such as buttons.
Token name
$sta-blue-light
RGB colour
rgb(0, 113, 179)
Hex colour
#0071b3

Highlight orange

Use only to signify focus on an element.
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

Default border colour for interactive UI elements.
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

90% tint of light 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

For success or positive context.
Token name
$sta-green
RGB colour
rgb(0, 133, 63)
Hex colour
#00853f

Blue

For informative or neutral context.
Token name
$sta-blue
RGB colour
rgb(0, 83, 155)
Hex colour
#00539b

Orange

For warning context.
Token name
$sta-orange
RGB colour
rgb(191, 89, 9)
Hex colour
#bf5909

Red

For error or danger context.
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.

50% tint
25% tint
0 sta-blue
25% shade

Colour chart for Blue ($sta-blue) showing tint and shades with suggested percentages highlighted.

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