The University of Kent website uses a range of colours, the key two of which are dark blue and dark gold.

See the guide on the University's official brand colours for more information. Web colours may vary slightly from print colours because of the varying need for readability, contrast, and page layout.

Main colours

We use the primary corporate colour set in most instances. This is dark blue (Hex #05345C) as the main corporate colour with gold (Hex #937227) as a highlight colour.

Primary (dark blue) is used for the corporate header, for buttons, and heading font colours.

Accent (gold) is used occasionally for buttons, text, and other design elements where a highlight is needed. In fact we often use a slightly lighter or darker gold to improve visibility and contrast.

We also use lighter and darker versions of gold in cases where we need better readability and contrast (for example gold text on a light background).

primary
accent
accent-light
accent-dark

Postgraduate

We switch to the postgraduate burgundy (Hex #671115) as the primary colour on the postgraduate pages.

The gold accent is still used, although there are separate background (tint) and energy colours.

pg-primary
pg-primary-tint
pg-energy

Background colours

We have a selection of soft shaded colours to provide background highlights, and colours for specific actions on buttons or highlighted text.

Primary-tint, secondary, and tertiary are used in various places for background colour.

We also use other variants for design effect: light blue (Hex #5973aa) and energy blue (Hex #168097).

primary-tint
secondary
tertiary

Button colours

Buttons mostly use the primary colour, but also use a bolder hero-button colour for more prominent buttons, and a secondary-button grey colour for less prominent buttons.

primary
hero-button
secondary-button

Miscellaneous colours

  • Success green (Hex #5cb85c)
  • Warning yellow (Hex #bcaa12)
  • Danger red (Hex #d9534f)
  • Dark grey body font colour (Hex #171717)
  • Muted font colour (Hex #636c72)

We also use nav-bg, nav-active and primary-light for the site navigation bars.

Dark-energy and primary-light are used for general highlighting colours.

success
danger
warning
nav-bg
nav-active
dark-energy
primary-light
Last updated