GOV.UK elements

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

Layout

Grid unit proportions, gutters and spacing.

Typography

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

Colour

Colour contrast, Sass variables, colour palettes.

Icons and images

Icons and image ratios.

Data

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

Buttons

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 .