# NHS Design System (NHSデザインシステム)

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

- IndexStyle No.558 — https://indexstyle.org/styles/nhs-design-system
- Kind: Style · Family: Public Design · Era: 2016–
- Mood: Trust, Intimacy, Calm
- What this family collects: Design commissioned by states and municipalities for everyone at once, where a public requirement, whether a road sign standard or resistance to forgery, dictates the form.

## Defining characteristics

- 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

## Composition recipe

- Typography & lettering: Use familiar words, short sentences and descriptive link labels.
- Layout & structure: Present the immediate answer first, then steps, exceptions and help.
- Material & texture: Use blue for identity, neutral surfaces for reading and semantic colors only when needed.

## Colour

Read off the reference works below, so a direction rather than a fixed palette.

- Ground: #FFFFFF
- The colour it is remembered by: #005EB8
- Text and outlines: #212B32

## What to avoid

A blue header alone does not create trust. Content clarity, tested patterns and accessible states are the system.

## Application checklist

Work through this before calling a piece an application of this style.

- [ ] Visible in the piece: NHS blue and generous white space
- [ ] Visible in the piece: Large headings and short paragraphs
- [ ] Visible in the piece: Callouts for warning and care advice
- [ ] Visible in the piece: Visible focus and simple forms
- [ ] The layout follows: Present the immediate answer first, then steps, exceptions and help.
- [ ] The lettering follows: Use familiar words, short sentences and descriptive link labels.
- [ ] The material and surface follow: Use blue for identity, neutral surfaces for reading and semantic colors only when needed.
- [ ] The colour relation holds: #FFFFFF as ground, #005EB8 carrying the style, #212B32 for text and outlines
- [ ] At least one reference work below has been studied directly
- [ ] The caution above ("What to avoid") has been addressed

## Related styles

- **GOV.UK Design System (GOV.UK デザインシステム)** — The design language the UK government's Government Digital Service publishes and maintains for public services. Everything runs in one undecorated left aligned column set in GDS Transport, and the green button keeps square corners while carrying a darker green band along its bottom edge, dropping by exactly that depth when pressed. Whatever holds keyboard focus turns yellow with a black rule under it. → https://indexstyle.org/styles/govuk-design-system
- **U.S. Web Design System (米国Webデザインシステム)** — A shared system for accessible, mobile-friendly and trustworthy U.S. federal web services, built from tested public-service patterns. → https://indexstyle.org/styles/uswds

## Compose it with something else

The dictionary can put this entry in a structural role and another in an accent role, and report where the two fight: https://indexstyle.org/compose?ids=nhs-design-system+govuk-design-system

## Further study

- NHS service manual
- Content style guide
- Form and error patterns

## Reference works

- NHS Service Manual — Design system — https://service-manual.nhs.uk/design-system

## Source of record

- NHS Service Manual — Design system — https://service-manual.nhs.uk/design-system

## Machine surfaces

- JSON: https://indexstyle.org/api/styles/nhs-design-system
- Image-generation prompt (legally clean): https://indexstyle.org/styles/nhs-design-system/prompt.txt
- MCP: https://indexstyle.org/mcp (tools: search_styles, get_style, compare_styles, compose_styles, find_related_styles; prompts: image-prompt, apply-style)