Style combination · Contrasts
Flat Design × GOV.UK Design
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.
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.
Flat Design GOV.UK Design (GDS Style)
- Type from GOV.UK Design
- Colour from Flat Design
- Form from GOV.UK Design
- Composition from GOV.UK Design
- Surface from Flat 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
Order
Inter Tight, standing in for Arial, the fallback in GOV.UK Frontend's font stack ('GDS Transport', arial, sans-serif)
Text · Flat Design
An interface and illustration language that stripped screens of simulated materials, replacing bevels, gloss and textures with solid fields of colour, clean sans-serif type and reduced pictograms. Formalised in Microsoft's Metro design language (Windows Phone 7, 2010) and made mainstream by Apple's iOS 7 (2013), it applied Swiss modernist reduction to responsive, touch-first screens.
Inter; Flat Design used Segoe UI and Helvetica Neue
03
The colours
The ground and leading colours come from Flat Design, with a counter-accent from GOV.UK Design. The ink reads on the ground at 4.5:1 or more.
Flat Design GOV.UK Design (GDS Style)
-
#ecf0f1ground · 36% -
#2c3e50ink · 14% -
#f1c40faccent · 18% -
#1d70b8accent · 14% -
#e74c3caccent · 10% -
#3498dbaccent · 8%
As CSS
:root {
--ground: #ecf0f1;
--ink: #2c3e50;
--accent-1: #f1c40f;
--accent-2: #1d70b8;
--accent-3: #e74c3c;
--accent-4: #3498db;
--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.
04
The two styles
05
More combinations
With Flat Design
- Skeuomorphic UI Contrasts · Its direct predecessor and foil: one realistic, textured object on an otherwise flat screen becomes an instant focal point.
- Japanese Postwar Modernism Pairs well · Add the emblematic circles and calm colour fields of Japanese postwar posters to give flat screens a stronger focal image.
- Victorian Letterpress & Wood Type Contrasts · Ornamented wood type and dense rules show everything flat design removed; quote one decorative headline to warm a sterile interface.
- Isotype Pictorial Statistics Pairs well · Borrow Isotype's rows of identical counting pictograms to turn a flat icon set into honest, readable data graphics.
- Indie Pixel Art Revival Contrasts · Resolution-independent vector flatness against a deliberately coarse grid lit with glows and depth.
- Arts & Crafts Movement Contrasts · Borrow one engraved border or initial to give a flat interface a crafted, editorial moment against its vector minimalism.
- WPA Silkscreen Posters Pairs well · Its flat layered shapes translate directly to vector; use the national-park look for warm, civic flat illustration.
- Munich 1972 Olympic Design (Otl Aicher) Pairs well · Flat icon families descend from these round-headed figures; borrow a single stroke width (which, as Holt shows, the 1972 figures only approximate, since a limb built from an orthogonal and a 45-degree segment cannot keep one thickness) and the 0, 45 and 90-degree rule to keep a screen icon set coherent.
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.
- 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.
- 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.