We are working rapidly, writing the design system as we develop our new website. If you need guidance on elements that are not yet documented, please email [email protected]

The design system is here to guide designers, developers and content editors who are building new online services for Cumberland Council.

Our objective is to create a consistent user experience, while providing a library of re-usable components that help build recogisability and speed up design time.

Developers and designers
Follow the guidelines in the Identity section when designing new components or replicating the look and feel on another platform.

Content designers and editors
Find out which components are already available for use when designing online services for Cumberland Council.

Design principles, accessibility and testing

The Cumberland guidelines have been tested to meet Web Content Accessibility Guidelines 2.1 success criteria level AA and above.

If you introduce new colour combinations in your designs, ensure you test your work with a tool like WebAIM Colour Contrast Checker.

Testing is ongoing, if you spot any accessibility issues please leave a message in the page feedback.

---

Identity

The Cumberland look and feel online

In this section you can read guidelines on replicating the Cumberland Council identity, and download the necessary design resources you will need to do this.

• Logo
• Favicons
• Typography
• Colour
• Hover and focus
• Icons
• Social icons

Our examples are documented in pixel units, you can use a tool like Pixel to REM converter to convert pixels to your choice of measurement unit.

---

IdentityLogo

Our logos, and how to use them

Logo - colour

Use over primary or dark backgrounds.

• Download the Cumberland Logo (SVG)
• Download the Cumberland Logo (PNG)

Logo - white

Use over a primary or black background, or when restricted to monotone.

• Download the Cumberland White Logo (SVG)
• Download the Cumberland White Logo (PNG)

Logo - black

Use for print only styles, or when restricted to monotone.

• Download the Cumberland Black Logo (SVG)
• Download the Cumberland Black Logo (PNG)

Ensure the logo maintains its original aspect ratio. Don't adapt the logo design in any way. Refer to the header guidelines for logo sizing.

---

IdentityFavicon

Help users recognise Cumberland tabs in their browser, and when bookmarking pages

Download the favicon set

Download the Cumberland Favicon package (ZIP)

For instructions on embedding the favicons in your HTML refer to the README.txt file in the zip download.

---

IdentityTypography

Our fonts and typographic styles

Font: Nunito Sans
Font weights: 400, 600, 700, 800

Find Nunito Sans embed options on Google Fonts.

Nunito Sans is used exclusively throughout Cumberland digital services. Don't introduce new fonts, ensure the correct fallback fonts are applied.

Fallback font

Use the fallback fonts 'Arial' and 'sans-serif' for the scenario where 'Nunito Sans' may fail to render for a user:

font-family: "Nunito Sans", Arial, sans-serif;

Headings

Heading levels 1 - 6 in page content are presented as 'Nunito Sans' font weight 600:

Font size base = 16px

Element	Font size below 768px	Font size above 768px
Headling level 1	2rem (32px)	2.75rem (44px)
Headling level 2	1.625rem (26px)	2.125rem (34px)
Headling level 3	1.5rem (24px)	1.75rem (28px)
Headling level 4	1.375rem (22px)	1.375rem (22px)
Headling level 5	1.125rem (18px)	1.25rem (20px)
Headling level 6	1.125rem (18px)	1.25rem (20px)

Paragraphs and lists

Font size base = 16px

Element	Font size below 768px	Font size above 768px
Paragraph	1.063rem (17px)	1.125rem (19px)
Page lead paragraph	1.1875rem (19px)	1.375rem (22px)
Bullet and number lists	1.063rem (17px)	1.125rem (19px)
In page alerts	1.063rem (17px)	1.125rem (19px)

IdentityColour

Our colours, and how to use them

Brand colours help our users build familiarity and trust in our digital services.

In addition to brand colours, we require an extended colour palette to highlight certain functionality or break up content.

For example, we use green for a confirmation alert. Red for an error message.

Colour variable names and values

These colour tables show HEX values as well as variable names for:

• LovalGov Drupal, prefixed with a double hyphen '--'
• Liberty Create (Bootstrap 4), prefixed with a dollar sign '$'

Brand colours

The base brand colours referenced throughout the theme.
	--color-primary	$primary	#003547	Set as your main brand colour. Header and footer bacgrounds.
	--color-secondary	$secondary	#0b0c0c	Usage notes tbc
	--color-light	$light	#f1f9fe	Used within components to create subtle division with white backgrounds
	--color-dark	$dark	#052832	Mobile navigation button, links over tints
	--color-accent	$accent	#003547	Used in LocalGov to apply accent to global elements including header bar, feedback bar, component borders

Greys

Monochrome for typography, and key lines and backgrounds.
	--color-black	$black	#0b0c0c	Text over light backgrounds including page content headings and body copy
	--color-white	$white	#ffffff	Text and icons on dark backgrounds
	--color-gray	$gray	#a4b5bd	Key line dividers
	--color-gray-dark	$gray-dark	#333e48	Form hints
	--color-gray-light	$gray-light	#f3f2f1	tbc

Interaction colours

Used to convey extra meaning when the user is interacting with the web page.
	--color-info	$info	#003547	Information alerts and site notifications
	--color-success	$success	#008540	Success alerts, success panels
	--color-warning	$warning	#febe10	Warning alerts
	--color-danger	$danger	#ce4327	Danger alerts, delete and cancel buttons, validation error messages
	--color-blue	$blue	#005198	Buttons and links within components, pagination, filter toggles

Link colours

Links, link hover and focus states.
	--color-link	$link	#003547	Links in page content, service list headings
	--color-hover	$hover	#005198	Link hover state
	--color-focus	n/a	#fdd24f	Link focus background, button and form input focus borders
	--color-active	n/a	#0b0c0c	Black text over focus state background
	--color-link-visited	n/a	#360854	Visited links

Darkened colours

Button colours have a 'darken' variation, used to underline the button in default state, and as the background colour when in hover state.
	--color-primary-darken	$primary-darken	#000f14	Primary button underline and hover
	--color-success-darken	$success-darken	#006a33	Success button underline and hover
	--color-warning-darken	$warning-darken	#daa000	Warning button underline and hover
	--color-danger-darken	$danger-darken	#972d18	Danger button underline and hover
	--color-teal-darken	$teal-darken	#005a4f	Start button underline and hover
	--color-blue-darken	$blue-darken	#00396c	Blue button underline and hover
	--color--gray-darken	$gray-darken	#98a2ac	tbc

Tint colours

Used as backgrounds for components and to seperate areas of content.
	--color-primary-tint	$primary-tint	#e5eaec	Page heading and summary area background. Inset text background
	--color-secondary-tint	$secondary-tint	#e6e6e6	tbc
	--color-success-tint	$success-tint	#e8efec	Inset text background
	--color-warning-tint	$warning-tint	#fff5db	tbc
	--color-danger-tint	$danger-tint	#f0e8e6	tbc
	--color-teal-tint	$teal-tint	#d9e8e6	tbc
	--color-indigo-tint	$indigo-tint	#ebe6ee	tbc

Named colours

Other colours based on Bootstrap colour names, also made available in LocalGov.
	--color-teal	$teal	#006458	Start buttons, navigation buttons
	--color-red	$red	#701f0e	See 'Danger'. May be introduced in micro sites when additional colours are required.
	--color-purple	$purple	#a694c7	See 'Visited links'. May be introduced in micro sites when additional colours are required.
	--color-indigo	$indigo	#360854	May be introduced in micro sites when additional colours are required.
	--color-yellow	$yellow	#febe10	See 'Warning'. May be introduced in micro sites when additional colours are required.
	--color-cyan	$cyan	#129dd9	May be introduced in micro sites when additional colours are required.
	--color-green	$green	#008540	May be introduced in micro sites when additional colours are required.
	--color-orange	$orange	#f37443	May be introduced in micro sites when additional colours are required.
	--color-pink	$pink	#ad3cad	May be introduced in micro sites when additional colours are required.

IdentityButtons

Let the user know they are about to carry out a action

For example, starting a form:

Base start buttons styles:

• background: success
• border bottom: 4px success darken
• icon: chevron-right-solid
• button text: weight 700, white

Start button styles desktop:

• button text: 18px
• button height: 60px (including bottom border)

Start button styles mobile:

• button text: 16px
• button height: 50px (including bottom border)

See button hover and focus states

---

IdentityHover and focus

Show the user which elements they are interacting with

We followed best practice and accessibility guidance from GOV.UK focus states and NHS focus states when designing these styles.

CSS examples in this section use LocalGov colour variables.

Link states

Link default state is primary colour, underlined:

color: var(--color-primary);
text-decoration: underline;

Link hover state is hover colour and uses a thicker underline:

color: var(--color-hover);
text-decoration: underline;
text-decoration-thickness: max(3px,0.1875rem,0.12em);

Link focus state uses a focus colour background, black link text and black 4px box shadow underline:

Link focus CSS example using LocalGov colour variables:text-decoration: none;
color: var(--color-black);
outline: 3px solid transparent;
background-color: var(--color-focus);
-webkit-box-shadow: 0 -2px var(--color-focus),0 4px var(--color-black);
box-shadow: 0 -2px var(--color-focus),0 4px var(--color-black);
-webkit-box-decoration-break: clone;

Link visited state uses visited colour text:

Button states

Button default state, start button example:

• background: primary
• border bottom: 4px included within the 60px button height, using the darkened variation of the button colour

See buttons for responsive sizing.

Button hover state:

• Background: darkened variation of the button colour

Button focus state:

• background: focus
• text: black
• border bottom: 4px black

Text input states

Text input default state:

• input height: 40px
• input border: 2px inset black
• input text: 16px black
• placeholder: do not use

Text input focus state:

• input border: 2px inset black
• input box shadow: 1px inset black, adds extra weight
• outline: 3px focus

Ensure your focus styles do not move adjacent elements on the page when the user interacts with inputs.

Radio button states

Radio button default, selected and focus example:

Radio buttons do not have a hover state.

Radio button default state:

• width and height: 45px
• input border: 2px inset black
• text label: 16px black

Radio button selected state:

• selected indicatior: circle black 20px x 20px

Radio button focus state:

• selected indicatior: circle black 20px x 20px
• input border: 2px inset black
• input box shadow: 1px inset black, adds extra weight
• outline: 3px focus

Checkbox states

Checkbox default, selected and focus example:

Checkboxes do not have a hover state.

Checkbox default state:

• width and height: 30px
• input border: 2px inset black
• text label: 16px black

Checkbox selected state:

• selected indicatior: 20px x 20px black, Font Awesome 5 check icon

Checkbox focus state:

• selected indicatior: 20px x 20px black, Font Awesome 5 check icon
• input border: 2px inset black
• input box shadow: 1px inset black, adds extra weight
• outline: 3px focus

IdentityIcons

Convey extra meaning for sighted users through recognisable icons

Icons are added as SVG images and mostly carry no semantic meaning for screen reader users.

Recognisable icons can be used as visual indicators for user interaction. For example the button component uses a 'chevron' icon to draw attention to an action.

Our icon set contains Font Awesome Free and Pro icons. If you are replicating icons across other platforms download your required SVGs from the links in the icon table. If you have a Font Awesome subscription you can make a kit on Font Awesome,

If there is a user need for a new icon, ensure you use Font Awesome for consistency.

Interface icons with available LocalGov theme variables

These icons will be made available to download soon, if you require them please send us a message.

LocalGov Team
Email: [email protected]

Interface icons from LocalGov base theme with no variable names

Icon	Usage	Font Awesome
	Close, clear and remove buttons	times solid
	Toggle open state	chevron-up solid
	Toggle closed state	chevron-down solid
	Back link, previous step button	chevron-left solid
	Start button, next step button	chevron-right solid
	Show all step summaries, show map	eye solid
	Hide all step summaries, hide map	eye-slash solid

IdentitySocial icons

Social media logos inside the Cumberland icon shape

The icon links have a specific size and curved shape, hover and focus styles:

HTML structure

• The social links container is an unordered list <ul> with aria role="list" attribute
• Each link is wrapped in a list item <li>
• Each link consists of an <a href> linking to the social media account
• Each icon is presented as an SVG image with alt tag, inside the <a href>

HTML example:

<ul class="cumbria-social" role="list">
<li><a href="#"><img alt="Facebook" src="pathtoicon/facebook.svg" /></a></li>
<li><a href="#"><img alt="Twitter" src="pathtoicon/twitter.svg" /></a></li>
<li><a href="#"><img alt="YouTube" src="pathtoicon/youtube.svg" /></a></li>
<li><a href="#"><img alt="LinkedIn" src="pathtoicon/linkedin.svg" /></a></li>
<li><a href="#"><img alt="Instagram" src="pathtoicon/instagram.svg" /></a></li>
</ul>

In this CSS example we assign the class 'cumbria-social' to the <ul> wrapper to target and style the social images:

/*Style the social icon to look like a rounded square*/
.cumbria-social li a img{
width: 2.125rem; /*34px*/
height: 2.125rem; /*34px*/
background-color: #00a04e; /*--color-green*/
border: 0.1875rem solid transparent; /*Creates safe space around icon*/
border-radius: 0.25rem
}
/*Space between the icons*/
.cumbria-social li{
margin-right: 0.25rem; /*12px*/
}
/*Icon hover*/
.cumbria-social li a:hover{
background-color: #0b0c0c; /*--color-black)*/
}
/*Icon focus*/
.cumbria-social li a:focus{
border: 0.1875rem solid #fdd24f; /*--color-focus)*/
}

Icon downloads

The social icons originate from Font Awesome brand icons. Download SVGs for the 5 social channels shown in this example:

Icon	Name / weight	Download link
	fa-facebook-f / brands	Download Facebook icon SVG
	fa-twitter / brands	Download Twitter icon SVG
	youtube / brands	Download YouTube icon SVG
	instagram / brands	Download Instagram icon SVG
	linkedin-in / brands	Download linked in icon SVG

If you are unable to apply CSS to your platform you can download the icons complete with background image set.

---

Page template

Make your service match the Cumberland Council website template

In this section you can read guidelines on replicating the header, footer, common layouts and breakpoints.

• Header
• Footer
• Breakpoints
• Layout

Page templateHeader

Replicate the Cumberland website header

Basic header styles

• logo: See colour logo
• logo alignment: Left
• logo alt tag: Cumberland Council
• Logo link: On https://cumberland.gov.uk/ the logo should be wrapped in a <a href> linking to the website homepage
• header bar background: primary

Header elements above 768px breakpoint (desktop)

• logo width: 105px
• header bar height: 110px

Example, header area is indicated by the dark background:

Header elements below 768px breakpoint (mobile)

• logo width: 80px
• header bar height: 90px

If you have trouble fitting other elements in the website header, you can activate the mobile header styling at your chosen breakpoint.

Service label

If a Cumberland Council website or application has a public facing name, you can include a 'Service label' next to the logo.

• logo: always use the official logo, do not add a link to the logo if your site is not on the cumberland.gov.uk domain
• font: 'Nunito Sans', font weight 400, colour primary
• divider: 1px solid white, 15px spacing either side of the divider, match height of label text
• service label link: Add a link to the website or application home page

Service label example above the 768px breakpoint (desktop):

Service label example below the 768px breakpoint (mobile):

---

Page templateFooter

Replicate the Cumberland website footer

The footer is made up or 3 elements, if you are replicating the footer on another platform there is no requirement to include social media icons.

Footer base styles

• background: primary
• border top: 5px green
• padding top and bottom: 60px
• text: white, 15px size, 400 weight

Full footer example, footer area is indicated by the dark background:

1. Links

• Align horizontally above the 768px (mobile) breakpoint
• Stack vertically below the 768px (mobile) breakpoint
• text: white, 15px size, 400 weight

The link text and destinations may be dependant on your platform, email [email protected] for link queries.

Links example:

2. Social links

• design: see Social icons
• margin bottom: 32px

If you are replicating the footer on another platform there is no requirement to include social media icons.

2. Copyright

• margin bottom: 16px
• text: white, 15px size, 400 weight

Copyright example:

---

Page templateBreakpoints

Resize your content across device sizes

LocalGov breakpoints, mobile first:

LocalGov variable	Width in REM	Width in Pixels	Key changes
--width-small	30	480	Small device specific styling. Page content is full width. Mobile burger menu shows.
--width-medium	48	768	Main breakpoint for yypography system. Page content full width. Mobile burger menu shows.
--width-large	60	960	Changes to service page, step by step page columns. Mobile burger menu shows.
--width-extra-large	73.75	1180	Homepage banner image sizing for large devices. Desktop menu shows.
--width-mega	90	1440	Homepage banner image sizing for large devices. Desktop menu shows.

Page templateLayout

Page width and column layouts

Page and content max width above 768px breakpoint (desktop)

Colour	Description	Size
	Content max width	1140px
	Content safe zone (padding) left and right	16px
	Full width background elements	100%

Page and content max width below 768px breakpoint (mobile)

Colour	Description	Size
	Content max width	100% minus safe zone padding
	Content safe zone (padding) left and right	16px

Refer to the LocalGov Drupal Grid CSS on GitHub to read inline documentation on grid layouts.

---

Components

Speed up the editing process by making use of pre-designed components

This section is in progress. These components are only available for use in LocalGov Drupal.

Componenents available in Drupal via the 'Styles' dropdown:

• Web link
• Download link
• Start button
• Action link
• Alerts
• Inset text
• Inline contact details
• Tables
• Images
• Video

---

ComponentsWeb link

Link to other pages

Linking within the Cumberland website:

Linking from the Cumberland website:

---

ComponentsDownload link

In progress... testing auto file extension

---

ComponentsStart button

Let the user know they are about to carry out an action

In Drupal, first create a link, then apply the 'Start button' style.

---

ComponentsAction link

Make multiple call to actions stand out

In Drupal, first create a link, then apply the 'Action link' style.

---

ComponentsAlerts

Highlight urgent information

Alert info

By law you must register a baby's birth within 42 days.

Alert danger

If a child is in immediate danger, you should call 999

Alert success

You added 1 item to your bulky waste collection order

In Drupal, first create your content, then apply the alert style, for example 'Alert info'.

---

ComponentsInset text

Make key information stand out

The photo on your ID must look like you. You can still use your ID even if it has expired. Find out more about how to vote on Gov.UK

In Drupal, first create a link, then apply the 'Inset text' style.

---

ComponentsInline contact details

Make service contact details stand out in a page

Cumberland Registration Service
Telephone: 0300 303 2472
Monday to Friday, 10am to 4pm
Email: [email protected]

In Drupal, first create a link, then apply the 'Inline contact details' style.

---

ComponentsTables

Make tabular information easy to read and compare

In progress, table styling

---

ComponentsImages

In progress... testing

---

ComponentsVideo

Use video if it adds to or improves written content

In progress... testing