NHS Design System

# NHS Design System — Design Style Reference

> **Unofficial, community-authored reference.** Compiled by [designsystems.one](https://www.designsystems.one). Not affiliated with, endorsed by, or sponsored by National Health Service. "NHS Design System" and related marks belong to their respective owners. This document describes publicly observable style attributes in original words — it contains no copied documentation, logos, icon artwork, or original token files. Always defer to the official source for canonical, current values.

**System:** NHS Design System
**Owner:** National Health Service
**Official documentation:** https://service-manual.nhs.uk/design-system
**Visual character:** Clinical clarity under the world's most trusted blue: Frutiger warmth, generous 19px body text, and patterns tested on anxious patients.

---

## Summary

Healthcare design system serving 50+ million users across critical health services.

_Confidence: high. Values are drawn from well-documented public token references._

## Color tokens

| Color | Value | CSS variable | Role |
| --- | --- | --- | --- |
| NHS Blue | `#005eb8` | `--nhsuk-blue` | Brand, links, and primary identity |
| Text Black | `#212b32` | `--nhsuk-text-color` | Primary text |
| Secondary Text | `#4c6272` | `--nhsuk-secondary-text-color` | Secondary text |
| White | `#ffffff` | `--nhsuk-white` | Surfaces |
| Pale Grey | `#f0f4f5` | `--nhsuk-grey-5` | Page background |
| Green / Button | `#007f3b` | `--nhsuk-button-color` | Primary action |
| Emergency Red | `#d5281b` | `--nhsuk-red` | Errors and urgent care |
| Warm Yellow / Focus | `#ffeb3b` | `--nhsuk-focus-color` | Focus highlight |
| Border Grey | `#d8dde0` | `--nhsuk-border-color` | Borders |

## Typography

- **Body:** Frutiger — weights 400, 600 — `Frutiger, Arial, sans-serif`

## Type scale

| Step | Size | Line height |
| --- | --- | --- |
| heading-xl | `48px` | `56px` |
| heading-l | `32px` | `40px` |
| heading-m | `24px` | `32px` |
| body | `19px` | `28px` |
| body-s | `16px` | `24px` |

## Spacing

Base unit: `8px`

Scale: `8px` · `16px` · `24px` · `32px` · `40px` · `48px` · `56px`

## Corner radius

| Name | Value |
| --- | --- |
| default | `4px` |

## Elevation / shadows

| Name | Value |
| --- | --- |
| button-shadow | `0 4px 0 #00401e` |

## Quick start (CSS)

```css
/* NHS Design System — illustrative tokens, restated as CSS custom properties.
   Unofficial reference by designsystems.one; values are indicative, not
   canonical. Official reference: https://service-manual.nhs.uk/design-system */

:root {
  /* Color */
  --nhsuk-blue: #005eb8; /* Brand, links, and primary identity */
  --nhsuk-text-color: #212b32; /* Primary text */
  --nhsuk-secondary-text-color: #4c6272; /* Secondary text */
  --nhsuk-white: #ffffff; /* Surfaces */
  --nhsuk-grey-5: #f0f4f5; /* Page background */
  --nhsuk-button-color: #007f3b; /* Primary action */
  --nhsuk-red: #d5281b; /* Errors and urgent care */
  --nhsuk-focus-color: #ffeb3b; /* Focus highlight */
  --nhsuk-border-color: #d8dde0; /* Borders */

  /* Typography */
  --font-body: Frutiger, Arial, sans-serif;

  /* Type scale */
  --text-heading-xl: 48px /* line-height 56px */;
  --text-heading-l: 32px /* line-height 40px */;
  --text-heading-m: 24px /* line-height 32px */;
  --text-body: 19px /* line-height 28px */;
  --text-body-s: 16px /* line-height 24px */;

  /* Spacing */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 40px;
  --space-6: 48px;
  --space-7: 56px;

  /* Radius */
  --radius-default: 4px;

  /* Elevation */
  --shadow-button-shadow: 0 4px 0 #00401e;
}
```

## Origin

The NHS Service Manual and Design System emerged from the NHS.UK redesign program in 2018, building on lessons from GOV.UK's design system but tuned for the specific demands of healthcare communication. It's used across NHS digital services from booking appointments to managing prescriptions.

## Governance

NHS Digital's central design team owns the system; contributions accepted from across the NHS England digital teams through a documented community process. Every component is co-designed with patients in user research; nothing ships without research validation.

## Known for

- Plain-English copy guidance engineered for medical contexts — when users are stressed, ill, or in crisis, the words have to work first.
- Accessibility as a foundational requirement — WCAG 2.1 AA is the floor; many surfaces target AAA. Every component is tested with assistive technology before release.
- Research-backed patterns — every component links to the user research that justifies its design, including the failed alternatives.

## Underrated

- The card and panel patterns include explicit treatment for emergency content (red border, plain language) — the kind of pattern most design systems can ignore.
- The form patterns assume users may have low digital literacy or be using shared devices; the patterns degrade gracefully in ways most systems don't bother with.

## Watch out for

- Visual identity is NHS-blue and intentionally institutional; the patterns are the reference, not the brand.
- The user research assumes UK healthcare context — pattern recommendations don't always translate to private-sector or non-UK healthcare directly.

## Components worth studying

- **Care Card** — Severity-tagged content panels (information, warning, urgent) for medical content — the reference for content with safety implications.
- **Date Input** — Three-input date field (day / month / year) optimized for accessibility and slow connections — works without JavaScript.
- **Action Link** — High-priority call-to-action link with green styling and arrow affordance, used for the primary action on a service page.

## When to choose NHS Design System

Study NHS Design if you're building healthcare, public services, or any product where users are vulnerable, stressed, or low-literacy. The plain-language guidance and the research linking are the gold standard.

## Apply this style with an AI tool

Paste this into your AI coding assistant as a direction, then iterate:

> Design in the spirit of NHS Design System by National Health Service — Healthcare design system serving 50+ million users across critical health services. Character: Clinical clarity under the world's most trusted blue: Frutiger warmth, generous 19px body text, and patterns tested on anxious patients. Use a primary colour near #005eb8, the typeface "Frutiger" (or a close equivalent), corner radius around 4px, a spacing rhythm on a 8px base. Lean into what it's known for: Plain-English copy guidance engineered for medical contexts — when users are stressed, ill, or in crisis, the words have to work first. Match the intent, not the pixels; adapt it to my product rather than cloning it.

## Official references

- [NHS design system](https://service-manual.nhs.uk/design-system)
- [NHS service manual](https://service-manual.nhs.uk/)
- [NHS frontend on GitHub](https://github.com/nhsuk/nhsuk-frontend)

---

_Generated by [designsystems.one](https://www.designsystems.one/design-systems/nhs-design) — a catalogue of public design systems. Style facts are reported for reference and education; adapt them to your own product. Report issues or takedown requests via the site._