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' .

A Navy base and white text
This palette uses #093569 background and #FFFFFF text.
B Green base and white text
This palette uses #006263 background #FFFFFF white text.
C Medium grey base and navy text
This palette uses #e9ecf1 background and #093569 text.
D Light grey base and navy text
This palette uses #f6f7f9 background and #093569 text.
E White base and navy text
Preferred colour palette for landing pages. This palette uses a #FFFFFF background and #093569 text.
No palette - white base and black text
When No Palette is applied to a component it defaults to #FFFFFF background and #000000 text. It is easy to read, however, most text on the website is dark grey #262626 so it creates inconsistency.

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.

White button with navy text Second button with white text

This is colour palette B

This palette uses a green background and white text.

White button with navy text Second button with white text

This is colour palette C

This palette uses a medium grey background and navy text.

Navy button with grey text Second button with navy text

This is colour palette D

This palette uses a light grey background and navy text.

Navy button with grey text Second button with navy text

Updated May 2024