+ + {% include "includes/phase_banner_survey.html" %} + {% include "includes/breadcrumb.html" %} + +
+
+ +

Layout

+ + +

Typography

+ + +

Colour

+ + +

Icons and images

+ + +

Data

+ + +

Buttons

+ + +

Form elements

+ + +

Errors and validation

+ + +

Alpha and beta banners

+ + +
+
+

+ GOV.UK elements + Front-end style guide +

+ +

Page width

+
+

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

+

+ Use a grid to lay out your content. To prevent long lines of text, content should sit in a column which is two-thirds of the page width. +

+

+ Long lines reduce legibility, so all lines of text should be no longer than 70 to 80 characters. +

+
+ +

Screen size

+
+

+ Design for small screens first using a single column layout. +

+

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

+
+ +

Spacing

+
    +
  • spacing between elements is usually 5px, 10px, 15px or multiples of 15px
    • +
  • gutters are 15px for smaller screens and 30px for larger screens
    • +
+ +
+ {% include "snippets/layout_spacing.html" %} +
+ +

Grid unit proportions

+
    +
  • introduce columns as the content requires it – base column ratios on halves, thirds or quarters of the page width
    • +
  • for screen breakpoints use media queries – find these in the GOV.UK frontend toolkit _conditionals.scss file
    • +
+ +

Halves

+
+ {% include "snippets/layout_grid_halves.html" %} +
+ +
+
+  {% include "snippets/layout_grid_halves.html" %}
+
+
+ +

Thirds

+
+ {% include "snippets/layout_grid_thirds.html" %} +
+ +
+
+  {% include "snippets/layout_grid_thirds.html" %}
+
+
+ +

Two thirds / One third

+
+ {% include "snippets/layout_grid_thirds_two_thirds_one_third.html" %} +
+ +
+
+  {% include "snippets/layout_grid_thirds_two_thirds_one_third.html" %}
+
+
+ +

One third / Two thirds

+
+ {% include "snippets/layout_grid_thirds_one_third_two_thirds.html" %} +
+ +
+
+  {% include "snippets/layout_grid_thirds_one_third_two_thirds.html" %}
+
+
+ +

Quarters

+
+ {% include "snippets/layout_grid_quarters.html" %} +
+ +
+
+  {% include "snippets/layout_grid_quarters.html" %}
+
+
+ +

Font

+
+

+ 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. +

+
+ +

+ Headings +

+ +
    +
  • use GDS Transport Website Bold
    • +
  • use sentence case for headings
    • +
  • use headings consistently to create a clear hierarchy
    • +
+ +
+ {% include "snippets/typography_headings_example.html" %} +
+ +
+
+  {% include "snippets/typography_headings.html" %}
+
+
+ +

+ Lead paragraph +

+ +
    +
  • use 24px for a lead paragraph
    • +
  • there should only be one lead paragraph per page
    • +
+ +
+
+ {% include "snippets/typography_lead_paragraph_example.html" %} +
+
+ +
+
+  {% include "snippets/typography_lead_paragraph.html" %}
+
+
+ +

+ Body copy +

+ +
    +
  • use GDS Transport Website Light
    • +
  • avoid using bold and italics
    • +
  • use 19px for body copy – 16px for smaller screens
    • +
  • use smaller sizes only if there's a user need (eg 16px, 14px, 12px)
    • +
  • make sure lines of text don't exceed 75 characters, as they become harder to read beyond that point
    • +
+ +
+
+ {% include "snippets/typography_paragraphs_example.html" %} +
+
+ +
+
+  {% include "snippets/typography_paragraphs.html" %}
+
+
+ + +
    +
  • links within body copy should be blue and underlined
    • +
  • links without surrounding text should not have a full stop at the end
    • +
  • link colours can be found in the colour palette
    • +
+ +
+
+ {% include "snippets/typography_links.html" %} +
+
+ +
+
+  {% include "snippets/typography_links.html" %}
+
+
+ +

Lists

+

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

+ +
+ {% include "snippets/typography_lists.html" %} +
+ +
+
+  {% include "snippets/typography_lists.html" %}
+
+
+ +

Inset text

+

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

+ +
+
+ {% include "snippets/typography_inset_text.html" %} +
+
+ +
+
+  {% include "snippets/typography_inset_text.html" %}
+
+
+ +

Legal text

+

+ Use bold text with an exclamation icon if there are legal consequences - for example, a fine or prison sentence. +

+ +
+
+ {% include "snippets/typography_legal_text.html" %} +
+
+ +
+
+  {% include "snippets/typography_legal_text.html" %}
+
+
+ +

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. +

+ +
+ {% include "snippets/typography_progressive_disclosure.html" %} +
+ +
+
+  {% include "snippets/typography_progressive_disclosure.html" %}
+
+
+ +
+

+ If you're using the HTML5 details and summary elements, you'll need a polyfill for not-so-modern browsers. +

+

+ You'll need to ensure that your markup matches the example above. + GOV.UK elements uses this polyfill. +

+

+ Take a look at example page which demonstrates conditionally revealing information, using the HTML5 details and summary elements. +

+
+ +

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
    • +
+ +
+
    +
  • #2b8cc4
    • +
  • $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
    • +
+
+ +
+
+
    +
  • #B10E1E
    • +
  • $error-colour
    • +
+
+ +
+ +

Greyscale palette

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

Extended palette

+
    +
  • used for graphs and supporting material
    • +
  • for tints of the extended palette use 50% or 25%
    • +
  • for departmental colours + – find these in the GOV.UK frontend toolkit organisation.scss file
    • +
+ +
+ +
+

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
    • +
+ +

GOV.UK blue

+ +
+
    +
  • #005ea5
    • +
  • $govuk-blue
    • +
+ +
+ +
+ +

+ + Discuss colour on the design patterns Hackpad + +

+ +

Examples

+

Transaction end page

+ +
+ +
+
+ +

+ Example service name +

+ +
+

+ Application complete +

+

+ Your reference number is
+ HDJ2123F +

+
+ +

+ We have sent you a confirmation email. +

+ +

+ What happens next? +

+

+ We've sent your application to Hackney Electoral Register Office. +

+

+ They will contact you either to confirm your registration, or to ask for more information. +

+
+
+
+ +

Icons

+
    +
  • + if icons are needed ensure they are clear, simple and accompanied by relevant text +
    • +
  • + don’t hide functionality under 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. +

+ +

Legal text

+

+ Use bold text with an exclamation icon if there are legal consequences - for example, a fine or prison sentence. +

+ +
+
+ {% include "snippets/typography_legal_text.html" %} +
+
+ +
+
+  {% include "snippets/typography_legal_text.html" %}
+
+
+ +

Images

+

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

+ +
+
+
+ 3:2 +
+
+ +
+
+
+ +

Examples

+ + +

Numeric tabular data

+
    +
  • when comparing rows of numbers, align numbers to the right in table cells
    • +
  • use the GOV.UK frontend toolkit's tabular numbers to allow numbers of the same width to be more easily compared
    • +
+ +
+ {% include "snippets/data_table_numeric.html" %} +
+ +
+
+  {% include "snippets/data_table_numeric.html" %}
+
+
+ +

Data in a table

+

+ Not all content in tables should be right aligned. +

+ +
+ {% include "snippets/data_table.html" %} +
+ +
+
+  {% include "snippets/data_table.html" %}
+
+
+ +

+ + Discuss tables on the design patterns Hackpad + +

+ +

Data visualisation

+
    +
  • data is recommended as an alternative to using images
    • +
  • 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

+
+ +
+
+
+ +

Examples

+ + +

Button text

+

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

+ +
+ {% include "snippets/buttons_button.html" %} +
+ +
+
+  {% include "snippets/buttons_button.html" %}
+
+
+ +

Start now button

+

+ Launch your service with a Start now button. +

+ +
+ {% include "snippets/buttons_button_start_now.html" %} +
+ +
+
+  {% include "snippets/buttons_button_start_now.html" %}
+
+
+ +

Button alignment

+

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

+ +
+ +
+
+ + +
+
+ +
+
+ +
+ +

Disabled buttons

+

+ Disabled buttons should be set at 50% opacity. +

+ +
+ +
+ +
+
+  {% include "snippets/buttons_button_disabled.html" %}
+
+
+ +

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
    • +
+
+ +
+ +
+
+ +

+ + Discuss navigation buttons on the design patterns Hackpad + +

+ + +

Optional and mandatory fields

+
    +
  • only ask for the information you absolutely need
    • +
  • if you do ask for optional information, mark the labels of optional fields with '(optional)'
    • +
  • don't mark mandatory fields with asterisks
    • +
+ +

Labels

+
    +
  • all form fields should be given labels
    • +
  • don't hide labels, unless the surrounding context makes them unnecessary
    • +
  • labels should be aligned above their fields
    • +
  • label text should be short, direct and in sentence case
    • +
  • avoid colons at the end of labels
    • +
  • labels should be associated with form fields using the for attribute
    • +
+
+ {% include "snippets/form_labels.html" %} +
+ +
+
+  {% include "snippets/form_labels.html" %}
+
+
+ +

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 form fields on the design patterns Hackpad + +

+ +

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. +

+
+ +
+ {% include "snippets/form_focus.html" %} +
+ +

Hint text

+
    +
  • don't use placeholder text in form fields, as this will disappear once content is entered into the form field
    • +
  • use hint text for supporting contextual help, this will always be shown
    • +
  • hint text should sit above a form field
    • +
  • ensure hint text can be read correctly by screen readers
    • +
+ +
+ {% include "snippets/form_hint_text.html" %} +
+ +
+
+  {% include "snippets/form_hint_text.html" %}
+
+
+ +

Spacing between form elements

+

+ Ensure there is sufficient spacing between form elements. +

+ +
+ {% include "snippets/form_spacing.html" %} +
+ +
+
+  {% include "snippets/form_spacing.html" %}
+
+
+ +

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. +

+ +

Select boxes

+

+ Avoid using select boxes (drop-down lists) - use radio buttons or checkboxes instead. +

+ +

+ + Discuss select boxes on the design patterns Hackpad + +

+ +

Radio buttons

+
    +
  • use these to let users choose a single option from a list
    • +
  • for more than two options, radio buttons should be stacked
    • +
  • radio buttons with large hit areas are easier to select with a mouse or touch devices
    • +
+ +

Inline radio buttons

+
+
+ {% include "snippets/form_radio_buttons_inline.html" %} +
+
+ +
+
+  {% include "snippets/form_radio_buttons_inline.html" %}
+
+
+ +

Stacked radio buttons

+
+
+ {% include "snippets/form_radio_buttons.html" %} +
+
+ +
+
+  {% include "snippets/form_radio_buttons.html" %}
+
+
+ +

Checkboxes

+
    +
  • use these to select either on/off toggles or multiple selections
    • +
  • make it clear with words when users can select one or multiple options
    • +
+ +

Stacked checkboxes

+
+
+ {% include "snippets/form_checkboxes.html" %} +
+
+ +
+
+  {% include "snippets/form_checkboxes.html" %}
+
+
+ +

Inline checkboxes

+
    +
  • large hit areas aren't always appropriate
    • +
  • only pre-select options if there's a strong, user-centred reason to
    • +
+ +
+
+ {% include "snippets/form_checkbox_native.html" %} +
+
+ +
+
+  {% include "snippets/form_checkbox_native.html" %}
+
+
+ +

+ + Discuss radio buttons and checkboxes on the design patterns Hackpad + +

+ +

+ Conditionally revealing content +

+
    +
  • reveal additional questions, depending on the context
    • +
  • a left border is used to emphasise this supporting information
    • +
+ +

+ Radio buttons +

+
+

Choose an option below to see how this works.

+
+ +
+
+ {% include "snippets/form_inset_radios.html" %} +
+
+ +
+

+ A grey left hand border is used to visually connect the revealed content with the question above. +

+
+ +
+
+  

+
+
+ +
+

+ The inset text section has more information on where and how to use panels (content with a grey left hand border). +

+
+ +
+
+  {% include "snippets/form_inset_radios.html" %}
+
+
+ +

+ In the code snippet above, the data-target="" attribute is present on every label, as each option reveals an extra field. +

+ +

+ Checkboxes +

+

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

+
+
+ {% include "snippets/form_inset_checkboxes.html" %} +
+
+ +
+
+  {% include "snippets/form_inset_checkboxes.html" %}
+
+
+ +

+ + Discuss conditional form fields on the design patterns Hackpad + +

+ +

Examples

+ + +

Ask one question per page

+
+

+ Recovering from errors can be hard for users, especially if a page contains multiple errors. +

+

+ Simplify forms by rewriting and where possible, splitting long forms across multiple pages - with each page asking a single question. +

+
+ +

+ Summarise errors at the top of the page +

+ +

+ You must: +

+ +
    +
  • show an error summary at the top of the page
    • +
  • include a heading to alert the user to the error
    • +
  • link to each of the problematic questions
    • +
+ +

Error message and summary box

+
+ {% include "snippets/form_error_radio_show_errors.html" %} +
+ +
+
+  {% include "snippets/form_error_radio_show_errors.html" %}
+
+
+ +
+

+ 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. +

+ +
+ {% include "snippets/form_error_multiple_show_errors.html" %} +
+ +
+
+  {% include "snippets/form_error_multiple_show_errors.html" %}
+
+
+ +

Examples

+ + +

Alpha banner

+
+ {% include "snippets/phase_banner_alpha.html" %} +
+ +
+
+  {% include "snippets/phase_banner_alpha.html" %}
+
+
+ +

Beta banner

+
+ {% include "snippets/phase_banner_beta.html" %} +
+ +
+
+  {% include "snippets/phase_banner_beta.html" %}
+
+
+ +

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. +

+ +
+
+ +