Website Guidelines Contents

STYLE TILE LONDON.GOV.UK WEBSITE GUIDELINES CONTENTS

u u u COLOUR...... 3 ICONS...... 20 COMPONENTS ...... 32 u u u Headers, buttons & links...... 3 Navigation...... 20 Primary navigation ...... 32 u u u Navigation menu...... 4 General...... 21 Secondary navigation...... 35 u u u General...... 5 Share & follow...... 22 Form items...... 36 u u u Social media...... 6 What we do...... 23 Calendars...... 37 u Accordions...... 38 u u u TYPE...... 8 GRID...... 24 Tables...... 39 u u u Font...... 8 1024 px width...... 24 Carousels...... 40 u u u Sizes...... 9 688 px width...... 26 Factboxes...... 43 u u u Styles...... 10 320 px width...... 28 Section links...... 45 u Event listings...... 47 u u u IMAGES...... 17 SPACING...... 30 Twitter feeds...... 49 u u u Proportions...... 17 Desktop...... 30 Key people...... 50 u u u Sizes...... 18 Tablet...... 30 Related documents...... 51 u u u Content...... 19 Mobile...... 31 Talk London...... 52

u 2 CONTENTS COLOUR

HEADERS, Mayoral content Assembly content Generic content BUTTONS Default Default Default & LINKS HEX #9E0059 HEX #00577D HEX #353D42 RGB 158 ◆ 0 ◆ 89 RGB 0 ◆ 87 ◆ 125 RGB 54 ◆ 62 ◆ 66 Our online colour palette is split into 3 sections depending on the content. Hover Hover Hover HEX #000000 HEX #000000 HEX #000000 Tints of these colours RGB 0 ◆ 0 ◆ 0 RGB 0 ◆ 0 ◆ 0 RGB 0 ◆ 0 ◆ 0 can also be used where appropriate. Active Active Active HEX #EE266D HEX #00AEEF HEX #868B8E RGB 238 ◆ 38 ◆ 109 RGB 0 ◆ 174 ◆ 239 RGB 134 ◆ 139 ◆ 142

u 3 CONTENTS COLOUR

NAVIGATION Titles & Icons Arrows Background MENU Default Default Default We use these additional HEX #353D42 HEX #D7D8D9 HEX #F5F5F6 colours for the site’s RGB 54 ◆ 62 ◆ 66 RGB 215 ◆ 216 ◆ 217 RGB 245 ◆ 245 ◆ 246 navigation.

Hover Hover Hover HEX #000000 HEX #000000 HEX #F5F5F6 RGB 0 ◆ 0 ◆ 0 RGB 0 ◆ 0 ◆ 0 RGB 245 ◆ 245 ◆ 246

Active Active Active HEX #AFB2B3 HEX #AFB2B3 HEX #F5F5F6 RGB 175 ◆ 178 ◆ 179 RGB 175 ◆ 178 ◆ 179 RGB 245 ◆ 245 ◆ 246

u 4 CONTENTS COLOUR

GENERAL Body copy Scaled background Status We use these additional colours for other, general HEX #353D42 HEX #FFFFFF HEX #EE266D elements. RGB 54 ◆ 62 ◆ 66 RGB 255 ◆ 255 ◆ 255 RGB 238 ◆ 38 ◆ 109

Keylines Content area background Warning

HEX #E1E2E3 HEX #F5F5F6 HEX #BC9109 RGB 225 ◆ 226 ◆ 227 RGB 245 ◆ 245 ◆ 246 RGB 188 ◆ 145 ◆ 9

Widgets Header / Footer background Error

HEX #FFFFFF HEX #353D42 HEX #E0001B RGB 255 ◆ 255 ◆ 255 RGB 54 ◆ 62 ◆ 66 RGB 224 ◆ 0 ◆ 27

u 5 CONTENTS COLOUR

SOCIAL MEDIA Twitter Links Facebook Links Instagram Links Social media icons should appear in their respective Default Default Default colours. These colours HEX #55ACEE HEX #3B5998 HEX #BC2A8D should not be used anywhere RGB 85 ◆ 172 ◆ 238 RGB 59 ◆ 89 ◆ 152 RGB 188 ◆ 42 ◆ 141 else on the site.

Hover Hover Hover HEX #4081B2 HEX #283B66 HEX #8B074E RGB 64 ◆ 129 ◆ 178 RGB 40 ◆ 59 ◆ 102 RGB 139 ◆ 7 ◆ 78

Active Active Active HEX #5CB8FF HEX #4668B2 HEX #CC49A6 RGB 92 ◆ 184 ◆ 255 RGB 70 ◆ 104 ◆ 178 RGB 204 ◆ 73 ◆ 166

u 6 CONTENTS COLOUR

SOCIAL MEDIA Youtube Links Google+ Links Whatsapp Links Social media icons should appear in their respective Default Default Default colours. These colours HEX #E52D27 HEX #DB4437 HEX #25D366 should not be used anywhere RGB 229 ◆ 45 ◆ 39 RGB 219 ◆ 68 ◆ 55 RGB 37 ◆ 211 ◆ 102 else on the site.

Hover Hover Hover HEX #B31217 HEX #B34439 HEX #075E54 RGB 179 ◆ 18 ◆ 23 RGB 179 ◆ 68 ◆ 57 RGB 7 ◆ 94 ◆ 84

Active Active Active HEX #CD201F HEX #E06055 HEX #128C7E RGB 205 ◆ 32 ◆ 31 RGB 224 ◆ 96 ◆ 85 RGB 18 ◆ 140 ◆ 126

u 7 CONTENTS TYPE

FONT Arial Bold – Headers & titles We use Arial for all online type in bold and regular ABCDEFGHIJKLMNOPQRSTUVWXYZ weights. abcdefghijklmnopqrstuvwxyz 1234567890!#£?

Arial Regular – Primary body text ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890!#£?

u 8 CONTENTS TYPE

HEADERS & LINKS SIZES All type should be Arial Bold 32px sized appropriately and consistently across the site.

HEADERS & LINKS Arial Bold 22px

NAVIGATION TITLES Arial Bold 18px

SECONDARY TITLES & LINKS Arial Bold 16px
BODY COPY
BODY HEADINGS Arial Regular 14px Arial Bold 14px
SECONDARY COPY
SECONDARY HEADINGS Arial Regular 12px Arial Bold 12px
u 9 CONTENTS TYPE
PAGE HEADER STYLES All type should be Arial Bold 32px styled appropriately and consistently across the site. PRIMARY TITLE Arial Bold 22px
PARAGRAPH HEADING Arial Bold 16px
PARAGRAPH Arial Regular 14px Lorem ipsum dolor sit amet, consectetur adipiscing 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
LINK Note: Mayoral colours have been used on this page for illustration. Arial Bold Underlined 14px Lorem ipsum dolor sit amet See page 3 for a full breakdown of all available section colours.
u 10 CONTENTS TYPE
UNORDERED LIST STYLES • Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor All type should be incididunt ut labore et dolore magna aliqua. styled appropriately and consistently across the site. • Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
ORDERED LIST 1. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 2. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
DEFINITION LIST Lorem ipsum Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum Note: Mayoral colours have been Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea used on this page for illustration. commodo consequat. See page 3 for a full breakdown of all available section colours.
u 11 CONTENTS TYPE
BOLD / EMPHASIS STYLES Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor All type should be incididunt ut labore et dolore magna aliqua. styled appropriately and consistently across the site. CITATION Chunks of italic text are not – Lorem ipsum, 2017 advised, for accessibility reasons. Instead, bold text can be used for emphasis or QUOTE for quotes etc. Citations will “Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor likely be short or single lines incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud of text, in which case italic exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure text is fine. dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.”
Note: Mayoral colours have been used on this page for illustration. See page 3 for a full breakdown of all available section colours.
u 12 CONTENTS TYPE
STATUS MESSAGE STYLES All type should be Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod styled appropriately and consistently across the site. WARNING MESSAGE
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
ERROR MESSAGE
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
u 13 CONTENTS TYPE
STYLES Primary title (Mayoral) Example of type styling as seen on the homepage. Arial Bold 22px
Secondary title Arial Bold 16px
Primary title Note: Mayoral colours have been (Default) used on this page for illustration. Arial Bold 22px See page 3 for a full breakdown of all available section colours.
u 14 CONTENTS TYPE
STYLES Breadcrumbs Example of type styling as Arial Regular seen on a landing page. 14px Arial Bold 14px Page header (current) Arial Bold 32px
Primary title Arial Bold 22px
Secondary heading Arial Bold 12px
Note: Mayoral colours have been used on this page for illustration. See page 3 for a full breakdown of all available section colours.
u 15 CONTENTS TYPE
STYLES Primary title Example of type styling as Arial Bold 22px seen on a content page. Jumplink Arial Bold 14px Paragraph Underlined heading Arial Bold 16px
Paragraph link Arial Bold 14px Underlined
Note: Mayoral colours have been used on this page for illustration. See page 3 for a full breakdown of all available section colours.
u 16 CONTENTS IMAGES
PROPORTIONS Content thumbnail Content image All images on the site are either 1:1 or 2:1.
1:1 images are used for content thumbnails and 2:1 images are for content 1:1 2:1 headers. Inline images should also follow the same proportions. See the next page for size guidelines and exceptions.
u 17 CONTENTS IMAGES
SIZES Homepage header image The only image that isn’t 1:1 or 2:1 is the main homepage header. We have provided recommended sizes for all 1024 x 300px other images. (2048 x 600px) The dimensions in parentheses are doubled for retina displays.
Content thumbnail Content image
496 x 496px 992 x 496px
(992 x 992px) (1984 x 992px)
u 18 CONTENTS IMAGES
CONTENT Acceptable images Images should be either photography or illustration. Animated GIFs can also be used, but we do not allow text as part of the image.
Unacceptable images
Rat eum eic Rat eum eic toressimagni uta toressimagni quisquibus sapit volupit iasit, uta quisquibus od quae sinvelignam quidit id sapit volupit qui non pores et vollorest re iasit, od quae nem resto et estioruntent sinvelignam ea autae eiuscia quam, que quidit id qui molorepudam quiaectur
u 19 CONTENTS ICONS
NAVIGATION All icons used for navigation across london.gov.uk.
Link back Link to beginning Link forward Link to end Search
Expand Collapse Menu Close What we do
In my area Get involved Have your say About us Media centre
u 20 CONTENTS ICONS
GENERAL Additional general icons found across the site.
Download Flag (Inactive) Flag (Active) Calendar Location
Login Register Play Pause Fullscreen
Reply Survey Discussion Pin Tag
u 21 CONTENTS ICONS
SHARE & FOLLOW Social media share icons Facebook Twitter Google+ Instagram Youtube as well as share / print etc. links found at the bottom of content pages.
Whatsapp LinkedIn City Hall Blog Talk London Default Profile
RSS Feed Share Email Phone Print
u 22 CONTENTS ICONS
WHAT WE DO The ‘what we do’ carousel on the homepage contains an icon for each policy area. Arts and culture Housing and land Policing and crime Environment Business and economy
Planning Regeneration Transport Education Volunteering and youth
Health Communities Research and Sport Funding analysis
u 23 CONTENTS GRID
1024 PX WIDTH The london.gov.uk website follows a twelve column responsive grid. At full width (1024px and above) the full twelve columns are used.
Column width 68px | Gutter width 16px | Margin width 16px
u 24 CONTENTS GRID
1024 PX WIDTH The london.gov.uk website follows a twelve column responsive grid. At full width (1024px and above) the full twelve columns are used.
u 25 CONTENTS GRID
768 PX WIDTH On tablet displays (768px– 1023px) the grid is reduced to eight columns.
Column width 78px | Gutter width 16px | Margin width 16px
u 26 CONTENTS GRID
768 PX WIDTH On tablet displays (768px– 1023px) the grid is reduced to eight columns.
u 27 CONTENTS GRID
480 PX WIDTH On mobile displays (480px– 767px) the grid is reduced to four columns.
Column width 105px | Gutter width 12px | Margin width 12px
u 28 CONTENTS GRID
480 PX WIDTH On mobile displays (480px– 767px) the grid is reduced to four columns.
u 29 CONTENTS SPACING
DESKTOP 20px & TABLET Example of spacing as shown on the homepage. Generally the website adheres to a rule of 16px margins and 20px padding.
20px
70px
20px
16px
20px 20px 16px 20px
u 30 CONTENTS SPACING
MOBILE 20px On mobile margins are reduced to 12px to allow more space for content.
20px
70px
12px
20px 20px 12px 20px
u 31 CONTENTS COMPONENTS
PRIMARY Default state NAVIGATION At 1024px width and above, the navigation appears as a 6 column bar.
On scrolling, the logo bar and Hover state navigation bar remain stuck to the top of the screen.
Active state
u 32 CONTENTS COMPONENTS
PRIMARY Collapsed Expanded NAVIGATION At 768px–1023px width, the navigation is no longer displayed in a bar, but as a burger menu with links as blocks.
u 33 CONTENTS COMPONENTS
PRIMARY Collapsed Expanded NAVIGATION At 767px width and below, the logo bar reduces in height.
u 34 CONTENTS COMPONENTS
SECONDARY Breadcrumb navigation NAVIGATION In addition to the primary navigation bar, there are Navigation links other ways of navigating around the site via breadcrumbs, links and pagination.
Pagination
Note: Mayoral colours have been used on this page for illustration. See page 3 for a full breakdown of all available section colours.
u 35 CONTENTS COMPONENTS
FORM ITEMS Checkboxes Select box / dropdown
Radio buttons Default text area
Buttons Expanded text area
Progress
Note: Mayoral colours have been used on this page for illustration. See page 3 for a full breakdown of all available section colours.
u 36 CONTENTS COMPONENTS
CALENDARS Default state Active state The dots signify dates with an event, with the coloured border on today’s date.
Note: Mayoral colours have been used on this page for illustration. See page 3 for a full breakdown of all available section colours.
u 37 CONTENTS COMPONENTS
ACCORDIONS
Note: Mayoral colours have been used on this page for illustration. See page 3 for a full breakdown of all available section colours.
u 38 CONTENTS COMPONENTS
TABLES Columns
Columns and rows
Note: Mayoral colours have been used on this page for illustration. See page 3 for a full breakdown of all available section colours.
u 39 CONTENTS COMPONENTS
CAROUSELS
Note: Mayoral colours have been used on this page for illustration. See page 3 for a full breakdown of all available section colours.
u 40 CONTENTS COMPONENTS
CAROUSELS Desktop The ‘what we do’ carousel appears on the homepage, below the hero.
Tablet
u 41 CONTENTS COMPONENTS
CAROUSELS Mobile
u 42 CONTENTS COMPONENTS
FACTBOXES Factboxes can appear 2x2 as displayed here, or in a single row as displayed on the next page.
u 43 CONTENTS COMPONENTS
FACTBOXES
u 44 CONTENTS COMPONENTS
SECTION LINKS Desktop Desktop and tablet links appear in 2 columns. Mobile links appear in a single column with the summary text removed.
Tablet
Mobile
Note: Mayoral colours have been used on this page for illustration. See page 3 for a full breakdown of all available section colours.
u 45 CONTENTS COMPONENTS
SECTION LINKS
Note: Mayoral colours have been used on this page for illustration. See page 3 for a full breakdown of all available section colours.
u 46 CONTENTS COMPONENTS
EVENT LISTINGS The upcoming three events are displayed in a list on the homepage.
Note: Mayoral colours have been used on this page for illustration. See page 3 for a full breakdown of all available section colours.
u 47 CONTENTS COMPONENTS
EVENT Single date Date range LISTINGS
Note: Mayoral colours have been used on this page for illustration. See page 3 for a full breakdown of all available section colours.
u 48 CONTENTS COMPONENTS
TWITTER Mayoral Assembly FEEDS
u 49 CONTENTS COMPONENTS
KEY PEOPLE
u 50 CONTENTS COMPONENTS
RELATED DOCUMENTS & USEFUL LINKS Related documents and useful links are displayed at the bottom of certain content pages.
Note: Mayoral colours have been used on this page for illustration. See page 3 for a full breakdown of all available section colours.
u 51 CONTENTS COMPONENTS
TALK LONDON Desktop Talk London is the forum section of the website. When a user is within the Talk London section, this banner appears below the primary Mobile navigation bar.
u 52 CONTENTS COMPONENTS
TALK LONDON Spotlight The main content of Talk London is discussions and surveys. Preview links of content appear in different areas as either spotlight (pinned) or teasers.
Teaser
Teaser (2 columns)
u 53 CONTENTS COMPONENTS
TALK LONDON One unique section of Talk London is the comment section on ongoing discussion pages. Comment threads are collapsed as default, with a button link to expand replies.
u 54 CONTENTS For more information please email [email protected]
u 55 CONTENTS