Utilities / iOS / Android / Web

GOV.UK

GOV.UK removes everything that could get in the way: black on white, one blue, square corners and big green buttons with a visible edge.

Download
  • #1D70B8
  • #0F7A52
  • #0B0C0C
  • #F4F8FB
  • #1A65A6
  • #D2E2F1

Color

Every color token in the file, grouped by role.

Brand

  • primary#0F7A52
  • on primary#FFFFFF

Surfaces

  • canvas#FFFFFF

Text

  • link#1A65A6
  • ink#0B0C0C

More

  • button edge#083D29
  • blue#1D70B8
  • band#F4F8FB
  • blue light#D2E2F1

Typography

Each style is set with the file's own family, size, weight and spacing.

  • GDS TransportGDS Transport is private and not available in open fonts. Shown in Roboto, the closest open match.
  • display64px / 700 / 77px

    GOV.UK

  • title24px / 700 / 30px

    Pack my box with five dozen liquor jugs

  • body19px / 400 / 25px

    The quick brown fox jumps over the lazy dog

  • button19px / 400 / 19px

    Continue to checkout

  • button bold19px / 700 / 20px

    Continue to checkout

  • menu16px / 700 / 24px

    The quick brown fox jumps over the lazy dog

Shape

Corner radius tokens.

  • none0px

Spacing

The spacing scale, drawn to size.

  • xs7px
  • sm8px
  • md10px
  • lg20px

Components

Component tokens drawn with the colors, type and corners they name.

  • button start
    button-start
  • blue band
    blue-band
  • search bar
    search-bar
  • light band
    light-band
Read the full DESIGN.md The written rationale behind the tokens
Design tokens YAML front matter, 86 lines
version: alpha
name: GOV-UK-design-analysis
description: "The UK government's service site in plain, square form: black text on white, a single link blue (#1d70b8), big green buttons (#0f7a52) with a dark bottom edge, GDS Transport in bold and regular and no rounded corners."
status: Draft
appVersion: "measured in a browser, 2026-10-06"
platformsCovered: [Web]
reviewer: ""
verifiedAt: ""

colors:
  primary: "#0f7a52"
  on-primary: "#ffffff"
  button-edge: "#083d29"
  blue: "#1d70b8"
  link: "#1a65a6"
  ink: "#0b0c0c"
  canvas: "#ffffff"
  band: "#f4f8fb"
  blue-light: "#d2e2f1"

typography:
  # Font note: "GDS Transport" is a private font and is not available in open fonts. Closest open alternative: "Roboto".
  display:
    fontFamily: "'GDS Transport', Roboto, Arial, sans-serif"
    fontSize: 64px
    fontWeight: 700
    lineHeight: 77px
  title:
    fontFamily: "'GDS Transport', Roboto, Arial, sans-serif"
    fontSize: 24px
    fontWeight: 700
    lineHeight: 30px
  body:
    fontFamily: "'GDS Transport', Roboto, Arial, sans-serif"
    fontSize: 19px
    fontWeight: 400
    lineHeight: 25px
  button:
    fontFamily: "'GDS Transport', Roboto, Arial, sans-serif"
    fontSize: 19px
    fontWeight: 400
    lineHeight: 19px
  button-bold:
    fontFamily: "'GDS Transport', Roboto, Arial, sans-serif"
    fontSize: 19px
    fontWeight: 700
    lineHeight: 20px
  menu:
    fontFamily: "'GDS Transport', Roboto, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 700
    lineHeight: 24px

rounded:
  none: 0px

spacing:
  xs: 7px
  sm: 8px
  md: 10px
  lg: 20px

components:
  button-start:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button}"
    rounded: "{rounded.none}"
    height: 38px
    padding: 8px 10px 7px
  blue-band:
    backgroundColor: "{colors.blue}"
    textColor: "{colors.on-primary}"
    typography: "{typography.display}"
    padding: 20px
  search-bar:
    backgroundColor: "{colors.blue}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-bold}"
    height: 61px
    padding: 20px
  light-band:
    backgroundColor: "{colors.band}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    padding: 20px

Overview

GOV.UK is the single public site for UK government services. The look is plain and square: black text on white, one blue for links, big green start buttons and no decoration. [Observed]

What defines the look:

  1. Black on white. Text is #0b0c0c, with a very pale blue band #f4f8fb behind sections. [Measured]
  2. One blue. #1d70b8 for the hero and header bands and #1a65a6 for links. [Measured]
  3. Big green buttons. #0f7a52 with white 19px text and a 2px darker edge below. [Measured]
  4. No rounded corners. Every measured element is square. [Measured]
  5. One typeface. GDS Transport in regular and bold, with Arial behind it. [Measured]

Source for this file: the GOV.UK home page measured in a browser at 1440 and 390 wide, read on 2026-10-06. The GOV.UK Design System documentation was not read. No app captures were used. See Known Gaps.

Core

Colors

RoleValueWhere
Text#0b0c0cTitles and body
Blue band#1d70b8Hero and header
Link blue#1a65a6Links
Green#0f7a52, edge #083d29Main buttons
Page and band#ffffff, #f4f8fbSurfaces
Light blue#d2e2f1Panels

Typography

GDS Transport in two weights. The hero title measures 64 on 77 at 700, section titles 24 on 30 at 700, body 19, buttons 19 at 400 and the menu and search 16 to 19 at 700. [Measured]

Shape and spacing

No rounded corners. Buttons are 38 high with 8 by 10 padding and a 2px bottom shadow in a darker green, and the header search is 61 high. [Measured]

Iconography and motion

Not measured in this pass. [Inferred]

Themes

Light on the page measured. [Observed]

Platform: iOS

The GOV.UK iOS app was not captured. The notes below follow from the web design and platform conventions.

Back and up navigation

Expected on iOS: Chevron plus previous title, swipe from the left edge.

Chevron plus previous title and the edge swipe, as the platform expects. Not confirmed on a device. [Inferred]

Primary navigation

Expected on iOS: Bottom tab bar, about five items.

The GOV.UK app is expected to use native navigation with the same blue and green. [Inferred]

Main action

Expected on iOS: Nav bar or bottom bar button.

A green primary button. [Inferred]

Sheets, dialogs and messages

Expected on iOS: Action sheets, alerts, modals.

Not measured. [Inferred]

Controls

Expected on iOS: Cupertino switches, pickers, segmented controls.

Not measured. [Inferred]

Text sizing

Expected on iOS: Dynamic Type.

Not measured. [Inferred]

Touch and pointer targets

Expected on iOS: 44pt minimum.

Not measured. [Inferred]

Insets and system bars

Expected on iOS: Safe areas, status bar.

Not measured. [Inferred]

Icons

Expected on iOS: SF Symbols or custom.

Not measured. [Inferred]

Account and sign-in rules

Expected on iOS: Equivalent login option when third-party sign-in exists (Guideline 4.8) and in-app account deletion. Note the date checked.

Not verified. Sign-in rules and account deletion were not checked. [Inferred] Checked: 2026-10-06 against the public web only.

Platform conformance

Expected on iOS: For each important component: what iOS expects, what this app does, and why it deviates.

The app is expected to share the blue, the green and the typeface with the website. [Inferred]

Platform: Android

The GOV.UK Android app was not captured. The notes below follow from the web design and platform conventions.

Back and up navigation

Expected on Android: System back and gesture, up arrow in the top bar.

System back and gesture, with an up arrow in the top bar, as the platform expects. Not confirmed on a device. [Inferred]

Primary navigation

Expected on Android: Navigation bar, rail on tablets.

The GOV.UK app is expected to use native navigation with the same blue and green. [Inferred]

Main action

Expected on Android: Floating action button.

A green primary button. [Inferred]

Sheets, dialogs and messages

Expected on Android: Bottom sheets, dialogs, snackbars.

Not measured. [Inferred]

Controls

Expected on Android: Material switches, pickers, chips.

Not measured. [Inferred]

Text sizing

Expected on Android: Font scale.

Not measured. [Inferred]

Touch and pointer targets

Expected on Android: 48dp minimum.

Not measured. [Inferred]

Insets and system bars

Expected on Android: Edge to edge, system bars.

Not measured. [Inferred]

Icons

Expected on Android: Material Symbols or custom.

Not measured. [Inferred]

Account and sign-in rules

Expected on Android: Account deletion and data safety requirements. Note the date checked.

Not verified. Sign-in rules and account deletion were not checked. [Inferred] Checked: 2026-10-06 against the public web only.

Platform conformance

Expected on Android: For each important component: what Android expects, what this app does, and why it deviates.

The app is expected to share the blue, the green and the typeface with the website. [Inferred]

Platform: Web

The GOV.UK home page, measured at 1440 and 390 wide.

Back and up navigation

Expected on Web: Browser back, breadcrumbs.

Browser back. [Observed]

Primary navigation

Expected on Web: Top nav or sidebar.

A black header with a Menu button and a Search GOV.UK control, and a large blue hero band. [Observed]

Main action

Expected on Web: Page-level button.

A green button with a darker bottom edge, 38 high, square. [Measured]

Sheets, dialogs and messages

Expected on Web: Modals, toasts.

Not measured. [Inferred]

Controls

Expected on Web: Native or custom.

Square buttons and fields. [Measured]

Text sizing

Expected on Web: Browser zoom.

Sizes are fixed pixel values at each breakpoint. [Measured]

Touch and pointer targets

Expected on Web: Pointer and keyboard.

Buttons measure 38 high and the header controls 61. [Measured]

Insets and system bars

Expected on Web: Viewport, scrollbars.

Not measured. [Inferred]

Icons

Expected on Web: Any.

Not measured. [Inferred]

Account and sign-in rules

Expected on Web: Not applicable unless the product has accounts.

Not applicable to the public pages measured. [Observed]

Platform conformance

Expected on Web: For each important component: what the web norm is, what this app does, and why it deviates.

The responsive page keeps type and color and changes layout. [Measured]

Cross-platform consistency

Consistent across platforms: black on white, the blue, the green button and square corners. [Measured for web, Inferred for the app]

Intentionally different: not measured. [Inferred]

Do's and Don'ts

Do

  • Use black text on white.
  • Use green for the start or main button, with a darker bottom edge.
  • Keep corners square.
  • Use one blue for links and bands.

Don't

  • Don't round corners.
  • Don't use more than one blue.
  • Don't decorate with gradients or shadows beyond the button edge.

Known Gaps

  • Service pages, forms and the GOV.UK app were not measured.
  • The iOS and Android apps were not captured. Their sections are inferred from the web design and platform conventions.
  • Icons, motion and exact breakpoints were not measured.
  • Account deletion and store policy rules were not verified.
  • The GOV.UK Design System documentation was not read, so role names are not given.