GOV.UK elements

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


Grid unit proportions, gutters and spacing.


Headings, body text, links, lists, inset text, hidden text.


Colour contrast, Sass variables, colour palettes.

Icons and images

Icons and image ratios.


Data in a table, numeric tabular data, data visualisation.


Button text, button alignment, creating buttons.

Form elements

Form fields, labels, focus states, radio buttons, checkboxes.

Errors and validation

Summary boxes, highlighting errors in forms.

Alpha and beta banners

How to create alpha and beta banners using the front-end toolkit.

Looking for the styles?

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

Want to discuss these patterns?

Discuss GOV.UK Design Patterns .