Beta This is new guidance. Complete our quick 5-question survey to help us improve it.

  1. Service manual
  2. Design
  3. Using the GOV.UK template, frontend toolkit and elements

GOV.UK provides 3 repositories to help teams across government design, build and iterate digital services:

Designers and developers can use these to:

  • create services with a consistent look and feel
  • prototype, test and get feedback quickly and easily
  • keep their services up to date with improvements from GOV.UK

Meeting the Service Standard

To pass point 13 (make the user experience consistent with GOV.UK) in your service assessments, you must show how your team is using the GOV.UK design patterns and repositories.

Working with the GOV.UK template (govuk_template)

You must use the GOV.UK template if your service has a or domain so it looks like the rest of GOV.UK.

You can find the GOV.UK template on GitHub. This provides a page template, including the GOV.UK header and footer and its assets.

It’s available in several languages and published to RubyGems and npm so that you can include it as a dependency in your project. For example:

We recommend that you use the most recent version of the GOV.UK template. Check that your version is up to date.

Adding the GOV.UK header

You can customise the template depending on the type of header you need.

Before choosing a header:

Working with the frontend toolkit

You can use the GOV.UK frontend toolkit to start building your frontend. This is a collection of Sass mixins (re-usable blocks of code) and JavaScript files that you can use as the starting point for your frontend. These will help you make your service consistent with GOV.UK.

We provide a variety of mixins including typography, grid layout and Sass variables for dimensions and colours. You’ll need to have Sass available to compile the files.

It’s available as a gem for Ruby and an npm package for Node.js.

Working with GOV.UK elements

Use the GOV.UK elements guide to make your service consistent with GOV.UK. This is a visual style guide for common UI elements (like layout, colour, typography and form elements).

GOV.UK elements uses the Sass variables and mixins from the frontend toolkit and shows you how these can be used in your project. It has code snippets you can copy and paste into the prototype kit, and to ensure your service is accessible.

Keeping your service up to date

You should check the GOV.UK template, frontend toolkit and elements repositories regularly and incorporate changes to keep your service up to date and consistent with the rest of GOV.UK.

These are updated frequently in response to feedback, research and evolving best practice.

You can find good examples of changes to libraries, including:

Checking for updates

Each resource on GitHub has a CHANGELOG file with a history of the resource and the changes made in each version. You can use semantic versioning to work out when updating this resource might have an impact, for example a breaking change that might need more work to integrate with your application.

You may also find these guides useful:

Published by:
Technology community (frontend development)
Last update:

Guidance first published