Health & Wellness / iOS / Android / Web

NHS

NHS.UK is built to be read by anyone: strong blue, near-black text, big green buttons with a visible edge and one small corner, so nothing is ambiguous.

Download
  • #005EB8
  • #003087
  • #007F3B
  • #212B32
  • #F0F4F5
  • #EDF4FA

Color

Every color token in the file, grouped by role.

Brand

  • primary#005EB8
  • on primary#FFFFFF

Surfaces

  • canvas#FFFFFF

Text

  • ink#212B32

Lines

  • divider#D8DDE0

More

  • blue dark#003087
  • blue hover#004B93
  • blue wash#EDF4FA
  • blue light#D2E2F1
  • green#007F3B
  • green edge#00401E
  • page#F0F4F5

Typography

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

  • Frutiger W01Frutiger W01 is private and not available in open fonts. Shown in Open Sans, the closest open match.
  • title32px / 600 / 36px

    NHS

  • heading26px / 600 / 32px

    Pack my box with five dozen liquor jugs

  • heading small22px / 600 / 30px

    Pack my box with five dozen liquor jugs

  • body16px / 400 / 24px

    The quick brown fox jumps over the lazy dog

  • button19px / 600 / 28px

    Continue to checkout

  • button small16px / 600 / 16px

    Continue to checkout

Shape

Corner radius tokens.

  • sm4px

Spacing

The spacing scale, drawn to size.

  • xs4px
  • sm7px
  • md14px
  • base16px

Components

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

  • button primary
    button-primary
  • search button
    search-button
  • hero band
    hero-band
  • page band
    page-band
Read the full DESIGN.md The written rationale behind the tokens
Design tokens YAML front matter, 88 lines
version: alpha
name: NHS-design-analysis
description: "A public health service in calm, high-contrast blue: NHS blue (#005eb8), near-black ink (#212b32), a pale gray page (#f0f4f5), Frutiger at 400 and 600 and large 60 high green buttons with a dark bottom edge."
status: Draft
appVersion: "measured in a browser, 2026-10-06"
platformsCovered: [Web]
reviewer: ""
verifiedAt: ""

colors:
  primary: "#005eb8"
  on-primary: "#ffffff"
  blue-dark: "#003087"
  blue-hover: "#004b93"
  blue-wash: "#edf4fa"
  blue-light: "#d2e2f1"
  green: "#007f3b"
  green-edge: "#00401e"
  ink: "#212b32"
  canvas: "#ffffff"
  page: "#f0f4f5"
  divider: "#d8dde0"

typography:
  # Font note: "Frutiger W01" is a private font and is not available in open fonts. Closest open alternative: "Open Sans".
  title:
    fontFamily: "'Frutiger W01', 'Open Sans', Arial, sans-serif"
    fontSize: 32px
    fontWeight: 600
    lineHeight: 36px
  heading:
    fontFamily: "'Frutiger W01', 'Open Sans', Arial, sans-serif"
    fontSize: 26px
    fontWeight: 600
    lineHeight: 32px
  heading-small:
    fontFamily: "'Frutiger W01', 'Open Sans', Arial, sans-serif"
    fontSize: 22px
    fontWeight: 600
    lineHeight: 30px
  body:
    fontFamily: "'Frutiger W01', 'Open Sans', Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 24px
  button:
    fontFamily: "'Frutiger W01', 'Open Sans', Arial, sans-serif"
    fontSize: 19px
    fontWeight: 600
    lineHeight: 28px
  button-small:
    fontFamily: "'Frutiger W01', 'Open Sans', Arial, sans-serif"
    fontSize: 16px
    fontWeight: 600
    lineHeight: 16px

rounded:
  sm: 4px

spacing:
  xs: 4px
  sm: 7px
  md: 14px
  base: 16px

components:
  button-primary:
    backgroundColor: "{colors.green}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button}"
    rounded: "{rounded.sm}"
    height: 60px
    padding: 14px 16px
  search-button:
    backgroundColor: "{colors.blue-wash}"
    textColor: "{colors.primary}"
    typography: "{typography.button-small}"
    height: 40px
  hero-band:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.title}"
    padding: 24px
  page-band:
    backgroundColor: "{colors.page}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    padding: 16px

Overview

NHS.UK is the public health information site for England. The look is calm and legible: NHS blue, near-black text, a pale gray page and big, high-contrast buttons with a visible bottom edge. [Observed]

What defines the look:

  1. NHS blue. #005eb8 for the hero band, links and search, with #003087 and #004b93 for deeper states. [Measured]
  2. Near-black ink. Text is #212b32 on white and a pale gray #f0f4f5. [Measured]
  3. Big green buttons. #007f3b, 60 high with white 19px semibold text and a 4px dark bottom edge. [Measured]
  4. Frutiger at two weights. 400 for text and 600 for titles and buttons. [Measured]
  5. One 4px corner. The only radius on the measured pages. [Measured]

Source for this file: the NHS.UK home page and the conditions index measured in a browser at 1440 and 390 wide, read on 2026-10-06. The NHS design system documentation was not read. The NHS App itself is behind login and was not measured. No app captures were used. See Known Gaps.

Core

Colors

RoleValueWhere
NHS blue#005eb8Hero band, links, search
Deep blue#003087, #004b93Headings and hover
Blue wash and light#edf4fa, #d2e2f1Search fill, text on blue
Green#007f3b, edge #00401eMain buttons
Text#212b32Body and titles
Page#f0f4f5Background
Panel#ffffffCards
Divider#d8dde0Rules

Typography

Frutiger W01 at 400 and 600. Titles measure 32 on 36, section headings 26 on 32 and 22 on 30, body 16, buttons 19 on 28 at 600 and the search button 16 at 600. [Measured]

Shape and spacing

One 4px corner. Primary buttons are 60 high with 14 by 16 padding and a 4px bottom edge in a darker green, and the search button is 40 high. [Measured]

Iconography and motion

Not measured in this pass. [Inferred]

Themes

Light on the pages measured. [Observed]

Platform: iOS

The NHS 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.

A bottom tab bar for the main areas of the NHS App. [Inferred]

Main action

Expected on iOS: Nav bar or bottom bar button.

A green primary button for confirming. [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 NHS App is expected to share the NHS blue, the green and the type with the website. [Inferred]

Platform: Android

The NHS 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.

A bottom navigation bar for the main areas of the NHS App. [Inferred]

Main action

Expected on Android: Floating action button.

A green primary button for confirming. [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 NHS App is expected to share the NHS blue, the green and the type with the website. [Inferred]

Platform: Web

The NHS.UK home page and conditions index, 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 header with a search field and a menu, and a blue hero band with the site title. [Observed]

Main action

Expected on Web: Page-level button.

A green button, 60 high, white 19px text, 4px bottom edge. [Measured]

Sheets, dialogs and messages

Expected on Web: Modals, toasts.

Not measured. [Inferred]

Controls

Expected on Web: Native or custom.

A 40 high search button and green 60 high buttons. [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.

Primary buttons measure 60 high. [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: NHS blue, the green button and the 4px corner. [Measured for web, Inferred for the apps]

Intentionally different: not measured. [Inferred]

Do's and Don'ts

Do

  • Use NHS blue for the hero and links.
  • Use big green buttons with a dark bottom edge.
  • Keep text near-black on white or pale gray.
  • Keep corners at 4px.

Don't

  • Don't use blue for primary buttons.
  • Don't use light text weights.
  • Don't use small touch targets.

Known Gaps

  • Health pages, services and the signed-in NHS 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 NHS design system documentation was not read, so role names are not given.