# GOV.UK Design (GDS Style)

> The text-led design of GOV.UK, the UK government's single website, built by the Government Digital Service from 2012 and codified in the GOV.UK Design System (2018). Pages are white, with the main content in a two-thirds column set flush left and in sentence case in GDS Transport, a cut of Kinneir and Calvert's road-sign lettering, in two weights. Pictures and icons are avoided. Size, weight and thick rules build the hierarchy, each colour has one job (yellow marks only keyboard focus), and services ask one question per page.

- Period: 2012–present
- Where: Western Europe
- Origin: London: the Government Digital Service (GDS) in the Cabinet Office, formed in 2011 after Martha Lane Fox's report 'Directgov 2010 and Beyond: Revolution Not Evolution' (November 2010). Its AlphaGov prototype (11 May 2011) became GOV.UK, which launched in beta on 31 January 2012 under Ben Terrett, GDS's Director of Design from 2011 to 2015, and replaced Directgov and Business Link's online services on 17 October 2012. GDS introduced the GOV.UK Design System in 2018. GOV.UK came out of the same turn away from simulated materials as flat design, but it is that turn's text-led, public-service branch: its guidance asks services to avoid icons in most cases, where flat design kept simplified icons and colour fields, from Metro's flat-coloured live tiles (Windows Phone 7, 2010) to the later, flatter icons of iOS 7 (2013)
- Branch: Digital native
- Also known as: GOV.UK Design System, Government Digital Service design
- Page: https://stylogeny.com/styles/govuk-design-system/

## Use it with care

GOV.UK's branding belongs to the UK government's own services. The Design System tells services that are not part of GOV.UK to replace its branded assets, use a header without GOV.UK branding, use an alternative to the GDS Transport font and drop the GOV.UK brand blue. Borrow the approach, not the identity, and never make a page that could pass as an official government service.

## How it works

- Start with the user's need and cut everything else: design for small screens first from a single column, put the main content in a two-thirds column on wider screens, keep lines to about 75 characters and leave the remaining third empty or give it to related links.
- Set every word in one sans-serif, flush left and in sentence case, in two weights on a fixed type scale: set headings in bold, avoid italics and block capitals, and in running text keep bold for telling users what to do, never for emphasis.
- Let the words carry the page: use an image only where there is a real user need, avoid icons in most cases and add nothing for decoration.
- Show structure with weight and rules: thick black borders on form inputs, a heavy left bar beside inset text and errors, and square buttons with a solid bottom edge.
- Give each colour one job and use it only in the context it is designed for: near-black text, links underlined in their own link blue (#1a65a6, apart from the brand blue #1d70b8), a green start button, red for errors and yellow only for keyboard focus.
- Break a transaction into a sequence of short pages, one question per page, each with a Back link and a left-aligned Continue button, and reuse the shared components instead of restyling them.

## Its design choices

Defining choices make the style, characteristic ones are usual, occasional ones turn up now and then.

### Layout & composition
- [Column grid](https://stylogeny.com/design-choices/column-grid/) (defining)
- [Dynamic asymmetry](https://stylogeny.com/design-choices/dynamic-asymmetry/) (occasional)
- [Framed panels](https://stylogeny.com/design-choices/framed-panels/) (occasional)

### Space & hierarchy
- [Layered information](https://stylogeny.com/design-choices/layered-information/) (characteristic)
- [Generous white space](https://stylogeny.com/design-choices/generous-white-space/) (characteristic)
- [Measured density](https://stylogeny.com/design-choices/measured-density/) (characteristic)
- [Sequential narrative](https://stylogeny.com/design-choices/sequential-narrative/) (characteristic)

### Typography
- [Grotesque & neo-grotesque](https://stylogeny.com/design-choices/grotesque-and-neo-grotesque/) (defining)
- [Flush left, ragged right](https://stylogeny.com/design-choices/flush-left-ragged-right/) (defining)
- [Humanist sans](https://stylogeny.com/design-choices/humanist-sans/) (occasional)

### Colour
- [Light ground](https://stylogeny.com/design-choices/light-ground/) (defining)
- [Limited spot colours](https://stylogeny.com/design-choices/limited-spot-colours/) (characteristic)
- [Flat fields](https://stylogeny.com/design-choices/flat-fields/) (characteristic)
- [Monochrome](https://stylogeny.com/design-choices/monochrome/) (occasional)

### Form & shape
- [Rectilinear](https://stylogeny.com/design-choices/rectilinear/) (defining)

### Surface & texture
- [Flat](https://stylogeny.com/design-choices/flat/) (defining)
- [Hard offset shadow](https://stylogeny.com/design-choices/hard-offset-shadow/) (occasional)

### Ornament
- [Rules & bars](https://stylogeny.com/design-choices/rules-and-bars/) (defining)
- [Ornament-free](https://stylogeny.com/design-choices/ornament-free/) (defining)
- [Emblems & badges](https://stylogeny.com/design-choices/emblems-and-badges/) (occasional)

### Imagery
- [Typography only](https://stylogeny.com/design-choices/typography-only/) (defining)
- [Diagram & data](https://stylogeny.com/design-choices/diagram-and-data/) (occasional)
- [Straight photography](https://stylogeny.com/design-choices/straight-photography/) (occasional)

### Medium & production
- [Web & CSS](https://stylogeny.com/design-choices/web-and-css/) (defining)
- [App & OS interface](https://stylogeny.com/design-choices/app-and-os-interface/) (occasional)

### Tone & intent
- [Rational & objective](https://stylogeny.com/design-choices/rational-and-objective/) (defining)
- [Authoritative & institutional](https://stylogeny.com/design-choices/authoritative-and-institutional/) (defining)
- [Warm & approachable](https://stylogeny.com/design-choices/warm-and-approachable/) (occasional)

Avoids: All caps, Eclectic mixing, Ornamented display, Icons & pictograms, Pictogram, Rounded & pill, Gradients, Gloss & highlights, Illusion of depth, Abundant decoration

Palette: #ffffff, #0b0c0c, #1d70b8, #ffdd00, #0f7a52, #ca3535

Typefaces: GDS Transport: GOV.UK's custom version of New Transport (Henrik Kubel of A2-Type with Margaret Calvert, 2012), the sole font, used in regular (400) and bold (700); services on service.gov.uk must use it, Transport, the British road-sign lettering by Jock Kinneir and Margaret Calvert (1957-1963), from which New Transport descends, Arial, the fallback in GOV.UK Frontend's font stack ('GDS Transport', arial, sans-serif)

Known for: GOV.UK, built by the Government Digital Service with Ben Terrett as Director of Design: beta from 31 January 2012, replacing Directgov and Business Link's online services on 17 October 2012; Government Design Principles, first published on 3 April 2012 and co-authored by Ben Terrett ('Start with user needs', 'Do the hard work to make it simple', 'This is for everyone', 'Be consistent, not uniform'); GOV.UK named overall Design of the Year 2013 at the Design Museum, London (16 April 2013), the first digital project to win the award; GDS Transport (2012), GOV.UK's custom version of New Transport by Henrik Kubel of A2-Type and Margaret Calvert, chosen as the site's sole font; GOV.UK Design System (2018), with its coded GOV.UK Frontend components: shared styles, components and patterns, including question pages that ask one question per page, the green start button, inset text marked by a 10px left border and a 5px red left bar on fields with errors; GOV.UK brand refresh (from 25 June 2025): a blue header in place of the black one, with the logo's light-blue dot raised between GOV and UK, and animation for the GOV.UK App and social media

## Where it comes from, and what it’s close to

- Grew out of: [Flat Design](https://stylogeny.com/styles/flat-design.md) (2010–2016)
- Influenced by: [International Typographic Style](https://stylogeny.com/styles/swiss-international.md) (1950–1975)
- Alike in its design choices: [Newsroom Data Graphics & Scrollytelling](https://stylogeny.com/styles/newsroom-data-graphics.md) (2009–present), 78% alike
- Alike in its design choices: [Contemporary Arabic & Dual-Script Type Design](https://stylogeny.com/styles/arabic-latin-bilingual-type.md) (2004–present), 76% alike
- Alike in its design choices: [Neo-Swiss Revival](https://stylogeny.com/styles/swiss-revival.md) (2005–present), 73% alike
- Alike in its design choices: [Die Neue Typographie](https://stylogeny.com/styles/new-typography.md) (1923–1940), 67% alike
- Alike in its design choices: [Total Design & Dutch Functionalism](https://stylogeny.com/styles/dutch-total-design.md) (1963–1990), 64% alike
- Alike in its design choices: [Brutalist Web Design](https://stylogeny.com/styles/web-brutalism.md) (2014–present), 63% alike

## Sources

- Wikipedia, 'GOV.UK' (https://en.wikipedia.org/wiki/GOV.UK)
- Wikipedia, 'Government Digital Service' (https://en.wikipedia.org/wiki/Government_Digital_Service)
- Wikipedia, 'Ben Terrett' (https://en.wikipedia.org/wiki/Ben_Terrett)
- Wikipedia, 'Transport (typeface)' (https://en.wikipedia.org/wiki/Transport_(typeface))
- Wikipedia, 'Metro (design language)' (https://en.wikipedia.org/wiki/Metro_(design_language))
- Wikipedia, 'iOS 7' (https://en.wikipedia.org/wiki/IOS_7)
- Dezeen, 'UK government website wins Designs of the Year 2013' (16 April 2013) (https://www.dezeen.com/2013/04/16/gov-uk-government-website-wins-designs-of-the-year-2013/)
- GOV.UK, Government design principles (https://www.gov.uk/guidance/government-design-principles)
- GOV.UK, Changes to GOV.UK (25 June 2025) (https://www.gov.uk/guidance/changes-to-govuk)
- GOV.UK Design System, Styles (https://design-system.service.gov.uk/styles/), Layout (https://design-system.service.gov.uk/styles/layout/), Colour (https://design-system.service.gov.uk/styles/colour/), Typeface (https://design-system.service.gov.uk/styles/typeface/), Images (https://design-system.service.gov.uk/styles/images/) and Links (https://design-system.service.gov.uk/styles/links/)
- GOV.UK Design System, Question pages (https://design-system.service.gov.uk/patterns/question-pages/) and Button (https://design-system.service.gov.uk/components/button/)
- GOV.UK publishing guidance, A to Z style guide (https://guidance.publishing.service.gov.uk/writing-to-gov-uk-standards/style-guides/a-to-z-style-guide/)
- GOV.UK Frontend, Using GOV.UK Frontend without GOV.UK branding (https://frontend.design-system.service.gov.uk/using-govuk-frontend-without-govuk-branding/)
- GOV.UK Frontend source, objects/_form-group.mixin.scss, components/button/_mixin.scss, settings/_measurements.scss, settings/_typography-font.scss and settings/_colours-palette--internal.scss (https://github.com/alphagov/govuk-frontend)

---

From Stylogeny (https://stylogeny.com/), an atlas of graphic-design styles by Van Riel Online Services. How it is made: https://stylogeny.com/about/. Cite as: Stylogeny, “GOV.UK Design (GDS Style)”, https://stylogeny.com/styles/govuk-design-system/