NHS Design System vs U.S. Web Design System
NHSデザインシステム / 米国Webデザインシステム
Both sit in Public Design, so the question is not what they belong to but how they behave. They are reached for with some of the same intent, which is where they get confused.
NHS Design System
The NHS system makes urgent health information and services calm, direct and consistent through plain language, strong focus states and tested clinical patterns.
U.S. Web Design System
A shared system for accessible, mobile-friendly and trustworthy U.S. federal web services, built from tested public-service patterns.
| NHS Design System | U.S. Web Design System | |
|---|---|---|
| Era | 2016– | 2015– |
| Family | Public Design | Public Design |
| Kind | Style | Style |
| Cues | NHS blue and generous white space / Large headings and short paragraphs / Callouts for warning and care advice / Visible focus and simple forms | White, navy and restrained federal red / Large plain headings and readable body text / Official-site banner / Clear forms, alerts and step indicators |
| Best used for | Health guidance under stress · Appointments, triage and patient services across devices | Public information and government transactions · Making services consistent across agencies and devices |
| Type | Use familiar words, short sentences and descriptive link labels. | Write the action before the institution, in large plain language. |
| Composition | Present the immediate answer first, then steps, exceptions and help. | Lead from official identity to purpose, steps and input in one clear path. |
| Material | Use blue for identity, neutral surfaces for reading and semantic colors only when needed. | Use white and navy as the base, blue for links and red only for warning. |
| Caution | A blue header alone does not create trust. Content clarity, tested patterns and accessible states are the system. | Borrowing patriotic colors is not public-service design. Accessibility and tested task flows must come with them. |