National Health Service · Design system breakdown
Healthcare design system serving 50+ million users across critical health services.
A community-authored style reference in Markdown — colors, type, spacing, and an AI-ready prompt. Unofficial; not affiliated with National Health Service.
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.
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.
The identity-bearing decisions, rendered. Names and values are illustrative — refer to the system's official tokens reference for the canonical, current set.
color-nhs-blue
NHS brand blue, primary action
color-text
Default body text
color-bg
Default page surface
color-error
Error and warning states
color-green
Action links, success
type-body
Default body text — large for readability
Exactly what ships in nhs-design-design.md — plus the same token snapshot restated as CSS custom properties. Copy either, or feed the Markdown straight to an AI coding tool as styling context.
# 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 --- ## Summary Healthcare design system serving 50+ million users across critical health services. ## 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. ## Design tokens (illustrative) Representative token values, restated as facts for reference. Names and values are illustrative — refer to the official tokens reference for the canonical, current set. | Token | Value | Role | | --- | --- | --- | | `color-nhs-blue` | `#005eb8` | NHS brand blue, primary action | | `color-text` | `#212b32` | Default body text | | `color-bg` | `#ffffff` | Default page surface | | `color-error` | `#d5281b` | Error and warning states | | `color-green` | `#007f3b` | Action links, success | | `type-body` | `19px / 28px` | Default body text — large for readability | ## Style brief The identity-bearing decisions, at a glance: - **Brand / primary action:** `#005eb8` (NHS brand blue, primary action) - **Surface:** `#ffffff` (Default page surface) - **Body text:** `#212b32` (Default body text) - **Type:** `19px / 28px` (Default body text — large for readability) ## 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. Use a primary action colour near #005eb8, and a restrained, consistent scale. 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._
If you're evaluating this 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.
Where next
