Our website uses a simple colour palette for consistency.

Inspired by Sutherland Shire's natural assets and to be accessible, the base colours are navy and green. Some components on the website offer different combinations of these colours.

Image of the primary and tertiary colours used on SSC corp website

To make sure the colours meet the contrast requirements under the Web Content Accessibility Guidelines level AA, some hex colours are deeper than in the style guide.

  • Our web green has been changed to hex #006263
  • Our web red has been changed to hex #AF123B 
  • Purple is the hex code #74489C
  • Navy is the hex code #093569

Text heading colours can be navy or green.

This heading colour is the primary colour A (navy)

This heading colour is the primary colour B (green)

Colour

Text headings are modified in the WYSIWYG component, which should be done sparingly.

Different palettes can be applied to components around the website such as 'Cards' and 'Call to Action' .

Text

Our online font is Gordita sans-serif and body copy on webpages is dark grey - #262626

Our font sizes are –

  • Body text – size 16px, height 22px
  • Header 1 – size 48px, height 64px
  • Header 2 – size 24px, height 33.6px
  • Header 3 – size 21px, height 26px
  • Header 4 – size 18px, height 26px
  • Header 5 – size 18px, height 26px

CTA buttons are #73489c purple base with  #FFFFFF white text. Hover over is #9e7fba.

Colour palette A

This Call to action component palette features a navy background and white text.

This is colour palette B

This palette uses a green background and white text.

This is colour palette C

This palette uses a medium grey background and navy text.

This is colour palette D

This palette uses a light grey background and navy text.

Updated May 2024