Beta This is new guidance. Complete our quick 5-question survey to help us improve it.
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 gov.uk/myservice or service.gov.uk 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:
- GOV.UK Verify uses the GOV.UK template as a Ruby Gem
- the GOV.UK prototype kit uses the Jinja version of the template
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:
- find out how to use the GOV.UK header and footer
- preview the 2 header types
- learn about making your service look like GOV.UK
Working with the frontend toolkit
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.
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:
- update to library code provided by the template
- fix skiplink for voiceover on iOS - accessibility improvements
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