GOV.UK Design System

# GOV.UK Design System — Design Style Reference

> **Unofficial, community-authored reference.** Compiled by [designsystems.one](https://www.designsystems.one). Not affiliated with, endorsed by, or sponsored by UK Government. "GOV.UK Design System" and related marks belong to their respective owners. This document describes publicly observable style attributes in original words — it contains no copied documentation, logos, icon artwork, or original token files. Always defer to the official source for canonical, current values.

**System:** GOV.UK Design System
**Owner:** UK Government
**Official documentation:** https://design-system.service.gov.uk/
**Visual character:** Radical civic plainness: Transport type, zero corner radius, yellow focus states, and every decision defensible in a public accessibility audit.

---

## Summary

Public-service design system with a serious accessibility commitment.

_Confidence: high. Values are drawn from well-documented public token references._

## Color tokens

| Color | Value | CSS variable | Role |
| --- | --- | --- | --- |
| GOV.UK Blue | `#1d70b8` | `--govuk-brand-colour` | Links and primary brand |
| Text Black | `#0b0c0c` | `--govuk-text-colour` | Primary text |
| Secondary Text | `#505a5f` | `--govuk-secondary-text-colour` | Secondary text |
| Page White | `#ffffff` | `--govuk-body-background-colour` | Page background |
| Light Grey | `#f3f2f1` | `--govuk-light-grey` | Panels and inset backgrounds |
| Green / Button | `#00703c` | `--govuk-button-colour` | Primary action (Start buttons) |
| Red / Error | `#d4351c` | `--govuk-error-colour` | Errors |
| Yellow / Focus | `#ffdd00` | `--govuk-focus-colour` | Focus state highlight |
| Border Grey | `#b1b4b6` | `--govuk-border-colour` | Borders |

## Typography

- **Body:** GDS Transport — weights 400, 700 — `'GDS Transport', arial, sans-serif`

## Type scale

| Step | Size | Line height |
| --- | --- | --- |
| heading-xl (48) | `48px` | `50px` |
| heading-l (36) | `36px` | `40px` |
| heading-m (24) | `24px` | `30px` |
| body (19) | `19px` | `25px` |
| body-s (16) | `16px` | `20px` |

## Spacing

Base unit: `5px (govuk spacing scale)`

Scale: `5px` · `10px` · `15px` · `20px` · `30px` · `40px` · `50px` · `60px`

## Corner radius

| Name | Value |
| --- | --- |
| default | `0` |

## Elevation / shadows

| Name | Value |
| --- | --- |
| button-shadow | `0 2px 0 #002d18` |

## Quick start (CSS)

```css
/* GOV.UK Design System — illustrative tokens, restated as CSS custom properties.
   Unofficial reference by designsystems.one; values are indicative, not
   canonical. Official reference: https://design-system.service.gov.uk/ */

:root {
  /* Color */
  --govuk-brand-colour: #1d70b8; /* Links and primary brand */
  --govuk-text-colour: #0b0c0c; /* Primary text */
  --govuk-secondary-text-colour: #505a5f; /* Secondary text */
  --govuk-body-background-colour: #ffffff; /* Page background */
  --govuk-light-grey: #f3f2f1; /* Panels and inset backgrounds */
  --govuk-button-colour: #00703c; /* Primary action (Start buttons) */
  --govuk-error-colour: #d4351c; /* Errors */
  --govuk-focus-colour: #ffdd00; /* Focus state highlight */
  --govuk-border-colour: #b1b4b6; /* Borders */

  /* Typography */
  --font-body: 'GDS Transport', arial, sans-serif;

  /* Type scale */
  --text-heading-xl-48-: 48px /* line-height 50px */;
  --text-heading-l-36-: 36px /* line-height 40px */;
  --text-heading-m-24-: 24px /* line-height 30px */;
  --text-body-19-: 19px /* line-height 25px */;
  --text-body-s-16-: 16px /* line-height 20px */;

  /* Spacing */
  --space-1: 5px;
  --space-2: 10px;
  --space-3: 15px;
  --space-4: 20px;
  --space-5: 30px;
  --space-6: 40px;
  --space-7: 50px;
  --space-8: 60px;

  /* Radius */
  --radius-default: 0;

  /* Elevation */
  --shadow-button-shadow: 0 2px 0 #002d18;
}
```

## Origin

The Government Digital Service (GDS) consolidated UK government services under GOV.UK starting in 2012. The design system formalized the patterns used across hundreds of public services and is now the reference for digital public service design.

## Governance

GDS owns the system; pattern proposals go through a public community process. Code is open source, MIT-licensed. Cross-government working groups review accessibility and content.

## Known for

- WCAG 2.2 AA conformance — components are tested against real assistive technology, not just automated checks.
- Plain-language content guidance — GOV.UK's writing style guide is widely used outside government.
- Form patterns engineered for users completing services under stress (benefits, tax, immigration).

## Underrated

- The error summary pattern (announce errors at the top, link to the field, focus management built in) is one of the best public references for accessible form errors.
- Question-page and check-your-answers patterns are battle-tested at population scale.

## Watch out for

- The visual language is intentionally functional, not branded. Lifting it into a commercial product means redesigning the look.
- Patterns are shaped by public-service needs — they may be heavier than needed for low-stakes consumer flows.

## Components worth studying

- **Error summary** — Top-of-page accessible error pattern with focus management.
- **Date input** — Three-field date input that handles keyboard, locale, and validation correctly.
- **Check your answers** — Confirmation pattern at the end of multi-step services.

## When to choose GOV.UK Design System

Adopt this system whole if you're building public services. Cherry-pick the form patterns and content style guide if you're building anything where users complete real tasks under pressure.

## Apply this style with an AI tool

Paste this into your AI coding assistant as a direction, then iterate:

> Design in the spirit of GOV.UK Design System by UK Government — Public-service design system with a serious accessibility commitment. Character: Radical civic plainness: Transport type, zero corner radius, yellow focus states, and every decision defensible in a public accessibility audit. Use a primary colour near #1d70b8, the typeface "GDS Transport" (or a close equivalent), corner radius around 0, a spacing rhythm on a 5px (govuk spacing scale) base. Lean into what it's known for: WCAG 2.2 AA conformance — components are tested against real assistive technology, not just automated checks. Match the intent, not the pixels; adapt it to my product rather than cloning it.

## Official references

- [GOV.UK Design System](https://design-system.service.gov.uk/)
- [GOV.UK Frontend (GitHub)](https://github.com/alphagov/govuk-frontend)
- [Content style guide](https://www.gov.uk/guidance/style-guide)

---

_Generated by [designsystems.one](https://www.designsystems.one/design-systems/gov-uk-design) — a catalogue of public design systems. Style facts are reported for reference and education; adapt them to your own product. Report issues or takedown requests via the site._