NHS website DESIGN.md

Design System Inspiration of NHS website (nhs.uk)

Overview

Visual Theme & Atmosphere

nhs.uk is the NHS website for England, run by NHS England — the public front door to health information, conditions from A to Z, and services such as ordering a repeat prescription. Its design comes from the NHS design system, published openly in the NHS digital service manual and shipped as the nhsuk-frontend package; the live site reports version 10.4.2 in its own --nhsuk-frontend-version token.

It looks like a public service that must work for everyone: NHS blue #005eb8 for the header, links and the brand, a near-black ink #212b32, a pale grey page #f0f4f5 under white cards, a green #007f3b primary button, and Frutiger, the NHS brand font, which NHS England licenses for NHS organisations.

The part worth studying most is focus. The design system states it plainly — "Like GOV.UK, we use a combination of yellow and black" — and nhs.uk renders it exactly: focused links fill yellow #ffeb3b with a black bottom border; focused inputs get a yellow ring and a thick black border.

What makes it worth reading:

• Focus is a designed state, in two variants. Links and buttons fill yellow; inputs ring yellow. Both use --nhsuk-focus-colour and --nhsuk-focus-text-colour.
• Shadows are hard offsets. Every shadow on the page is a solid, unblurred line — 0 4px 0 under a button, 0 3px 0 under a card.
• Almost nothing is rounded. 4px on buttons and the search field; 0 everywhere else.

Primary tasks

• Look up a condition or medicine (Health A to Z); search.
• Use an NHS service — order a repeat prescription, find a service.

Brand Narrative

The NHS website has to be usable by anyone in England, on any device, in any state of health, and its design system says so in every decision: large body text, one blue for links, one green for the primary action, and a focus state that no one can miss. It borrowed that yellow-and-black focus from GOV.UK and says so, then made it its own — two variants, one for links and one for inputs — and put its brand in the NHS blue and a licensed Frutiger rather than in decoration.

Principles

• Visible focus, always. Yellow and black, on every control.
• Readable first. 19px body, near-black on white.
• Flat and square. Hard shadows, almost no radius.

Personas

Not researched. No persona claim is made from a UI capture.

Colors

Measured with getComputedStyle on www.nhs.uk: 73 custom properties, all --nhsuk-*, and no framework or third-party variables.

Blue — the NHS

• Primary (#005eb8) — --nhsuk-blue-colour, --nhsuk-brand-colour, --nhsuk-link-colour and the login button. The header bar, links, card headlines.
• Primary Dark (#003087) — --nhsuk-dark-blue-colour, footer and reverse links.
• Primary Hover (#004b93) — --nhsuk-login-button-hover-colour · Primary Active (#002f5c) — --nhsuk-link-active-colour.
• Primary Reverse Border (#337ec6) · Primary Tint (#d9e7f4, the secondary button's hover).

Ink and greys

• Foreground (#212b32) — --nhsuk-text-colour, --nhsuk-black-colour and --nhsuk-focus-text-colour: one near-black for text and for focus. Every <p> but one.
• Text Secondary (#4c6272) — grey-1, also the input border.
• Grey 2 (#768692) · Grey 3 (#aeb7bd, the border-hover colour) · Border (#d8dde0, grey-4 and the template background) · Background (#f0f4f5, grey-5, --nhsuk-body-background-colour) · Canvas (#ffffff, cards and inputs).

Buttons — five variants as tokens

Links

--nhsuk-link-colour #005eb8 · visited #330072 (--nhsuk-purple-colour) · hover #7c2855 (--nhsuk-dark-pink-colour) · active #002f5c.

Focus and the rest of the palette

• Focus (#ffeb3b) — --nhsuk-focus-colour and --nhsuk-yellow-colour.
• Pale Yellow (#fff9c4) · Warm Yellow (#ffb81c) · Orange (#ed8b00) · Aqua Green (#00a499) · Pink (#ae2573) · Error (#d5281b, --nhsuk-error-colour and --nhsuk-red-colour).

Typography

Font family

Frutiger — "Frutiger W01", arial, sans-serif on body, headings and buttons. Two weights load (document.fonts): 400 and 600, from assets.nhs.uk/fonts/FrutigerLTW01-55Roman.woff2 and -65Bold.woff2, NHS's own asset host.

The design system's typography page gives the same stack — font-family: "Frutiger W01", Arial, sans-serif; — says "NHS England has a licence for 3 weights of the font which NHS organisations in England can sign up to use", and "Default to Arial when Frutiger isn't available". Frutiger is a licensed face; a consumer outside the NHS must not render Arial under its name.

Scale

h1 32px / 36px at 600 · card headlines 26px / 32px at 600 · h2 and action links 22px at 600 · paragraphs 19px / 28px at 400 · navigation and the search field 16px. The body size is large on purpose — 19px, not 16.

Layout

• A centred width container (240px margins at 1440px).
• Cards separate with a hard grey underline, box-shadow: 0 3px 0 #d8dde0, and 51px bottom margin.
• Breakpoints as tokens: mobile 20rem, tablet 40.0625rem, desktop 48.0625rem, large desktop 61.875rem.

Responsive Behavior

Not measured beyond the breakpoint tokens. Desktop 1440×1000 only.

Elevation & Depth

None in the usual sense. Every shadow is a solid offset with no blur — the button's 0 4px 0, the card's 0 3px 0, the focus edges. It reads like print, not like layered glass.

Motion & Easing

Not measured. No motion token among the 73.

---

Tier 1 sources: https://www.nhs.uk/ (live homepage — 73 --nhsuk-* custom properties read via getComputedStyle; five components measured at rest, hover, pressed and focus; Frutiger W01 loaded from assets.nhs.uk, captured 2026-09-26); https://www.nhs.uk/zz-this-does-not-exist (nonsense-path control — a real HTTP 404, "Page not found - NHS", captured 2026-09-26); https://service-manual.nhs.uk/zz-this-does-not-exist (the design-system host's control — a real 404, captured 2026-09-26); https://service-manual.nhs.uk/design-system (NHS design system, read 2026-09-26); https://service-manual.nhs.uk/design-system/styles/focus-state (focus state — "Like GOV.UK, we use a combination of yellow and black", links with "a yellow background with a black bottom border", read 2026-09-26); https://service-manual.nhs.uk/design-system/styles/typography (Frutiger, the 3-weight NHS England licence, the Arial fallback, read 2026-09-26)

Regional sources: https://www.bbc.co.uk/news/articles/ce8nr1936zyo (BBC News — "NHS App upgrade to give patients more choice over treatment"; covers the NHS App, which shares the design system); https://www.bbc.co.uk/news/uk-england-45434453 (BBC News — "Pilot areas announced for NHS app to book appointments")

Components

Five components, every state on its own page load, focus read before the mouse moved.

• Primary button — #007f3b, white 19px/600, 4px radius, 60px, with a hard 0 4px 0 #00401e shadow. Hover #00662f, active #00401e — exactly the token ramp. On the homepage it appears in NHS's own cookie banner.
• Card link — #005eb8 26px/600. Hover changes only the text colour, to #7c2855.
• Action link — #005eb8 22px/600, indented for its arrow. The same hover.
• Navigation link — white 16px on the blue header. No hover change.
• Search field — #ffffff, #000000 text, 16px, 40px, rounded 4px 0 0 4px where it meets the search button. No hover change.

Focus — two authored variants

The outline is set but transparent (rgba(0,0,0,0) solid 4px) — the visible focus is always the box-shadow and fill. This is the pattern the design system documents: "When links are focused, they have a yellow background with a black bottom border"; form inputs get "a yellow outline and a thick black border".

Radius

4px on buttons and the search field, 0 on cards, links, headings and containers.

States

Five components. Hover: the button darkens along its ramp; card and action links turn #7c2855; navigation and the search field do not change. Focus: yellow fill with a black edge on links and the button, a yellow ring with a black border on the search field. The secondary, reverse, warning and login button variants exist as tokens but were not rendered on the homepage. No disabled state was observed.

Do's and Don'ts

Do

• Give every focusable element the yellow-and-black focus: a fill and black bottom border for links and buttons, a yellow ring and black border for inputs.
• Use #005eb8 for links and the brand, #212b32 for text, #f0f4f5 behind white cards.
• Set body text at 19px.
• Draw shadows as hard offsets.

Don't

• Don't round cards or links.
• Don't render Arial and call it Frutiger.
• Don't blur shadows.
• Don't use the button green for links or the link blue for primary buttons.

Voice & Tone

Not assessed as authored voice.

Agent Prompt Guide

Quick Color Reference

#005eb8 NHS blue · #003087 dark blue · #212b32 text · #4c6272 secondary · #d8dde0 borders · #f0f4f5 page · #ffffff cards · #007f3b / #00662f / #00401e button ramp · #7c2855 link hover · #330072 visited · #ffeb3b focus · #d5281b error

Example Component Prompts

• "A primary button: #007f3b, white 19px/600 Frutiger, 4px radius, 0 4px 0 #00401e shadow; hover #00662f; focus yellow #ffeb3b with #212b32 text and a 0 4px 0 #212b32 edge."
• "A card link #005eb8 26px/600; hover #7c2855; focus yellow fill with a 4px black bottom border."

Governance

Known Gaps

• Contrast, link-card. Text #005eb8 on #00000000 measures 3.29:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.
• Contrast, link-action. Text #005eb8 on #00000000 measures 3.29:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.