styles

Colour

Our colour palette is designed to communicate trustworthiness and professionalism while remaining approachable.

All of our colours have been carefully chosen to meet accessibility standards.

The colour swatches below include the hex value and the SASS variable for each corresponding colour.

Wayfinding colours

Colours from this palette are used to distinguish between the residents, business, and council sections.

Residents

The dark green is the council’s corporate colour and forms the base of the colour palette.

SASS var: $occlss-brand-color-aqua-deep
HEX: #00483a
SASS var: $occlss-brand-color-nebula
HEX: #d3dfdd

Business

The blue represents the council’s professionalism and is inspired particularly by the science and technology industries based in Oxfordshire.

SASS var: $occlss-brand-color-boston-blue
HEX: #3a78bb
SASS var: $occlss-brand-color-link-water
HEX: #d9ecf6

Council

SASS var: $occlss-brand-color-victoria
HEX: #503b76
SASS var: $occlss-brand-color-snuff
HEX: #dad3e8

Secondary colour palette

These colours stand out from the more corporate colours of our main theme and allow us to add visual interest to our content.

SASS var: $occlss-brand-color-forest-green
HEX: #24b137
SASS var: $occlss-brand-color-keppel
HEX: #38b1a0
SASS var: $occlss-brand-color-keppel-dark
HEX: #319D99
SASS var: $occlss-brand-color-swans-down
HEX: #dbeeea
SASS var: $occlss-brand-color-harp
HEX: #e2f1e4
SASS var: $occlss-brand-color-half-colonial-white
HEX: #fdf3da
SASS var: $occlss-brand-color-iron
HEX: #e0e2e5
SASS var: $occlss-brand-color-pale-sky
HEX: #656d80
SASS var: $occlss-brand-color-selective-yellow
HEX: #feb603
SASS var: $occlss-brand-color-amaranth
HEX: #DA1C5C
SASS var: $occlss-brand-color-twilight
HEX: #E9D5E1
SASS var: $occlss-brand-color-swans-down
HEX: #D6EBEB
SASS var: $occlss-brand-color-royal-heath
HEX: #932D67

This is the palette used for the primary button.

SASS var: $occlss-brand-color-venice-denim
HEX: #0B5EB1
SASS var: $occlss-brand-color-catalina-blue
HEX: #073d73
SASS var: $occlss-brand-color-denim
HEX: #0e73d8
SASS var: $occlss-brand-color-selago
HEX: #e5effb

Messages colours

Error alert

Red is used here to represent an error. It will always be accompanied by an icon and text for those who may not otherwise recognise it.

SASS var: $occlss-brand-color-milano-red
HEX: #ad0505
SASS var: $occlss-brand-color-bridesmaid
HEX: #fee6e6

Info alert

Blue is used here to represent a message that is neutral. It will always be accompanied by an icon and text for those who may not otherwise recognise it.

SASS var: $occlss-brand-color-denim
HEX: #0e73d8
SASS var: $occlss-brand-color-solitude
HEX: #ecf5fe

Success alert

Green is used here to represent success. It will always be accompanied by an icon and text for those who may not otherwise recognise it.

SASS var: $occlss-brand-color-apple
HEX: #39b54a
SASS var: $occlss-brand-color-zanah
HEX: #d8efd7

Warning alert

Orange is used here to represent a message that does not mean something is wrong now but that it could be if the present action is continued. It will always be accompanied by an icon and text for those who may not otherwise recognise it.

SASS var: $occlss-brand-color-tahiti-gold
HEX: #f3830b
SASS var: $occlss-brand-color-bleach-white
HEX: #feebd8

Search button colours

These colours are only used for the search button so that it can be easily recognised by frequent visitors to the website and will stand out from any other call to action on the page.

SASS var: $occlss-brand-color-ronchi
HEX: #edc856
SASS var: $occlss-brand-color-pizza
HEX: #d0a116
SASS var: $occlss-brand-color-sahara
HEX: #B48C13
SASS var: $occlss-brand-color-maize
HEX: #f5de98

Typography colours

The typography colours were chosen to provide good contrast with the website’s white background. The darkest colours are also used for text on promoted panels were white text does not provide enough contrast.

SASS var: $occlss-brand-color-black
HEX: #000000
SASS var: $occlss-brand-color-emperor
HEX: #525252
SASS var: $occlss-brand-color-cod-gray
HEX: #1a1a1a
SASS var: $occlss-brand-color-woodsmoke
HEX: #0B0C0C
SASS var: $occlss-brand-color-alabaster
HEX: #fcfcfc

Changelog

2.4.6

  • New colour added to the secondary colour palette: hexColor: “#DA1C5C”, sassVar: “$occlss-brand-color-amaranth”

2.2.0

  • Link colour changes from #0a549d to #0B5EB1
  • Body text colour changes from #333333 to #0B0C0C

1.0.0

  • Component Added