ALPHA This is a new service – your feedback will help us to improve it.

This guide explains how to make your service look consistent with the rest of GOV.UK for Medway.

  1. Layout
  2. Typography
  3. Colour
  4. Icons and images
  5. Data
  6. Forms
  7. Buttons
  8. Errors and validation
  9. Alpha and beta banners

Looking for the styles?

The Sass files for all the examples in this page can be found on GitHub.

Looking for the HTML?

User Testing

These sections store the data entered into forms (except uploads) on the browser.

To clear all of this data across all pages, add #clear at the end of the pages URL and hit 'enter'. You will see a red bar across the top when the data has been cleared.

1. Layout

Use white space to create a visual hierarchy on the page. Design for small screens first using a single column layout.

The default maximum page width is 1020px, but go wider if the content requires it.

Optimise for different screen sizes, but don’t make assumptions about what devices people are using.

Spacing

15px gutter example
30px gutter example

Grid unit proportions

Halves

Content

Content

Thirds

Content

Content

Content

Content

Content

Quarters

Content

Content

Content

Content

Discuss layout on our Hackpad

2. Typography

Use the GDS Transport Website font in Light and Bold. It's licensed for use on the GOV.UK domains only. For services publicly available on different domains, use an alternative typeface like Arial. You can find common font colours in the colour palette.

Headings

A 48px Bold heading

A 36px Bold heading

A 24px Bold heading

A 19px Bold heading

Lead paragraph

There should only be one lead paragraph per page.

A 24px lead paragraph. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec ullamcorper nulla non metus auctor fringilla.

A 19px body copy paragraph. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec ullamcorper nulla non metus auctor fringilla.

Body copy

A 19px body copy paragraph. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec ullamcorper nulla non metus auctor fringilla.

A 16px supporting text paragraph. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec ullamcorper nulla non metus auctor fringilla.

A 19px link without surrounding text

A 19px body copy link. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

A 19px body copy external link. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

Lists

List items start with a lowercase letter and have no full stop at the end.

  • here is a bulleted list
  • vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor
  • vestibulum id ligula porta felis euismod semper
  • integer posuere erat a ante venenatis dapibus posuere velit aliquet
  1. here is a numbered list
  2. vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor
  3. vestibulum id ligula porta felis euismod semper
  4. integer posuere erat a ante venenatis dapibus posuere velit aliquet
  5. and here is a numbered sub-list
    1. vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor
    2. vestibulum id ligula porta felis euismod semper
  • here is a numbered list
  • vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor
  • vestibulum id ligula porta felis euismod semper
  • integer posuere erat a ante venenatis dapibus posuere velit aliquet
  • and here is a numbered sub-list
    1. vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor
    2. vestibulum id ligula porta felis euismod semper

Inset text

Use bordered inset text to draw attention to important content on the page.

See an example of inset text on GOV.UK

It can take up to 8 weeks to register a lasting power of attorney if there are no mistakes in the application.

It can take up to 8 weeks to register a lasting power of attorney if there are no mistakes in the application.

Discuss typography on our Hackpad

Hidden text (progressive disclosure)

Use this to make your page easier to scan, only showing contextual information when required.

Click on "Help with nationality" to see how this works.

Help with nationality

If you’re not sure about your nationality, try to find out from an official document like a passport or national ID card.

We need to know your nationality so we can work out which elections you’re entitled to vote in. If you can’t provide your nationality, you’ll have to send copies of identity documents through the post.

Discuss progressive disclosure on our Hackpad

3. Colour

Always use the GOV.UK colour palette.

Colour contrast

The colour contrast ratio for text and interactive elements should be at least 4.5:1 as recommended by the W3C. Test your service to meet this standard.

Sass variables

Use Sass variables in case colour values need to be updated – find these in the GOV.UK frontend toolkit colours.scss file.

Text

  • #0B0C0C
  • $text-colour
  • #6F777B
  • $secondary-text-colour
  • #FFFFFF
  • $page-colour

Links

  • #005ea5
  • $link-colour
  • #2e8aca
  • $link-hover-colour
  • #4c2c92
  • $link-visited-colour

Backgrounds

  • #BFC1C3
  • $border-colour
  • #DEE0E2
  • $panel-colour
  • #F8F8F8
  • $highlight-colour

Buttons

  • #00823B
  • $button-colour
  • #006435
  • $green (hover colour)

Focus

  • #FFBF47
  • $focus-colour

Status colours

  • #d53880
  • $alpha-colour
  • #f47738
  • $beta-colour
  • #912b88
  • $discovery-colour
  • #85994b
  • $live-colour
  • #af1324
  • $error-colour

Greyscale palette

  • #0B0C0C
  • $black
  • #6F777B
  • $grey-1
  • #BFC1C3
  • $grey-2
  • #DEE0E2
  • $grey-3
  • #F8F8F8
  • $grey-4

Extended palette

See an example of the extended colour palette on GOV.UK

Purple

  • #2e358b
  • $purple

Mauve

  • #6f72af
  • $mauve

Fuschia

  • #912b88
  • $fuschia

Pink

  • #d53880
  • $pink

Baby pink

  • #f499be
  • $baby-pink

Red

  • #b10e1e
  • $red

Mellow red

  • #df3034
  • $mellow-red

Orange

  • #f47738
  • $orange

Brown

  • #b58840
  • $brown

Yellow

  • #ffbf47
  • $yellow

Green

  • #006435
  • $green

Grass green

  • #85994b
  • $grass-green

Turquoise

  • #28a197
  • $turquoise

Light blue

  • #2b8cc4
  • $light-blue

Discuss colour on our Hackpad

4. Icons and images

Avoid unnecessary decoration - only use icons and images if there's a real user need.

Icons

GOV.UK standard icons are provided, as well as organisation crests and media player icons – find these in the GOV.UK frontend toolkit images folder.

Images

If images are needed they should be landscape, 3:2 aspect ratio.

3:2

Discuss icons on our Hackpad

5. Data

Data is recommended as an alternative to using images.

Data visualisation

For screen readers, ensure the data value appears first so it makes sense when read aloud.

24

Ministerial departments

80px

16px

56/154

on GOV.UK

48px

16px

Data in a table

Consider putting content into tables to make it easier to scan.

See an example of numeric table usage on GOV.UK

Date Paper form Digital
25 November to 1 December 2013 2,763 1,792
2 to 8 December 2013 2,850 1,740
9 to 15 December 2013 2,388 1,683

Not all content in tables should be right aligned.

See an example of table usage on GOV.UK

Dates and amounts
First 6 weeks £109.80 per week
Next 33 weeks £109.80 per week
Total estimated pay £4,282.20
Tell the mother’s employer 28 days before they want to start maternity pay

Discuss tables on our Hackpad

6. Forms

Keep forms as simple as possible – only ask what's needed to run your service.

See an example of GOV.UK form layout

Optional and mandatory fields

Labels

Click on the label "Full name" to bring focus to the form field.

Form fields

Make field widths proportional to the input they take.

Ensure that users can enter the information they need at smaller screen sizes.

Snap form fields to 100% width at smaller screen sizes.

Discuss text boxes on our Hackpad

Fieldsets and legends

Use fieldsets to group related form controls. The first element inside a fieldset must be a legend element which describes the group.

Form focus states

All elements use the yellow focus style as a highlight, as either a fill or 3px outline.

Click on the label "Full name" or inside the form field to show the focus state.

Spacing between form elements

Ensure there is sufficient spacing between form elements.

Hint text

Drop-down lists

Avoid using drop-down lists (the HTML select element) - use radio buttons or checkboxes instead.

Watch Alice Bartlett present the failings of select boxes to meet the needs of less technically capable users.

Discuss select boxes on our Hackpad

Radio buttons

or

Checkboxes

Which types of waste do you transport regularly?

Select all that apply

Large hit areas aren't always appropriate.

Only pre-select options if there's a strong, user-centred reason to.

Discuss radio buttons and checkboxes on our Hackpad

Inset form elements

Insets can be used within forms to emphasise supporting information.

Click on "Yes" to see how this works.

Do you know their National Insurance number?

Click on "Citizen of a different country" to see how this works.

What is your nationality?

Select all options that are relevant to you.

Discuss forms on our Hackpad

7. Buttons

Use buttons to move though a transaction, aim to use only one button per page.

Button text

Button text should be short and describe the action the button performs.

Save and continue

Launch your service with a Start now button.

Align the primary action button to the left edge of your form, in the user's line of sight.

Back

Creating buttons

Use the GOV.UK Sass button mixin – find this in the GOV.UK frontend toolkit buttons.scss file

Button

  • #00823B
  • $button-colour

Focus

  • #FFBF47
  • $focus-colour

Disabled buttons

Disabled buttons should be set at 50% opacity.

Discuss buttons on our Hackpad

8. Errors and validation

Minimise the number of errors on a page

Recovering from errors can be hard for users, especially if a page contains multiple errors. Avoid this by splitting long forms across multiple pages, with each page asking a single question.

Summarise errors at the top of the page

You must:

Message to alert the user to a problem goes here

Optional description of the error(s) and how to correct them

Check your personal details

Look at your name, signature and other details.

Are your personal details correct and up-to-date? Error message about personal details goes here

The error summary must appear at the top of the page, so it is visible when the page is refreshed and is immediately read out by assistive technology.

Highlight errors in forms

For each error:

  • write a message that helps the user to understand why the error occurred and what to do about it
  • put the message in the <label> or <legend> for the question, after the question text, in red
  • use a red border to visually connect the message and the question it belongs to
  • if the error relates to specific text fields within the question, give these a red border as well

For red, use the $error-colour Sass variable – find this in the GOV.UK frontend toolkit colours.scss file

Message to alert the user to a problem goes here

Optional description of the error(s) and how to correct them

Your personal details

If users are regularly making multiple errors on a page this indicates that your page has either too many questions, or that the question needs to be rewritten in plain English.

Simplify the page by rewriting and where possible, removing questions or splitting questions across multiple pages.

Implementation examples

Discuss errors on our Hackpad

9. Alpha and beta banners

You have to use an alpha banner if your thing is in alpha, and a beta banner if it’s in beta.

Things on the service.gov.uk subdomain

If your service is in beta or alpha, you must show the relevant banner in the header. It should sit directly underneath the black GOV.UK header and colour bar.

ALPHA This is a new service – your feedback will help us to improve it.

BETA This is a new service – your feedback will help us to improve it.

Things on GOV.UK

If your GOV.UK content is in beta or alpha, show the relevant banner below the page title, but above the body content. You can see what they should look like in this blog post.

Creating alpha and beta banners

Use the GOV.UK Sass phase banner mixin – find this in the GOV.UK frontend toolkit alpha-beta.scss file