Website style guide for developers and suppliers

Widgets, embedded content and web-based applications that form part of the Surrey County Council website should follow our style guide and colour palette, which is summarised below.

Fonts

  • Open Sans, with Arial, Helvetica and sans-serif as fall-backs.
  • Heading level 1: 30px and 1.2 line-height
  • Heading level 2: 24px and 1.2 line-height
  • Heading level 3: 20px and 1.2 line-height
  • Heading levels 4-6: 16px and 1.6 line-height

Colour palette

  • Primary green: #00604D or rgb(0, 96, 77)
  • Secondary green: #0B4D3F or rgb(11, 77, 63)
  • Blue: #0D76A6 or rgb(13, 118, 166)

Body

  • Background color: #FFF or rgb(255, 255, 255)
  • Text colour: #222 or rgb(34, 34, 34)

Links

  • Text colour: #005BAB or rgb(0, 91, 171)
  • Text colour (hover) with underline: #000 or rgb(0, 0, 0)
  • Text colour (focus): #000 or rgb(0, 0, 0)
  • Background colour (focus): #FFD699 or rgb(255, 214, 153)

Buttons

  • Background colour: #00604D or rgb(0, 96, 77)
  • Background colour (hover, focus): #EE7600 or rgb(238, 118, 0)
  • Text colour: #FFF or rgb(255, 255, 255)
  • Text colour (hover, focus) #000 or rgb(0, 0, 0)
  • Alternative background colour (for buttons on a green background): #0D76A6 or rgb(13, 118, 166)

In this section