Style combination · Pairs well
GOV.UK Design × London Transport Design
Another British public system held together by fixed constants (one typeface, one emblem, a few colours); borrow its commissioned posters for campaigns that sit outside the plain service pages.
Mix them and make something GOV.UK Design London Transport Design
01
What each style brings
Each part of the design comes from the style with the stronger say in it, and each style gives at least two.
GOV.UK Design (GDS Style) London Transport Design
- Type from London Transport Design
-
GOV.UK Design avoids all caps: this is where the two pull against each other.
- Colour from London Transport Design
- Form from GOV.UK Design
- Composition from GOV.UK Design
- Surface from GOV.UK Design
02
The type
Open fonts standing in for each style’s own type, which is often hand-drawn or commercial.
Display · London Transport Design
Grid
Fira Sans, standing in for Edward Johnston's Underground sans (1916): two weights, ordinary and a capitals-only bold, with capitals on Roman square-capital proportions and diagonally set square dots on i and j; condensed letters followed for bus destination displays
Text · GOV.UK 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.
Inter; GOV.UK Design used GDS Transport and Transport, the British road-sign lettering by Jock Kinneir and Margaret Calvert (1957-1963), from which New Transport descends
03
The colours
The ground and leading colours come from London Transport Design, with a counter-accent from GOV.UK Design. The ink reads on the ground at 4.5:1 or more.
GOV.UK Design (GDS Style) London Transport Design
-
#f4f1e8ground · 36% -
#1c1c1cink · 14% -
#d0352baccent · 18% -
#1d70b8accent · 14% -
#d9a441accent · 10% -
#00782aaccent · 8%
As CSS
:root {
--ground: #f4f1e8;
--ink: #1c1c1c;
--accent-1: #d0352b;
--accent-2: #1d70b8;
--accent-3: #d9a441;
--accent-4: #00782a;
--font-display: "Fira Sans", sans-serif;
--font-text: "Inter", sans-serif;
}Use it with care
GOV.UK Design (GDS Style): 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.
London Transport Design: The roundel is a registered trade mark of Transport for London, which licenses it: draw your own emblem rather than reproducing it. New Johnston, used exclusively by TfL, and its 2016 successor Johnston100, which TfL commissioned from Monotype, are TfL's corporate typefaces; Johnston's 1916 design has been out of copyright since 2015, and for the historic letter use P22 Underground, the revival the London Transport Museum licensed to P22, or another humanist sans, not TfL's fonts. Some commissions served empire, such as Bawden's poster for the 1924 British Empire Exhibition, which the V&A describes as imperial propaganda that included human displays; do not reuse that imagery as neutral nostalgia.
04
The two styles
05
More combinations
With GOV.UK Design
- International Typographic Style Pairs well · Swiss flush-left grotesque setting and grid discipline give the same rational base; use it for printed and signage material that should read as the same voice.
- Corporate Memphis Contrasts · Corporate Memphis fills screens with flat cartoon people, which GOV.UK's guidance asks services to avoid; one reaches for friendliness through illustration, the other for inclusiveness through plain text.
- Flat Design Contrasts · Flat design leads with icons, tiles and bright colour fields; GOV.UK removes them and lets words and rules do the work. Compare both when deciding whether an icon helps or only decorates.
- Plain Tobacco Packaging Pairs well · Another state system of fixed constants where each colour has one job; borrow its plain wording and one-message-per-surface discipline for the leaflets and screens that sit around a health warning.
- British Road Signage (Kinneir & Calvert) Pairs well · GOV.UK sets a descendant of the same lettering, GDS Transport (reserved for its own services), flush left on white screens without the colour code or pictograms; pair the two when a public service needs signs and screens to speak in one voice.
- Penguin Paperback Design (Three Bands to the Marber Grid) Pairs well · Both are British systems that set one sans in fixed positions on white and let rules build the hierarchy; GOV.UK refuses pictures and gives each colour one job, so borrow Penguin's one colour per series when a text-led service has to sort many sections at a glance.
- Newsroom Data Graphics & Scrollytelling Pairs well · Both are plain public-information web design on a white column with colours that each have one job; set the charts inside GOV.UK-style plain-text pages for public data releases.
- Legible City Wayfinding (Heads-Up Pedestrian Maps) Pairs well · Civic, research-led and plain-spoken; pair the street maps with GOV.UK's plain screens for a public service that reads the same on the pavement and the phone.
With London Transport Design
- Isotype Pictorial Statistics Pairs well · Contemporary inventions of the public information graphic; pair Beck's schematic network with Neurath's counted pictograms for maps and statistics that share one flat, rational language.
- Plakatstil / Sachplakat Contrasts · The Sachplakat reduced every poster to one object and a brand name, while Pick let each artist choose a different picture inside a fixed frame; use the contrast to decide between one formula and a curated plurality.
- Corporate Identity Modernism Contrasts · The post-war corporate identity programmes kept the idea of one system across every touchpoint but swapped Johnston's humanist sans for neo-grotesques and the many commissioned artists for a standards manual; choose London Transport for a warm public voice, corporate modernism for neutral uniformity.
- Vorticism & BLAST Typography Pairs well · Set a Vorticist field of angular planes under calm, evenly spaced lettering for a poster that has machine-age energy but still reads as a public service.
- Hauntology & Ghost Box Design Pairs well · Borrow the logic of a public-service programme (fixed elements, a roundel, varied pictures within one system) to give an invented hauntological institution a believable house style.
- British Road Signage (Kinneir & Calvert) Contrasts · Pick's Underground also held one public system together with a sans and a few colours, but surrounded it with commissioned artists' posters; the road signs allow no art at all, so choose London Transport when a system needs a cultural voice and the road signs when it must only inform.
- Legible City Wayfinding (Heads-Up Pedestrian Maps) Pairs well · The parent: Legible London is a TfL system in TfL's New Johnston that extends the Underground's single-system idea from stations to the streets between them; borrow the discipline of one family repeated everywhere.
- Penguin Paperback Design (Three Bands to the Marber Grid) Pairs well · Both are British systems with a fixed emblem and a Johnston-to-Gill humanist sans; pair London Transport's commissioned pictorial art with Penguin's genre colour bands when one identity has to carry many varied items.