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)

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: