GOV.UK DESIGN.md

Design System Inspiration of GOV.UK

Overview

Visual Theme & Atmosphere

GOV.UK is the UK government's website for services and information, maintained by the Government Digital Service. It brings citizen and business services, professional guidance, and government information into one place. Its public launch on 17 October 2012 replaced Directgov and Business Link; the GOV.UK Design System followed in June 2018, bringing shared styles, components and patterns together for government service teams. About GOV.UK, launch announcement, Design System introduction.

The homepage combines a broad blue header and white headline with a white, text-led service directory. Its measured paragraph ink is near-black, its links are underlined blue, and its six sampled controls have square corners. Keyboard focus changes the interface visibly: yellow backgrounds and dark underline shadows on links, and yellow outlines with dark inset edges on search controls. These are observations from the homepage, rather than a rule that every GOV.UK component shares identical geometry.

The identity is evolving across channels. The June 2025 refresh introduced a blue header, a raised light-coloured dot in the wordmark, more colour, and animation primarily for the app and social channels. Current brand guidance names Primary blue and Accent teal as its core colours and describes a range from informative to inspiring, with web at the informative end. Build the web reference around readable content and clear tasks while retaining that newer blue-and-teal identity. Changes to GOV.UK, brand introduction, core colours.

The measured page is the English homepage at www.gov.uk/, HTML lang="en", captured with en-GB; there was no regional redirect. The cookie banner remained visible because the probe did not recognise “Reject additional cookies”; the state observations below retain that capture condition.

Primary tasks supported by the opened sources are finding services and information, following task statuses, correcting validation errors through linked error summaries, and retaining a transaction reference and next steps on a confirmation page. Task list, error summary, confirmation pages.

Brand Narrative

GOV.UK's 2012 launch framed the site as a single domain organised around what people need to do. The announcement identified GDS as the Cabinet Office team that built it, and described a staged migration beginning with Directgov and Business Link. The 2018 Design System introduction brought previously dispersed patterns and code together and established shared, supported resources for government teams. 2012 launch, 2018 introduction.

That continuity now includes a broader identity for web, app and social media. The refreshed wordmark, dot, colour and motion are explicitly intended to work in those different contexts. The guidelines allow a reserved style for sensitive topics and a brighter expression for positive content. The homepage reference remains grounded in the informative web surface while acknowledging that wider brand range. Brand introduction.

Principles

The official Government Design Principles begin with user needs, ask teams to reuse useful work, design with data, simplify difficult tasks and iterate. They also require inclusive design, attention to context, consistency that allows necessary differences, open sharing, and minimising environmental impact. The final principle was added in April 2025. Government Design Principles.

For implementation, the Service Manual describes progressive enhancement as starting with functional HTML, then adding CSS and JavaScript. It also acknowledges cases in which core functionality needs JavaScript and requires consideration of access through other channels. This is more precise than claiming that no component can rely on JavaScript. Progressive enhancement.

Official public-sector guidance describes the accessibility regulations that came into force in September 2018 and the requirements to meet WCAG 2.2 AA and publish an accessibility statement, while acknowledging possible legal exceptions. Public-sector accessibility requirements.

The Design System colour guidance requires WCAG 2.2 AA minimum text and interactive-element contrast. This reference records GOV.UK's actual yellow focus design; it does not claim that WCAG specifies that hexadecimal colour.

Personas

No named personas were verified; the official audience description covers UK residents, British citizens abroad, and people abroad who want to do business in or travel to the UK. Use clear language.

Colors

The homepage census contains 24 first-party --govuk-* custom properties. Its most frequent paragraph colour is #0b0c0c across 26 paragraphs; the most frequent text colour overall is the link colour #1a65a6, across 76 text-bearing elements. Use paragraph ink to identify the body foreground.

The retained service-button and tag colours below come from the opened Design System CSS and examples. They describe official service components, not additional homepage state measurements.

The homepage search submit also uses #d2e2f1, with #1d70b8 for its icon. Its hover background is #f4f8fb.

The Design System explicitly assigns colours by purpose through govuk-functional-colour, including "brand", "text" and "error". Use govuk-colour for palette colours outside those functional roles. Its guidance reserves focus yellow for focus and permits supporting palette colours for illustrations or appropriate custom components. Colour guidance, served component CSS.

Typography

Official product use. The brand guidelines name GDS Transport as GOV.UK's typeface. They trace it to Jock Kinneir and Margaret Calvert's road-sign typeface and say GDS adapted it for digital use in 2012. The official names of its two weights are Light and Bold; the site's CSS maps them to normal/400 and bold/700. The Design System requires GDS Transport for services on service.gov.uk. Brand typography, typeface guidance.

Live-loaded. The homepage font census reports GDS Transport normal normal and GDS Transport bold normal as loaded. Body, H1 and the first button declare "GDS Transport", arial, sans-serif. The measured search input uses 19px/400, and the Menu label uses 16px/700.

Official distributed assets. The live @font-face rules reference same-origin Light and Bold files in WOFF2 and WOFF under /assets/frontend/. Their CSS says the cut was customised for exclusive use on gov.uk and is not commercially available. The font binaries were not separately downloaded or inspected. This is font-distribution evidence from the served stylesheet, not permission for unrelated products to use the cut. Homepage stylesheet.

Declared-only. arial and generic sans-serif occur in the CSS stack, but are not loaded web faces in the census. The icon-only Search submit has a computed Arial family and 13.3333px/400 metric; its visible magnifying glass is an SVG. That declaration does not become the product typeface or a specimen. The logo is also an SVG; its 30px computed font metric does not describe the wordmark outlines.

Unresolved. No additional product font or 14px caption role was verified. Substitute: none chosen.

The published type scale uses line heights in multiples of 5px. Heading classes express visual hierarchy independently from HTML heading level; official examples use govuk-heading-l for an H1 on question pages and govuk-heading-xl for an H1 in long-form content. Headings use sentence case. Type scale, headings, paragraphs.

The six measured controls report normal letter spacing. This supports those controls' treatment; it does not establish a system-wide prohibition on tracking.

Layout

Use the documented small-screen-first, single-column starting point. The Design System recommends two-thirds or two-thirds-and-one-third layouts for most page types and a main reading column no longer than about 75 characters. The published layout guide calls its default maximum page width 1020px; the served .govuk-width-container rule separately has a 960px content maximum, with 15px narrow-screen margins and 30px wider-screen margins before centring. Keep those documented page-width and CSS content-width facts distinct. Layout.

The static spacing scale is 0, 5, 10, 15, 20, 25, 30, 40, 50, 60 pixels, exposed through govuk-spacing. The responsive scale retains units 0–3, then maps small/large screens as 15/20, 15/25, 20/30, 25/40, 30/50 and 40/60. The guide uses the tablet breakpoint of approximately 640px to distinguish those scales. Spacing.

The measured desktop screenshot places the blue hero before “Popular on GOV.UK”, then the services directory. The served homepage CSS gives the hero search a two-thirds width at its tablet breakpoint and the popular-links list three columns at its desktop breakpoint. It uses 60px section padding in several desktop sections, a 40px bottom margin for the headline, and 32px bottom padding on popular-link items. These are homepage rules, not a universal spacing mandate. The heading CSS also varies bottom margins by class and breakpoint, so use those classes rather than a single fixed 25/20/15px hierarchy.

Responsive Behavior

Only the 1440×1000 desktop viewport was rendered. The following are source rules, not a mobile-device test.

The homepage census exposes --govuk-breakpoint-mobile: 20rem, --govuk-breakpoint-tablet: 40.0625rem and --govuk-breakpoint-desktop: 48.0625rem. Its served CSS uses corresponding em breakpoints. The homepage headline span steps through 2.5rem, 3.125rem, 3.4375rem and 4rem, with the last step at 1281px. Popular links change from one column to three at 48.0625em.

The current published small-screen type scale is Heading XL 32px/35px, Heading L 27px/30px, Heading M and lead body 21px/25px, default body and Heading S 19px/25px, and small body 16px/20px. Large-screen values are in §3. The Design System identifies this updated small-screen scale as a GOV.UK Frontend v6 change. Type scale.

The official layout guide says to start with a single column and design for screen sizes rather than assuming a particular device. A universal 44px button target, mobile menu interaction, and checkbox/radio hit areas were not measured in this capture.

Elevation & Depth

At rest, the six measured homepage controls have no box shadow. Focus adds a functional edge: search controls use a 4px inset shadow; text and logo links use the yellow top and near-black bottom shadow described above.

Official service buttons use a 2px bottom shadow, coloured #083d29, #858686 or #651b1b for default, secondary and warning variants. Their :active CSS moves the button down by 2px. This documents the service button treatment without making a system-wide claim that no other shadow or elevation can exist. Served service CSS.

Values kept in prose

Measured values the DESIGN.md token grammar cannot carry, kept verbatim:

• shadow.button: 0 2px 0 #083d29
• shadow.button-secondary: 0 2px 0 #858686
• shadow.button-warning: 0 2px 0 #651b1b
• shadow.focus: 0 -2px #ffdd00, 0 4px #0b0c0c

Motion & Easing

All six captured control identities have the raw computed transition string all 0s ease 0s. No transition duration or easing token beyond that observation is assigned here. The measured hover and focus changes are settled style changes; the Menu's opened state and service accordions were not exercised.

The official brand refresh separately introduces animation into the identity, primarily for the app and social channels. That channel-level direction does not supply timings for these homepage controls. Changes to GOV.UK.

Components

Six homepage controls were measured at 1440×1000. Every hover snapshot matched :hover, every pressed snapshot matched :active, and focus came from a real Tab walk. The cookie banner stayed open. No dialog was closed and no overlay was hidden. Heights below are the selected elements' bounding boxes, which can be smaller than the surrounding card or action row.

For the home, HMRC and Benefits links, the focus shadow is exactly 0 -2px #ffdd00, 0 4px #0b0c0c. Focus changes did not persist after blur. The focus indicators are authored styles, not a browser auto outline. The pointer-pressed snapshots include the element's simultaneous focus state; they are not isolated :active rules.

The search input's “no change” hover verdict covers itself, ::before/::after, zero descendants, and three ancestor levels with their pseudo-elements, across the probe's colour, border, outline, shadow, transform, opacity, decoration, background, mask, geometry and image/SVG properties. It does not claim absence of pixel-only or out-of-scope changes. The HMRC arrow is a sibling outside its selected link, and is not included in that link's state claim.

Official service components retained from the prior reference

These are current documentation and stylesheet facts. They were not additional browser state captures, and are not exported as measured interactive components. The opened standalone examples establish the element labels and CSS classes. Button, text input, select, tag, inset text, notification banner.

The service-button CSS declares hover backgrounds #0b5c3e, #cecece and #982828 for default, secondary and warning variants. On focus it sets a yellow border, a 3px transparent outline and a 1px yellow inset shadow; the :focus:not(:active):not(:hover) rule additionally sets yellow background, dark text and a 2px dark bottom shadow. Those are published selectors, not measured service-button states.

The visible cookie buttons separately confirm a green background, white 19px/400 label, 38px height, radius 0 and padding 8px 10px 7px in the survey. They are consent controls and are excluded from exported components.

The official index still lists 37 components: Accordion, Back link, Breadcrumbs, Button, Character count, Checkboxes, Cookie banner, Date input, Details, Error message, Error summary, Exit this page, Feedback, Fieldset, File upload, Generic header, GOV.UK footer, GOV.UK header, Inset text, Language navigation, Notification banner, Pagination, Panel, Password input, Phase banner, Radios, Select, Service navigation, Skip link, Summary list, Table, Tabs, Tag, Task list, Text input, Textarea, Warning text. The separate patterns index lists 30 task or page patterns, including addresses, bank details, check answers, confirm an email address, create accounts, question pages and step-by-step navigation. Index membership is not a measurement of those components. Components index, patterns index.

States

The measured rest, hover, pressed and keyboard-focus treatments are in §4. No disabled control was measured. The declared visited colour is retained as a token role, rather than described as an observed navigation state.

The opened service documentation adds the following behaviour:

• Task status: task rows communicate what is done and what remains; current Task list guidance uses black text without a background for “Completed” so incomplete work receives more attention. Task list.
• Validation errors: show both an error summary and a message beside each invalid answer. The summary has the heading “There is a problem”, links to the answers and receives keyboard focus. Error text should explain the correction and retain the user's existing answers. The served CSS uses a 5px red left border on the error form group and a red border on an input with govuk-input--error; the error message is 19px/700. Error summary, error message, served CSS.
• Service unavailable: use a dedicated page headed “Sorry, the service is unavailable”, with availability information, what happened to answers where relevant, and useful contact or alternative-service details. The pattern distinguishes planned closure from a service problem. Service unavailable pages.
• Transaction complete: use a confirmation page with a reference if one exists, next steps, contact details and a way to save the transaction. The published green panel has white type; the opened example and CSS do not establish a checkmark requirement. Confirmation pages.
• An expected action completes within a wider journey: a green notification banner can acknowledge it; linear services usually use a confirmation page instead. The guidance removes a green banner when the user moves to another page. Notification banner.
• Disabled CSS: the served .govuk-button[disabled] rule sets opacity to 0.5, and its disabled hover sets the cursor to not-allowed. The service input's disabled rule sets opacity 0.5, inherited colour and transparent background. The documented disabled-button HTML also includes disabled and aria-disabled="true". These are source declarations, not measured disabled states; the button guidance advises avoiding disabled buttons unless research supports them. Button guidance, served CSS.

Empty search results, submission loading and skeleton states were not verified.

Do's and Don'ts

• Use GDS Transport only within its documented product and distribution conditions. Keep its Light/400 and Bold/700 distinction; no substitute has been chosen here.
• Use the functional colour roles in their intended contexts and preserve visible keyboard focus. Reserve #ffdd00 for focus, as the colour guidance says.
• Reproduce the sampled homepage controls with 0px corners. Keep the documented Tag's 1px radius when implementing that component.
• Use the green default service button for a main service action, the secondary variant for a secondary action, and warning red sparingly for serious destructive actions. Keep the documented bottom shadow.
• Keep paragraph ink #0b0c0c distinct from link #1a65a6, brand #1d70b8, and the homepage search's #000000 ink.
• Write headings and button labels in sentence case. Make an action's meaning clear in its words; colour alone does not explain a destructive action.
• Keep status tags non-interactive. Use text alongside status colour, as the Tag guidance requires.
• Choose colours from the published palette. The brand guidelines prohibit mixed-colour gradients, while permitting a single-colour gradient over imagery; the web palette also explicitly allows supporting illustration colours. Brand colour rules.

Voice & Tone

Current GOV.UK content guidance requires plain English, short paragraphs and clear actions. It recommends active voice while allowing specific exceptions, addresses the user as “you”, and asks for conversational writing with the authority to help. Its tone is specific, informative, clear, concise and human. It says there is usually no need for “please”; that is not a blanket ban. Specialist terms may be necessary, but should be explained on first use. Use clear language, use the right tone.

Button guidance distinguishes “Continue” when information is not saved from “Save and continue” when it is, and gives “Start now”, “Sign in” and “Confirm and send” for their respective tasks. Error guidance asks for an explanation of what went wrong and how to fix it, using language from the field label. Hints can give a concrete format, such as “For example, 27 3 2007” in the error-message example. Link guidance rejects generic labels such as “click here” in favour of descriptive text. Button labels, error messages, effective links.

Agent Prompt Guide

Use #1d70b8 for the homepage header, #00ffe0 for the wordmark's accent dot, #ffffff for the page, #0b0c0c for paragraph ink, #1a65a6 for links, #0f385c for link hover and #ffdd00 for focus. The declared visited colour is #54319f. Official service buttons use #0f7a52 with shadow #083d29; the documented tag uses #d2e2f1 / #0f385c.

Example prompts grounded in the captured controls and opened component sources:

• “Build the GOV.UK homepage search field: 50px high, 6px padding, 19px/400 GDS Transport, white with black ink and no rest border. On keyboard focus, add a 3px yellow outline at offset 0 and a 4px black inset edge.”
• “Place a 50px square search icon button beside it: #d2e2f1 background, blue magnifying glass, no rounding or rest shadow; hover to #f4f8fb; keyboard focus adds the yellow outline and a near-black 4px inset edge.”
• “Build a Benefits directory card link in 19px/700 GDS Transport on white. Rest link #1a65a6, hover #0f385c, and focus yellow with dark text, dark chevron and the measured two-part underline shadow. Keep the inline-label box separate from the card layout.”
• “For a service page, use the documented .govuk-button: green, white 19px/400 label, padding 8px 10px 7px, radius 0 and a 2px darker-green bottom shadow. Use the official component CSS for its states.”
• “For a status label, use the documented 1px-radius tag, padding 2px 8px 3px and dark blue text on pale blue. Keep it non-interactive.”
• “For an informational banner, use a blue title strip and border above a white content area with dark text.”

During iteration, check the actual selected element, visible label or SVG, surrounding background, and keyboard focus. Use the published type scale and component classes instead of imposing a blanket 19px label rule or a blanket zero-radius rule.

Governance

Known Gaps

• Contrast, search-submit. Text #1d70b8 on #d2e2f1 measures 3.91:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.