Design styles

Find out how to utilise the Knowsley Council branding.

Colours

Primary / Secondary colours

Preview Colour HEX Class Usage

Valiant Poppy swatch
Red #bd2c30 color-primary-red
  • Highlights
  • Media with text box background
  • In-page warning alert border
  • Callout background
  • Full page alert (Emergency) background colour

Cosmos Blue swatch
Navy Blue #00324b color-primary-blue
  • Menu and action buttons
  • Media with text box background
  • Links
  • Icons
  • In-page info alert border
  • Callout background

Teal colour swatch
Dark Teal #0f7060 color-primary-green
  • Media with text box background
  • Callout  background
  • Feedback bar background

Green colour swatch
Green #4A8131  color-success
  • Media with text box background
  • Start buttons
  • Call-to-action buttons
  • In-page success alert border
  • Callout background
  • Chat button background

Charcoal colour swatch
Charcoal  #1D1D1B color-black
  • Headings
  • Body copy
  • Head links
  • Footer links
  • Full page alert (Death of a Notable Person) background colour

Orange colour swatch
Orange color-orange #ed7522
  • In-page failure alert border

Hover and focus states

Preview Colour HEX Class Usage

Yellow colour swatch
Deep Yellow #E2AB0C color-focus
  • Link hover state
  • Button, link and form field focus states
  • Callout background
  • Full page alert (minor Alert) background colour

Dark green colour swatch
Deep Green #25550f color-success-dark
  • Call-to-action button hover state

Light Navy colour swatch
Navy Blue (85% opacity) #00324bd9 header-services-button-bg-color-hover
  • Menu/services button hover state
  • Button hover state
  • Call to action (information) button hover state

Opacity colours

Preview Colour HEX Class Usage

Navy Blue (15%) colour swatch
Navy Blue (15% opacity) #00324b26 color-primary-blue-opacity-15
  • Full page alert (Announcement) background colour
  • Page section background colour
  • IA block links background colour

Navy Blue (25%) colour swatch
Navy Blue (25% opacity) #00324b40 color-primary-blue-opacity-25
  • A-Z background colour
  • Call out box background colour
  • Page section background colour
  • IA block title background colour

Navy Blue (45%) colour swatch
Navy Blue (45% opacity) #00324b73 color-primary-blue-opacity-45  

Grayscale / Neutral colours

Preview Colour HEX Class Usage

Light grey colour swatch
Light Grey #d2d2d2 color-light-grey
  • Table borders and header background colour
  • Dividers and separators

Medium grey colour swatch
Grey #EEF1F2 bg-color-off-white
  • Footer background colour
  • ReciteMe banner background colour

 

Chat with us