This digital design guide is a reference for designers, product managers and developers who are delivering online content or services for Lambeth Council. It is a collection of design patterns, components, and guidelines for creating a unified user interface (UI) across all Lambeth Council’s digital services.

Lambeth digital design guide

If you are delivering online content or services for Lambeth Council and you haven’t done so already, please get in touch.

Grid desktop/tablet

The standard grid is structured in a 12-column, responsive grid for all website content. It is generated using Susy and compiled with SASS using Compass.

Basic

6 columns
6 columns
4 columns
4 columns
4 columns
3 columns
3 columns
3 columns
3 columns
2 columns
2 columns
2 columns
2 columns
2 columns
2 columns
Show code snippet

Variations

The grid is flexible enough to allow different combinations when arranging content within the standard grid. Offsets and incomplete rows can generate rhythm throughout the composition.

6 columns
2 columns
2 columns
2 columns
2 columns
2 columns
2 columns
6 columns
4 columns
2 columns
6 columns
4 columns
2 columns
2 columns
2 columns
2 columns
Show code snippet

Offsets

11 columns
10 columns
9 columns
8 columns
Show code snippet

Incomplete rows

3 columns
3 columns
3 columns
3 columns
3 columns
3 columns
Show code snippet

Centered columns

4 columns
4 columns
4 columns
3 columns
6 columns
3 columns
2 columns
8 columns
2 columns
Show code snippet

Grid mobile

The standard mobile grid is structured in a 30-column, responsive grid. This can be split into 2 smaller columns with an internal gutter.

Centered columns

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
30 columns
14 columns
14 columns
Show code snippet

Colour palette

The colour palette is designed to support a range of distinct visual styles to offer variation and continue to be part of the same system. Shades of blue and purple dominate, providing better contrast with content areas that make good use of white space.

Primary palette

The palette’s primary colours are dark blue, purple, teal and dark grey. The blue has been chosen to denote professionalism and assurance. It is commonly associated with trust, confidence, and sincerity.

#000066
dark blue
#993399
purple
#066E6B
teal
#333333
dark grey

These colours meet the WCAG (Web Content Accessibility Guidelines) standards.

Show code snippet

Secondary palette

The secondary colours provide an additional level of lightness to style pages and highlight important features. These colours meet the WCAG (Web Content Accessibility Guidelines) standards and must be matched to maintain an appropriate contrast ratio with the primary palette.

#08802F
green
#CCCC00
lime green
#FF9900
yellow
#FF6600
orange
#CC0033
red
#4C2C92
violet
#006699
blue
#09A9A4
turquoise
Show code snippet

These colours meet the WCAG (Web Content Accessibility Guidelines) standards.

Background colours

#D6D7D9
grey
#F6F6F6
light grey
#F3EADE
warm grey
#DCE4EF
cold grey
#ACDBE0
light teal
#F0E0F0
light purple
Show code snippet

Text accessibility

Colours on a white background

dark blue on a white background
purple on a white background
teal on a white background
dark grey on a white background
green on a white background
red on a white background
violet on a white background
blue on a white background
Show code snippet

Neutrals on a colored background

white on dark blue
white on purple
white on teal
white on dark grey
white on violet
white on green
white on red
white on blue
dark grey on lime green
dark grey on yellow
dark grey on orange
dark grey on turquoise
dark grey on light purple
dark grey on light grey
dark grey on warm grey
dark grey on cool grey
dark grey on grey
dark grey on light teal
Show code snippet

Logotype

There are two key elements to the core Lambeth logo:

Lambeth logotype

The bespoke ‘Lambeth’ font has been created to build the core ‘Lambeth’ brand. It has a contemporary and unique typeface, representing an approachable council.

The Lambeth flag symbol

The logotype combined with the flag or banner symbol signifies togetherness, pride, energy and openness. The flag symbol may also be used on its own as an endorsement of the brand, but is not a replacement for the full logo.

New logos cannot be created for business as usual activities, promotions, initiatives or campaigns. Any logo usage requests must be referred to the communications team.

Typography

Lambeth Council websites use the Raleway typeface. Raleway is an elegant sans-serif typeface family intended to achieve clear headings and highly legible body paragraphs. Download the Raleway typeface for free

Font weights: Regular, Medium and Bold.

Headers

This is heading 1

36/42 px blue Raleway bold

This is heading 2

30/36 px blue Raleway medium

This is heading 3

25/30 px blue Raleway bold

This is heading 4

20/25 px blue Raleway bold

This is heading 5

18/24 px dark grey Raleway bold

Show code snippet

Body copy

This is what the body copy looks like in Lambeth Council’s digital style guide. This is sample body copy in this reference for designers, product managers and developers who are delivering online content or services for Lambeth Council.

18/26 px dark grey Raleway medium

Show code snippet

Links

Links are very standard, and the color is preset to the blue secondary color.

This is a link on hover state.

This is a visited link.

18/26 px blue Raleway medium. Visited link colour: violet

Text and image link

Text and image link hover

Text and image link visited

18/26 px blue Raleway medium. Visited link colour: violet

Show code snippet

Small print

This is what the Small text looks like.

13/20 px grey Raleway medium

Show code snippet

Lists

Circle.

  • List item with a much longer description or more content.
  • List item
  • List item
    • Nested list item
    • Nested list item
    • Nested list item
  • List item
  • List item
  • List item

Square.

  • List item with a much longer description or more content.
  • List item
  • List item
    • Nested list item
    • Nested list item
    • Nested list item
  • List item
  • List item
  • List item

Numbers.

  • List item with a much longer description or more content.
  • List item
  • List item
    • Nested list item
    • Nested list item
    • Nested list item
  • List item
  • List item
  • List item

Disc.

  • List item with a much longer description or more content.
  • List item
  • List item
    • Nested list item
    • Nested list item
    • Nested list item
  • List item
  • List item
  • List item

No bullet.

  • List item with a much longer description or more content.
  • List item
  • List item
    • Nested list item
    • Nested list item
    • Nested list item
  • List item
  • List item
  • List item
Show code snippet

Buttons

Buttons are used across websites to indicate the most important actions you want users to take. Such as "download," "sign up," or "book now." Generally, use primary buttons for actions that go to the next step and use secondary buttons for actions that happen on the current page.

Use links instead of buttons for less important actions or to lead users between pages of a website.

Primary

Show code snippet

Secondary

Show code snippet

Alert

Show code snippet

Success

Show code snippet

Disabled

Show code snippet

Button groups

Stacked
Show code snippet

Dropdowns

Show code snippet

Labels

Show code snippet

Forms

Basic

Input label default
Input label active
Select
Radio boxes
Check boxes
Textarea
Switch
Show code snippet
Slider
Show code snippet

Fix labels and actions

https://
Show code snippet

Inline labels

Show code snippet

Error states

Invalid entry
Invalid entry
Show code snippet

Iconography

Icons

Our icon library is available as a font. Download it here and use together with the reference codes.

Close
More
Less
Location
Attachment
Warning
Edit
Calendar
Info
Comment
Search
Email
Document
Help
Print
Sound on
Sound off
Play
Link
Time
Phone
Download
Twitter
Pinterest
Instagram
Flickr
Facebook
Youtube
Tumblr

Tables

Simple

Table header 1 Table header 2 Table header 3
Content goes here This is longer content donec id elit non mi porta. 128
Content goes here This is longer content goes here donec id elit non mi porta gravida at eget metus. 405
Content goes here This is longer content goes here donec id elit non mi porta gravida at eget metus. 936
Show code snippet

Tabs

Horizontal
First
Second
Third
Show code snippet

Breadcrumbs

Show code snippet

Accordion

Accordion 1

Panel 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Accordion 2

Panel 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Accordion 3

Panel 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Show code snippet

Progress bar

Show code snippet

Pagination

Show code snippet

Messages

Light box

Open lightbox
Show code snippet

Tooltips

Tip bottom
Tip top
Tip left
Tip right
Show code snippet

Components


Calendar

Show code snippet

Search box

Large

Small
Show code snippet

Hero banner

Desktop – 12 columns
Desktop – Full bleed
Mobile – 30 columns
Mobile – Full bleed
Show code snippet

Image carousel

6 columns – Arrows
6 columns – Slider

Image gallery

6 columns

Map

(powered by Google Maps)

Map DataMap data ©2013 Google
Map Data
Map data ©2013 Google
Map data ©2013 Google
Map
Satellite
Show code snippet

Cards

Cards may be used with video and images in different sizes. See examples below.

Article card

Article with image

This is a heading 4

Lorem ipsum dolor sit amet, nipsumli consectetur adipiscing elit. Duis luctus purus sagittis massa euismod mattis. Cras dignissim est nibh.
Article without image

This is a heading 4

Lorem ipsum dolor sit amet, nipsumli consectetur adipiscing elit. Duis luctus purus sagittis massa euismod mattis. Cras dignissim est nibh.

Video card

This is a heading 4

Lorem ipsum dolor sit amet, nipsumli consectetur adipiscing elit. Duis luctus purus sagittis massa euismod mattis. Cras dignissim est nibh.

Featured card

Links card

Event card

Show code snippet

Action card

Title

Lorem ipsum dolor sit amet, nipsumli consectetur adipiscing elit. Duis luctus purus sagittis massa euismod mattis. Cras dignissim est nibh.

Title

Lorem ipsum dolor sit amet, nipsumli consectetur adipiscing elit. Duis luctus purus sagittis massa euismod mattis. Cras dignissim est nibh.

Person card

Name Surname

POSITION
Lorem ipsum dolor sit amet, nipsumli consectetur adipiscing elit. Duis luctus purus sagittis massa euismod mattis. Cras dignissim est nibh.

Stat card

68%

Lorem ipsum dolor sit amet

Duis luctus purus sagittis massa euismod mattis. Cras dignissim est nibh.
Show code snippet

Help card

Securely tie together any loose items, such as wood, or put loose items in a heavy duty bag (each bag/bundle must weigh no more than 14 kilograms).

Info card

Many bulky items can be disposed of for free at your nearest Reuse and recycling centres.

Email card

info@lambeth.gov.uk
Lambeth Service Centre

Contact card

Lambeth Living Website
Lambeth Service Centre

Phone card

020 7926 9000
Lambeth Service Centre - Mon - Fri - 9am to 5pm

Download card

An example form download link Something about this form download

Date card

19th - 20th July
Next event: Saturday 19 July 2014

Address card

Map DataMap data ©2013 Google
Map Data
Map data ©2013 Google
Map data ©2013 Google
Map
Satellite
Norwood Road
London
SE24 9BJ

Get Directions
Show code snippet

Navigation

Top navigation

Navigation default

Show code snippet

Side navigation

Show code snippet

Footer

One column footer
Note: Lambeth logo links to Lambeth Council home page.

Two rows footer

Show code snippet

Templates

Here are 3 examples of types of campaign sites being created under the Lambeth roof. A combination of components, tables, buttons, icons, colours and grids have been used to showcase the flexibility of the system and inspire teams creating new sites. If you are delivering online content or services for Lambeth Council and you haven’t done so already, please get in touch


Services

Marketing

Engagement