Digital pattern library

Primary palette

This is the primary palette that is to be used on any new development for the University website.

  • Primary - used for navigation bars, calls to action.
  • Secondary - used for secondary navigation bar.
  • Tertiary - used, usually all together, to add style and differentiate between items in a set (for example, tile grid).

Primary (blue)

Base
Selected
Transparent
Base hover
Selected hover
Transparent hover

Secondary (light blue)

Base
Selected
Transparent
Base hover
Selected hover
Transparent hover

Tertiary 1 (green)

Base
Selected
Transparent
Base hover
Selected hover
Transparent hover

Tertiary 2 (burgundy)

Base
Selected
Transparent
Base hover
Selected hover
Transparent hover

Tertiary 3 (purple)

Base
Selected
Transparent
Base hover
Selected hover
Transparent hover

Bootstrap contexts

These colours should only be used for buttons, alerts, and text banners.

Success (green)

Base
Selected
Transparent
Base hover
Selected hover
Transparent hover

Info (light blue)

Base
Selected
Transparent
Base hover
Selected hover
Transparent hover

Warning (orange)

Base
Selected
Transparent
Base hover
Selected hover
Transparent hover

Danger (red)

Base
Selected
Transparent
Base hover
Selected hover
Transparent hover