GOV.UK Design System

The system behind GOV.UK. Plain, robust, and accessibility-first, built for the whole population, often mid-stress.

Why we like it

GOV.UK is the closest thing the field has to a reference for accessibility and resilience at scale, and what we admire is that it argues from evidence. Progressive enhancement is the rule because they measured that 0.9% of visits come from people without JavaScript available, so services are built to work on semantic HTML first.

It also fixes accessibility once, centrally: GOV.UK Frontend v5 shipped WCAG 2.2 AA-compliant components, and hundreds of services inherit those fixes just by upgrading the shared package. The system reaches past components into documented patterns for whole tasks and page types, the shape of a real service rather than a parts bin.

Where it fits

GOV.UK fits public-sector and other high-accessibility, form-and-transaction-heavy services that need the widest device and assistive-tech reach, and multi-team orgs that can standardize on one frontend package. Its typeface, GDS Transport, is licensed for service.gov.uk, so off-domain services substitute another face.

Ideas to borrow

  1. 01.

    Accessibility practice

    Fix accessibility once in a shared frontend package, so every consuming service inherits compliance on upgrade rather than re-solving it.

  2. 02.

    Accessibility practice

    Justify progressive enhancement with your own measured no-JS rate, so the decision rests on evidence rather than assumption.

Screenshots

Fig. 1The GOV.UK Tag component page, with a single 'Completed' tag in a resizable example frame and HTML and Nunjucks implementations below.
Fig. 2GOV.UK's pattern for asking users for bank details, showing a form with name, sort code, and account number fields, each carrying its format requirement as hint text.
Fig. 3The design system's 'Join the conversation' page, with illustrated cards for its Slack channel, issue discussions, and other contribution routes.
Fig. 4GOV.UK footer guidance, with a worked example carrying the Open Government License statement and the royal coat of arms.

Further reading

Related