Design tokens (YAML front matter)

name: NHS website
colors:
  primary: '#005eb8'
  primary-dark: '#003087'
  primary-hover: '#004b93'
  primary-active: '#002f5c'
  primary-reverse-border: '#337ec6'
  primary-tint: '#d9e7f4'
  foreground: '#212b32'
  text-secondary: '#4c6272'
  grey-2: '#768692'
  grey-3: '#aeb7bd'
  border: '#d8dde0'
  background: '#f0f4f5'
  canvas: '#ffffff'
  button: '#007f3b'
  button-hover: '#00662f'
  button-active: '#00401e'
  link-visited: '#330072'
  link-hover: '#7c2855'
  pink: '#ae2573'
  error: '#d5281b'
  focus: '#ffeb3b'
  pale-yellow: '#fff9c4'
  warm-yellow: '#ffb81c'
  orange: '#ed8b00'
  aqua-green: '#00a499'
typography:
  nav:
    fontSize: 16px
    use: header navigation and the search field
  body:
    fontSize: 19px
    use: paragraphs, 19px / 28px, 400; the primary button at 600
  h2:
    fontSize: 22px
    use: h2 22px / 30.25px and action links, 600
  card:
    fontSize: 26px
    use: card headline links, 26px / 32px, 600
  h1:
    fontSize: 32px
    use: h1 32px / 36px, 600
rounded:
  sm: 4px
components:
  button-primary:
    type: button
    backgroundColor: '#007f3b'
    textColor: '#ffffff'
    rounded: 4px
    height: 60px
    padding: 14px 16px
    typography: 19px / 600
    shadow: '0 4px 0 #00401e'
    hover: '#00662f'
    pressed: '#00401e'
    focus: '#ffeb3b, fg #212b32, shadow 0 4px 0 #212b32'
    use: The green primary button (--nhsuk-button-colour). On the homepage it appears in NHS's own cookie banner. A hard 4px shadow beneath; hover and active darken along the token ramp; focus repaints it yellow with a black bottom edge.
  link-card:
    type: button
    backgroundColor: transparent
    textColor: '#005eb8'
    height: 32px
    typography: 26px / 600
    hover: 'fg #7c2855'
    pressed: '#ffeb3b, fg #212b32'
    focus: '#ffeb3b, fg #212b32, shadow 0 -2px 0 #ffeb3b, 0 4px 0 #212b32'
    use: Card headline links. Hover changes only the text colour, to --nhsuk-link-hover-colour; focus fills yellow and draws a 4px black bottom border as a box-shadow.
  link-action:
    type: button
    backgroundColor: transparent
    textColor: '#005eb8'
    height: 44px
    typography: 22px / 600
    hover: 'fg #7c2855'
    pressed: '#ffeb3b, fg #212b32'
    focus: '#ffeb3b, fg #212b32, shadow 0 -2px 0 #ffeb3b, 0 4px 0 #212b32'
    use: Action links (Order a repeat prescription), indented for their arrow icon. The same hover and focus as card links.
  link-nav:
    type: button
    backgroundColor: transparent
    textColor: '#ffffff'
    height: 56px
    padding: 16px 2px
    typography: 16px / 400
    hover: transparent
    pressed: '#ffeb3b, fg #212b32'
    focus: '#ffeb3b, fg #212b32, shadow inset 0 -4px 0 #212b32'
    use: Header navigation on the blue bar (Health A to Z). No hover change; focus fills yellow with a black edge drawn inset.
  input-search:
    type: input
    backgroundColor: '#ffffff'
    textColor: '#000000'
    rounded: 4px
    height: 40px
    padding: 0 12px
    typography: 16px / 400
    hover: '#ffffff'
    focus: 'ring 0 0 0 4px #ffeb3b, border #212b32'
    use: The header search field, rounded on its left (4px 0 0 4px) where it joins the search button. Focus draws a 4px yellow ring and turns the border near-black — the input variant of the focus style, with no fill.
omitted:
  - section: spacing
    reason: No verified values in current evidence.
fonts:
  roles:
    sans: Frutiger

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

variant	colour	hover	active / shadow
primary	`#007f3b`	`#00662f`	`#00401e`
secondary	transparent, `#005eb8` border and text	`#d9e7f4`	`#c7dcef` / `#005eb8`
reverse	white, `#212b32` text	`#d9d9d9`	`#b3b3b3`
warning	`#d5281b`	`#aa2016`	`#6b140e`
login	`#005eb8`	`#004b93`	`#002f5c`

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.

Regional sources: (BBC News — “NHS App upgrade to give patients more choice over treatment”; covers the NHS App, which shares the design system); (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

control	focus
Card and action links	fill `#ffeb3b`, text `#212b32`, `box-shadow: 0 -2px 0 #ffeb3b, 0 4px 0 #212b32` — a yellow block with a black bottom border
Navigation link	fill `#ffeb3b`, text `#212b32`, `box-shadow: inset 0 -4px 0 #212b32`
Primary button	fill `#ffeb3b`, text `#212b32`, `box-shadow: 0 4px 0 #212b32`
Search field	`box-shadow: 0 0 0 4px #ffeb3b`, border `#212b32`, no fill

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.

Palette

At a glance

Design System · NHS website (nhs.uk)