Website style guide for developers and suppliers

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

If you have any questions about these standards, please contact Web and Digital Services.

Templates

To ensure a consistent and high quality experience for our users, all public-facing website applications should make use of a master website template. View an example template for ASP.NET MVC applications.

• A unique template will be provided for each application or application type.
• Each template will contain tokens (placeholders) for dynamic content.
• Templates are available either as a single page, or as a set of three segments (head, header, footer).
• Templates should be automatically downloaded every 24 hours to maintain consistency.

Grid system

We use the Bootstrap 4 grid system to create responsive layouts and components.

A link to the Bootstrap CSS is included in the page templates that we supply for use with in-house and third party, public-facing web applications.

Fonts

Base fonts

• Family: Open Sans, with Arial, Helvetica and sans-serif as fall-backs.
• Size: 1.6rem (16px)
• Line height: 1.6;

Heading level 1

• Size: 3rem (30px)
• Line height: 1.2
• Top margin: 3rem (30px)

Heading level 2

• Size: 2.4rem (24px)
• Line height: 1.2
• Top margin: 3rem (30px)

Heading level 3

• Size: 2rem (20px)
• Line height: 1.2
• Top margin: 3rem (30px)

Heading levels 4-6

• Top margin: 3rem (30px)

Paragraphs

• Top margin: 2rem (20px)

Unordered lists

• Style: Square
• Top margin: 2rem (20px)
• Left margin: 2rem (20px)

Ordered lists

• Style: Decimal
• Top margin: 2rem (20px)
• Left margin: 2rem (20px)

List items

• Top margin (except the first item): 1rem (10px).

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)

Components

Further guidance and example markup is available for the following common components:

• A to Z
• Accordion
• Forms
• Notices
• Tile