Style combination · Pairs well
GOV.UK Design × Newsroom Data Graphics
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.
Mix them and make something GOV.UK Design Newsroom Data Graphics
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) Newsroom Data Graphics & Scrollytelling
- Type from GOV.UK Design
- Colour from Newsroom Data Graphics
- Form from GOV.UK Design
- Composition from Newsroom Data Graphics
- 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
Form
Inter Tight, standing in for Arial, the fallback in GOV.UK Frontend's font stack ('GDS Transport', arial, sans-serif)
Text · Newsroom Data Graphics
The house style of newspaper graphics desks since about 2009–2011 (the New York Times graphics desk, D3.js, the Guardian Datablog): conventional charts drawn from the data, on a white or pale paper ground with light grey gridlines and no axis titles, lines labelled directly in place of a legend where possible and short annotations saying what to look at. A flush-left title states the finding and a source line closes the chart; one highlight colour picks out the story against grey context. In long-form pieces the graphic stays pinned while the text scrolls past and steps it through its states.
Inter; Newsroom Data Graphics used Helvetica and Arial
03
The colours
The ground and leading colours come from Newsroom Data Graphics, 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) Newsroom Data Graphics & Scrollytelling
-
#ffffffground · 36% -
#222222ink · 14% -
#faab18accent · 18% -
#ffdd00accent · 14% -
#1380a1accent · 10% -
#cbcbcbaccent · 8%
As CSS
:root {
--ground: #ffffff;
--ink: #222222;
--accent-1: #faab18;
--accent-2: #ffdd00;
--accent-3: #1380a1;
--accent-4: #cbcbcb;
--font-display: "Inter Tight", 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.
Newsroom Data Graphics & Scrollytelling: The look signals checked, sourced reporting: never use it to present invented, unsourced or AI-generated figures as data, always name the source, and do not copy a newspaper's proprietary typefaces, masthead or logo. Give every chart a text summary and do not let colour alone carry the meaning, for readers who use screen readers or cannot tell the highlight colours apart. In a mock-up or generated image the figures are invented: label them plainly as illustrative (for example 'Source: illustrative data'), and never attribute them to a real newspaper, agency, survey or person.
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.
- 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.
- 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.
- 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 Newsroom Data Graphics
- Dark Tech Minimalism Contrasts · The dark dashboard shows unannotated metrics in tiles for people who already know what to look for; the newsroom chart sits on white and tells a general reader in words what the data shows. Add a finding title and one annotation when a dashboard has to explain itself.
- Isotype Pictorial Statistics Pairs well · When the count is of people, swap the bar for an Isotype row of repeated figures and keep the newsroom's flush-left finding title, annotations and source line.
- International Typographic Style Pairs well · Swiss flush-left grotesque setting on a strict grid carries the chart style into print editions, posters and reports while keeping the same rational voice.
- Data Humanism Contrasts · Newsroom graphics use chart types readers already know, labelled directly so they can be read at a glance; data humanism invents a new hand-drawn code for each dataset and asks for slow reading. Use the newsroom chart for the finding, a hand-drawn data portrait for the people behind it.
- Legible City Wayfinding (Heads-Up Pedestrian Maps) Pairs well · Add the annotated locator maps of data journalism to explain a neighbourhood with the same heads-up clarity.
- Instagram Slideshow Activism (Social-Justice Infographics) Contrasts · Sourced charts with a stated finding are the next step from a slide of bare bullet-point claims; the source line on every slide is common ground, since @soyouwanttotalkabout's maker said hers stood out for 'including sources at the bottom of every slide'.
- Sketchnoting and Graphic Recording Contrasts · Drawn live from speech rather than constructed from data; the pairing makes a plain summary more personal.