Digital native · 2012–present · Western Europe

GOV.UK Design (GDS Style)

Also known as GOV.UK Design System, Government Digital Service design

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.

Make something in this style Get advice in this style Mix it with another style

A white poster reads “Check before you share” in oversized bold lettering, with “before” in blue and the other words in black. A blue bar sits above the headline, and a yellow bar separates it from smaller text encouraging readers to check facts before sharing online. — AI-generated by Stylogeny from the style’s design choices. Not a real or historical work.

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.

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)

Its design choices

From Stylogeny’s vocabulary of design choices: defining choices make the style, characteristic ones are usual, occasional ones turn up now and then.

Layout & composition: Column grid defining
Dynamic asymmetry occasional
Framed panels occasional
Space & hierarchy: Layered information characteristic
Generous white space characteristic
Measured density characteristic
Sequential narrative characteristic
Typography: Grotesque & neo-grotesque defining
Flush left, ragged right defining
Humanist sans occasional
Colour: Light ground defining
Limited spot colours characteristic
Flat fields characteristic
Monochrome occasional
Form & shape: Rectilinear defining
Surface & texture: Flat defining
Hard offset shadow occasional
Ornament: Rules & bars defining
Ornament-free defining
Emblems & badges occasional
Imagery: Typography only defining
Diagram & data occasional
Straight photography occasional
Medium & production: Web & CSS defining
App & OS interface occasional
Tone & intent: Rational & objective defining
Authoritative & institutional defining
Warm & 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

Make something in this style

Say what you need, and Stylogeny’s image studio draws it from GOV.UK Design (GDS Style)’s design choices and checks it against them. It takes about a minute, and you get a link to share.