UK Government · Design system breakdown
Public-service design system with a serious accessibility commitment.
A community-authored style reference in Markdown — colors, type, spacing, and an AI-ready prompt. Unofficial; not affiliated with UK Government.
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.
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.
The identity-bearing decisions, rendered. Names and values are illustrative — refer to the system's official tokens reference for the canonical, current set.
govuk-colour-blue
Link / primary action
govuk-colour-black
Default text
govuk-colour-red
Error
govuk-spacing-3
Default vertical rhythm
govuk-focus-colour
High-contrast focus indicator
govuk-border-width-form-element
Form field border
Exactly what ships in gov-uk-design-design.md — plus the same token snapshot restated as CSS custom properties. Copy either, or feed the Markdown straight to an AI coding tool as styling context.
# 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/ --- ## Summary Public-service design system with a serious accessibility commitment. ## 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. ## Design tokens (illustrative) Representative token values, restated as facts for reference. Names and values are illustrative — refer to the official tokens reference for the canonical, current set. | Token | Value | Role | | --- | --- | --- | | `govuk-colour-blue` | `#1d70b8` | Link / primary action | | `govuk-colour-black` | `#0b0c0c` | Default text | | `govuk-colour-red` | `#d4351c` | Error | | `govuk-spacing-3` | `15px` | Default vertical rhythm | | `govuk-focus-colour` | `#ffdd00` | High-contrast focus indicator | | `govuk-border-width-form-element` | `2px` | Form field border | ## Style brief The identity-bearing decisions, at a glance: - **Brand / primary action:** `#1d70b8` (Link / primary action) - **Body text:** `#0b0c0c` (Default text) - **Base spacing:** `15px` (Default vertical rhythm) ## 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. Use a primary action colour near #1d70b8, and a restrained, consistent scale. 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._
If you're evaluating this 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.
Where next
