NHS Design System

NHSデザインシステム / 2016– / Style / Public Design

The NHS system makes urgent health information and services calm, direct and consistent through plain language, strong focus states and tested clinical patterns.

NHS Design System — NHS.UK frontend — official error-summary component snapshot — Copyright (c) 2019 NHS England / MIT — NHS.UK frontend — official error-summary component snapshot — Copyright (c) 2019 NHS England / MIT · MIT

NHS Design System — NHS.UK frontend — official summary-list component snapshot — Copyright (c) 2019 NHS England / MIT — NHS.UK frontend — official summary-list component snapshot — Copyright (c) 2019 NHS England / MIT · MIT

NHS Design System — AI-generated interpretation 1 — AI-generated interpretation, not a reference work

At a glance

Visual cues

NHS blue and generous white space
Large headings and short paragraphs
Callouts for warning and care advice
Visible focus and simple forms

Best used for

Health guidance under stress
Appointments, triage and patient services across devices

Use this style

Take the compact brief into a project or hand the structured version to an AI tool.

design.md image prompt JSON API MCP & machine access Compose

open in ChatGPT open in Claude open in Google AI

Detailed guidance and sourcesProduction rules, reference works, comparisons, research and citation formats

Dictionary entry

Type: Use familiar words, short sentences and descriptive link labels.
Composition: Present the immediate answer first, then steps, exceptions and help.
Material: Use blue for identity, neutral surfaces for reading and semantic colors only when needed.
Caution: A blue header alone does not create trust. Content clarity, tested patterns and accessible states are the system.
Further study: NHS service manual / Content style guide / Form and error patterns

Related entries

GOV.UK Design System (GOV.UK デザインシステム)Shared effects: Trust / Calm.Compare NHS Design System and GOV.UK Design System
U.S. Web Design System (米国Webデザインシステム)Same Public Design lineage.Compare NHS Design System and U.S. Web Design System

Cite this entry

The dictionary is meant to be linked to. Take whichever form fits where you are writing.

Link: https://indexstyle.org/styles/nhs-design-system
Markdown: [NHS Design System — IndexStyle](https://indexstyle.org/styles/nhs-design-system)
HTML: <a href="https://indexstyle.org/styles/nhs-design-system">NHS Design System — IndexStyle</a>

Back to index position