Style combination · Pairs well
British Road Signage × GOV.UK Design
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.
Mix them and make something British Road Signage GOV.UK 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.
British Road Signage (Kinneir & Calvert) GOV.UK Design (GDS Style)
- Type from GOV.UK Design
- Colour from British Road Signage
- Form from British Road Signage
-
GOV.UK Design avoids pictogram: this is where the two pull against each other.
- Composition from British Road Signage
- 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 · GOV.UK Design
Grid
Inter Tight, standing in for Arial, the fallback in GOV.UK Frontend's font stack ('GDS Transport', arial, sans-serif)
Text · British Road Signage
The national sign system Jock Kinneir and Margaret Calvert designed for Britain's motorways, first used on the Preston By-pass in 1958, and through the Worboys Committee for all roads from 1 January 1965. Place names are set in mixed case in their Transport lettering, spaced on tiles measured in stroke widths. Colour codes the road (blue motorway, green primary with yellow numbers, white local, brown for tourism from the mid-1980s), red triangles warn and circles command with Calvert's pictograms, and junctions are drawn as maps: a kit of parts written into law.
Inter; British Road Signage used Transport (Jock Kinneir and Margaret Calvert, 1957–1963) and Motorway
03
The colours
The ground and leading colours come from British Road Signage, with a counter-accent from GOV.UK Design. The ink reads on the ground at 4.5:1 or more.
British Road Signage (Kinneir & Calvert) GOV.UK Design (GDS Style)
-
#ffffffground · 36% -
#111111ink · 14% -
#ffd200accent · 18% -
#d6001caccent · 14% -
#1d70b8accent · 10% -
#00653aaccent · 8%
As CSS
:root {
--ground: #ffffff;
--ink: #111111;
--accent-1: #ffd200;
--accent-2: #d6001c;
--accent-3: #1d70b8;
--accent-4: #00653a;
--font-display: "Inter Tight", sans-serif;
--font-text: "Inter", sans-serif;
}Use it with care
British Road Signage (Kinneir & Calvert): These signs carry legal force: the Traffic Signs Regulations and General Directions prescribe them, so borrow the method (mixed case, colour and shape codes, a kit of parts) but never make a look-alike that a road user could take for a real traffic sign. The lettering is licensed too: GDS Transport is reserved for GOV.UK services, and New Transport is a commercial typeface from A2-Type.
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.
04
The two styles
05
More combinations
With British Road Signage
- Isotype Pictorial Statistics Pairs well · Neurath's counted rows of figures and Calvert's single warning silhouettes share the flat black profile; combine them for public information that both explains a situation and tells people what to do.
- London Transport Design 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.
- Hand-Painted Signage & Vernacular Lettering Contrasts · The signwriter varies letter, flourish and colour for each job, where the Worboys kit fixes every letter and gap by regulation; set the two side by side to decide how much of a maker's hand a public sign can carry.
- HfG Ulm Systematic Design Contrasts · Both govern design by a written rule book, but Ulm ruled a company's print with a flush-left grid and one grotesque, while the Worboys kit rules roadside panels through colour, shape and pictogram codes read at speed; start from Ulm for a corporate programme and from the road signs when the reader is moving.
- Nutri-Score (Front-of-Pack Colour-Grade Label) Pairs well · Both are public signs built from a manual of fixed sizes, colours and clear zones; take the road-sign discipline when a colour-scale rating has to be applied by thousands of firms without drifting.
- Legible City Wayfinding (Heads-Up Pedestrian Maps) Contrasts · An influence from the same British public-information lineage, but road signs give drivers arrows and place names read at speed, while these totems give walkers a map to stand and read.
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.
- London Transport Design Pairs well · 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.
- 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.
- 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.