---
version: alpha
name: NHS.UK Service Health Interface
description: "A health public-service design system derived from NHS.UK and NHS App service patterns. It uses trustworthy blue identity, large readable typography, high-contrast focus, restrained surfaces, square controls, clinical status colors, card links, hub pages, error summaries, and plain-language task flows. The system is for healthcare appointments, records, prescriptions, eligibility, triage, and staff/public service journeys where accessibility, trust, and error recovery matter more than visual novelty."

colors:
  primary: "#005eb8"
  primary-hover: "#003087"
  on-primary: "#ffffff"
  action: "#007f3b"
  action-hover: "#005a30"
  focus: "#ffeb3b"
  focus-shadow: "#212b32"
  ink: "#212b32"
  body: "#212b32"
  muted: "#4c6272"
  canvas: "#ffffff"
  page: "#f0f4f5"
  surface-card: "#ffffff"
  surface-panel: "#e8edee"
  hairline: "#d8dde0"
  hairline-strong: "#4c6272"
  link: "#005eb8"
  visited: "#330072"
  error: "#d5281b"
  error-surface: "#fff5f5"
  warning: "#ffeb3b"
  warning-surface: "#fff9c4"
  success: "#007f3b"
  success-surface: "#e7f4ed"
  urgent: "#da291c"
  urgent-surface: "#fff0ef"
  inverse-canvas: "#111f2a"
  inverse-surface: "#182b38"
  inverse-ink: "#f2f7f8"

typography:
  display-xl:
    fontFamily: "Arial, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif"
    fontSize: 48px
    fontWeight: 700
    lineHeight: 1.06
    letterSpacing: 0
  display-lg:
    fontFamily: "Arial, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif"
    fontSize: 36px
    fontWeight: 700
    lineHeight: 1.15
    letterSpacing: 0
  heading-md:
    fontFamily: "Arial, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif"
    fontSize: 26px
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: 0
  heading-sm:
    fontFamily: "Arial, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif"
    fontSize: 22px
    fontWeight: 700
    lineHeight: 1.25
    letterSpacing: 0
  body-lg:
    fontFamily: "Arial, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif"
    fontSize: 26px
    fontWeight: 400
    lineHeight: 1.35
    letterSpacing: 0
  body:
    fontFamily: "Arial, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif"
    fontSize: 19px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0
  body-sm:
    fontFamily: "Arial, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.45
    letterSpacing: 0
  caption:
    fontFamily: "Arial, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif"
    fontSize: 14px
    fontWeight: 700
    lineHeight: 1.35
    letterSpacing: 0
  mono:
    fontFamily: "ui-monospace, SFMono-Regular, Menlo, Consolas, monospace"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.45
    letterSpacing: 0

rounded:
  none: 0px
  sm: 0px
  md: 0px
  lg: 0px
  pill: 9999px

spacing:
  base: 8px
  unit-1: 4px
  unit-2: 8px
  unit-3: 16px
  unit-4: 24px
  unit-5: 32px
  unit-6: 40px
  unit-7: 56px
  section: 80px

components:
  button-primary:
    backgroundColor: "{colors.action}"
    textColor: "{colors.on-primary}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 12px 16px
  button-secondary:
    backgroundColor: "{colors.surface-card}"
    textColor: "{colors.link}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 10px 14px
  text-input:
    backgroundColor: "{colors.surface-card}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 9px 10px
  error-summary:
    backgroundColor: "{colors.surface-card}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 20px
  card-link:
    backgroundColor: "{colors.surface-card}"
    textColor: "{colors.link}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 18px
  care-card:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 0
  bottom-navigation:
    backgroundColor: "{colors.surface-card}"
    textColor: "{colors.ink}"
    typography: "{typography.caption}"
    rounded: "{rounded.none}"
    padding: 8px 0

layout:
  content-width: "960px maximum, with reading columns usually constrained to 600px to 720px."
  grid: "Mobile-first single column; two-thirds content plus one-third support on wider screens only when it helps the task."
  rhythm: "Large readable vertical rhythm with 16px, 24px, 32px, 40px, and 56px steps."
  surfaces: "White content on light clinical grey page background; blue identity bands, green action, red error, yellow focus."

guidance:
  do:
    - "Write the task in plain language before showing controls."
    - "Use large readable body text and avoid dense multi-column health instructions."
    - "Make focus highly visible with yellow and a dark outline."
    - "Preserve submitted values and move users to a linked error summary when validation fails."
    - "Use card links and hub pages to break complex health services into clear routes."
  dont:
    - "Do not use NHS brand marks, Frutiger, or protected identity elements without the right to do so."
    - "Do not use color alone to communicate urgency, eligibility, or error."
    - "Do not make healthcare journeys feel like promotional campaigns."
    - "Do not hide safety-critical instructions inside accordions or decorative cards."
    - "Do not compress public health forms into dense admin dashboards."

caseStudy:
  source: "NHS.UK service manual, NHS.UK frontend, and NHS App design system patterns"
  urls:
    - "https://service-manual.nhs.uk/design-system"
    - "https://service-manual.nhs.uk/design-system/design-principles"
    - "https://service-manual.nhs.uk/design-system/styles/colour"
    - "https://service-manual.nhs.uk/design-system/styles/typography"
    - "https://service-manual.nhs.uk/design-system/styles/layout"
    - "https://design-system.nhsapp.service.nhs.uk/get-started/"
    - "https://design-system.nhsapp.service.nhs.uk/components/bottom-navigation/"
    - "https://github.com/nhsuk/nhsuk-frontend"
  analysis: "The NHS service ecosystem demonstrates public-health interface discipline: trusted identity color, plain language, large body type, visible focus, recoverable form errors, mobile-first navigation, and carefully scoped urgent status patterns. This resource abstracts those reusable service rules while avoiding unauthorized reuse of protected NHS branding or licensed fonts."
---

# NHS.UK Service Health Interface

Use this system for public healthcare services, appointment booking, prescriptions, medical record access, eligibility checks, triage, screening invitations, staff portals, and any health workflow where users need trust, comprehension, accessibility, and recovery.

The system is calm, direct, and safety-minded. It should help people understand what they need to do next, what information is required, what the status means, and how to recover from mistakes.

## Overview

The core idea is accessible healthcare task completion. Use a trustworthy blue identity, large readable typography, square controls, visible labels, linked error summaries, strong yellow focus, restrained surfaces, and plain-language card links. A health service UI should feel stable and official, not promotional or playful.

Complex journeys should become hub pages, sub-hubs, card links, and one-step-at-a-time forms. The interface must stay usable under stress, low confidence, small screens, assistive technology, and poor lighting.

## Colors

### Brand & Accent

- `primary` (#005eb8) carries health service identity, header bands, links, and selected navigation.
- `action` (#007f3b) is for primary continue, confirm, save, or submit actions.
- `focus` (#ffeb3b) is reserved for keyboard focus and must remain unmistakable.

### Surface

- `canvas` (#ffffff) is the reading surface.
- `page` (#f0f4f5) is the clinical grey page background.
- `surface-panel` (#e8edee) groups secondary information, instructions, and metadata.

### Text

- `ink` (#212b32) is primary text.
- `muted` (#4c6272) is for hints, captions, meta labels, and input borders.
- `link` (#005eb8) is for navigation and card-link titles.
- `visited` (#330072) is used when visited-link behavior matters.

### Hairlines & Borders

- `hairline` (#d8dde0) separates panels and rows.
- `hairline-strong` (#4c6272) marks inputs, active boundaries, and high-importance separators.

### Semantic

- `error` (#d5281b) marks validation errors and summaries.
- `success` (#007f3b) marks completion or safe progress.
- `urgent` (#da291c) is for urgent care context, not generic emphasis.
- `warning` (#ffeb3b) is for focus or warning backgrounds with supporting text and borders.

## Typography

### Font Family

Official NHS services use Frutiger where licensed. For general Interface Lab use, use `Arial, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif` and preserve the same size, line-height, and weight behavior.

### Hierarchy

- Page title: 48px/51px on desktop, 32px/38px on mobile.
- Section heading: 36px/41px or 26px/31px depending on hierarchy.
- Lead paragraph: 26px/35px, used once at the top of a service page.
- Body: 19px/29px desktop, 16px/23px mobile.
- Small body: 16px/23px for hints and metadata.

### Principles

Keep text plain and readable. Do not use italic for important meaning. Use bold sparingly for labels, headings, and emergency clarity. Do not reduce the body size to fit more content into one page.

### Note on Font Substitutes

If Frutiger is not licensed, use Arial. Do not substitute with a stylish humanist or rounded font that changes the official, service-like tone.

## Layout

### Spacing System

Use generous vertical rhythm:

- 8px for internal label and hint relationships.
- 16px for field groups and card-link internals.
- 24px for related content blocks.
- 32px to 40px for section separation.
- 56px to 80px for major page divisions.

### Grid & Container

Use mobile-first single columns. On desktop, keep the primary reading column between 600px and 720px where possible, with a maximum page width around 960px. Add a supporting right rail only when it reduces cognitive load.

### Whitespace Philosophy

Whitespace supports comprehension and recovery. Leave enough room around questions, errors, and safety instructions for the user to read under pressure.

## Elevation & Depth

Keep the system flat. Use borders, color bands, and background panels rather than shadows. Public healthcare services should not feel layered, glossy, or card-heavy. Depth is mainly structural: header, content, callout, form, confirmation.

## Shapes

Use square geometry for controls and service modules. Rounded corners are not a defining part of this system. Full pills may appear in mobile navigation or tags only when the target remains clear and accessible.

## Components

### Buttons

Primary actions use green. Buttons are large, square, and visibly clickable. Avoid placing multiple primary actions on one step. Secondary actions should look clearly different from the primary.

### Cards & Containers

Card links should be large enough to scan and tap. Use them for hub pages, appointment routes, record categories, prescription services, and help topics. Do not use cards as decorative page furniture.

### Inputs & Forms

Every input needs a visible label. Use hint text for instructions, not placeholder-only guidance. On error, keep the user's input, show an error summary at the top, link each error to the field, and show the field-level error message.

### Navigation

Use simple header navigation for web services and bottom navigation for app-like mobile services when the main destinations must remain reachable. Avoid exploratory menus for safety-critical tasks.

### Signature Components

- Error summary linked to field errors.
- Care card or urgent callout with strong color and direct language.
- Card-link list for hub and sub-hub pages.
- Summary list for check-your-answers and records.
- Bottom navigation for mobile app service destinations.

## Do's and Don'ts

Do:

- Use plain language and one clear task per page.
- Keep body text large and line lengths comfortable.
- Make focus state highly visible.
- Pair color with text, headings, and structure.
- Use card links to make complex health services navigable.

Don't:

- Do not reuse protected NHS branding without permission.
- Do not make urgent warnings look like decorative red cards.
- Do not rely on color alone for medical status.
- Do not hide errors below the fold without a summary.
- Do not compress healthcare instructions into dense tables unless the audience is trained staff and the task requires comparison.

## Responsive Behavior

### Breakpoints

- 320px: minimum mobile service layout.
- 641px: tablet layout begins; increase type and spacing.
- 769px: desktop service layout can introduce supporting columns.
- 990px: maximum content container.

### Touch Targets

Touch targets should be generous, especially for app navigation, form controls, and card links. Do not use tiny text links for primary healthcare tasks on mobile.

### Collapsing Strategy

Keep one primary task visible. Collapse supporting links below the main form, and preserve error summaries, current step, and primary action before auxiliary content.

### Image Behavior

Use imagery only when it helps identify a service, document, body location, or care context. Avoid decorative patient photography that does not help the task.

## Iteration Guide

1. Write the user's health task in plain language.
2. Decide whether the page is a hub, form step, record view, confirmation, or urgent-care instruction.
3. Map each status to text, heading, color, and recovery action.
4. Design validation before designing decoration.
5. Test keyboard focus, screen-reader labels, mobile reading, and error recovery.
6. Remove anything that slows comprehension or makes the service feel promotional.

## Known Gaps

- Exact NHS brand assets and Frutiger font use require permission and licensing. This resource uses Arial-compatible substitutes for general design research.
- NHS public services are primarily light interfaces. The dark preview is an Interface Lab internal operations variant, not an official NHS public default.
- Clinical safety, medical content, and regulatory review are outside the scope of this visual system resource.
- Exact NHS App component behavior should be confirmed against the current NHS App design system before production use.