{ "schema": "brand-kit@2", "palette": { "paper": "#F0F4F5", "surface": "#FFFFFF", "ink": "#212B32", "ink_muted": "#4C6272", "accent": "#005EB8", "on_accent": "#FFFFFF", "accent_dark": "#003087", "accent_secondary": "#007F3B", "positive": "#007F3B", "highlight": "#FFEB3B", "border": "#D8DDE0", "night": "#005EB8", "on_night": "#FFFFFF", "accent_on_night": "#FFFFFF", "prov": "published", "source": "https://service-manual.nhs.uk/design-system/styles/colour", "note": "Roles follow NHS.UK frontend applied colours (text #212B32, secondary text #4C6272, page ground grey-5 #F0F4F5, cards white, link and brand NHS Blue #005EB8, button green #007F3B, focus yellow #FFEB3B, border grey-4 #D8DDE0). NHS has no dark night ground: the only reversed ground is 100% NHS Blue.", "extras": [ { "name": "NHS Blue", "hex": "#005EB8", "role": "Core. Dominant brand colour with white; the only colour the NHS logo may reverse out of. Pantone 300, CMYK 99/50/0/0, RAL 5017", "prov": "published", "source": "https://www.england.nhs.uk/nhsidentity/identity-guidelines/colours/", "site_use": "Header, hero panel, link colour, primary card chevron, NHS services blue link-list (nhsuk-colour blue)" }, { "name": "White", "hex": "#FFFFFF", "role": "Core. Dominant with NHS Blue; preferred logo ground", "prov": "published", "source": "https://www.england.nhs.uk/nhsidentity/identity-guidelines/colours/" }, { "name": "NHS Dark Blue", "hex": "#003087", "role": "Level 1 blue. Darker tonal variety. Pantone 287", "prov": "published", "source": "https://www.england.nhs.uk/nhsidentity/identity-guidelines/colours/", "site_use": "Link hover colour in NHS.UK frontend (nhsuk-colour dark-blue)" }, { "name": "NHS Bright Blue", "hex": "#0072CE", "role": "Level 1 blue. Pantone 285", "prov": "published", "source": "https://www.england.nhs.uk/nhsidentity/identity-guidelines/colours/" }, { "name": "NHS Light Blue", "hex": "#41B6E6", "role": "Level 1 blue. Pantone 298", "prov": "published", "source": "https://www.england.nhs.uk/nhsidentity/identity-guidelines/colours/" }, { "name": "NHS Aqua Blue", "hex": "#00A9CE", "role": "Level 1 blue. Pantone 312", "prov": "published", "source": "https://www.england.nhs.uk/nhsidentity/identity-guidelines/colours/" }, { "name": "NHS Black", "hex": "#231F20", "role": "Level 2 neutral (identity guide). Type; never a logo background. Pantone Black 6", "prov": "published", "source": "https://www.england.nhs.uk/nhsidentity/identity-guidelines/colours/" }, { "name": "NHS Dark Grey", "hex": "#425563", "role": "Level 2 neutral. Type; never a background. Pantone 7545", "prov": "published", "source": "https://www.england.nhs.uk/nhsidentity/identity-guidelines/colours/" }, { "name": "NHS Mid Grey", "hex": "#768692", "role": "Level 2 neutral. Pantone 7544. Same hex as frontend grey-2", "prov": "published", "source": "https://www.england.nhs.uk/nhsidentity/identity-guidelines/colours/", "also": [ "https://github.com/nhsuk/nhsuk-frontend/blob/main/packages/nhsuk-frontend/src/nhsuk/core/settings/_colours-palette.scss" ] }, { "name": "NHS Pale Grey", "hex": "#E8EDEE", "role": "Level 2 neutral. Backgrounds online. Pantone 7541", "prov": "published", "source": "https://www.england.nhs.uk/nhsidentity/identity-guidelines/colours/" }, { "name": "NHS Dark Green", "hex": "#006747", "role": "Level 3 support green (identity guide). Moderate, secondary use. Pantone 342", "prov": "published", "source": "https://www.england.nhs.uk/nhsidentity/identity-guidelines/colours/" }, { "name": "NHS Green (identity)", "hex": "#009639", "role": "Level 3 support green (identity guide). Pantone 355", "prov": "published", "source": "https://www.england.nhs.uk/nhsidentity/identity-guidelines/colours/" }, { "name": "NHS Light Green", "hex": "#78BE20", "role": "Level 3 support green. Pantone 368", "prov": "published", "source": "https://www.england.nhs.uk/nhsidentity/identity-guidelines/colours/" }, { "name": "NHS Aqua Green", "hex": "#00A499", "role": "Level 3 support green. Pantone 3272; also frontend aqua-green", "prov": "published", "source": "https://www.england.nhs.uk/nhsidentity/identity-guidelines/colours/", "also": [ "https://github.com/nhsuk/nhsuk-frontend/blob/main/packages/nhsuk-frontend/src/nhsuk/core/settings/_colours-palette.scss" ] }, { "name": "NHS Purple", "hex": "#330072", "role": "Level 4 highlight. Minimal use, never large blocks. Pantone 2685; frontend dark-purple and link visited colour", "prov": "published", "source": "https://www.england.nhs.uk/nhsidentity/identity-guidelines/colours/", "also": [ "https://github.com/nhsuk/nhsuk-frontend/blob/main/packages/nhsuk-frontend/src/nhsuk/core/settings/_colours-palette.scss", "https://github.com/nhsuk/nhsuk-frontend/blob/main/packages/nhsuk-frontend/src/nhsuk/core/settings/_colours-applied.scss" ] }, { "name": "Dark Pink", "hex": "#7C2855", "role": "Level 4 highlight. Pantone 683", "prov": "published", "source": "https://www.england.nhs.uk/nhsidentity/identity-guidelines/colours/" }, { "name": "NHS Pink", "hex": "#AE2573", "role": "Level 4 highlight. Pantone 675; also frontend pink", "prov": "published", "source": "https://www.england.nhs.uk/nhsidentity/identity-guidelines/colours/", "also": [ "https://github.com/nhsuk/nhsuk-frontend/blob/main/packages/nhsuk-frontend/src/nhsuk/core/settings/_colours-palette.scss" ] }, { "name": "NHS Dark Red", "hex": "#8A1538", "role": "Level 4 highlight. Pantone 1955", "prov": "published", "source": "https://www.england.nhs.uk/nhsidentity/identity-guidelines/colours/" }, { "name": "Emergency Services Red", "hex": "#DA291C", "role": "Level 4 highlight. Strong emergency association; use with care elsewhere. Pantone 485, RAL 3020", "prov": "published", "source": "https://www.england.nhs.uk/nhsidentity/identity-guidelines/colours/" }, { "name": "NHS Orange", "hex": "#ED8B00", "role": "Level 4 highlight. Pantone 144; also frontend orange", "prov": "published", "source": "https://www.england.nhs.uk/nhsidentity/identity-guidelines/colours/", "also": [ "https://github.com/nhsuk/nhsuk-frontend/blob/main/packages/nhsuk-frontend/src/nhsuk/core/settings/_colours-palette.scss" ] }, { "name": "NHS Warm Yellow", "hex": "#FFB81C", "role": "Level 4 highlight. Pantone 1235; also frontend warm-yellow", "prov": "published", "source": "https://www.england.nhs.uk/nhsidentity/identity-guidelines/colours/", "also": [ "https://github.com/nhsuk/nhsuk-frontend/blob/main/packages/nhsuk-frontend/src/nhsuk/core/settings/_colours-palette.scss" ] }, { "name": "NHS Yellow", "hex": "#FAE100", "role": "Level 4 highlight (identity guide). Process Yellow", "prov": "published", "source": "https://www.england.nhs.uk/nhsidentity/identity-guidelines/colours/" }, { "name": "Pale blue (digital)", "hex": "#CCDFF1", "role": "NHS.UK frontend palette pale-blue", "prov": "published", "source": "https://github.com/nhsuk/nhsuk-frontend/blob/main/packages/nhsuk-frontend/src/nhsuk/core/settings/_colours-palette.scss" }, { "name": "Black (digital text)", "hex": "#212B32", "role": "NHS.UK frontend black: $nhsuk-text-colour, all body and heading text online", "prov": "published", "source": "https://github.com/nhsuk/nhsuk-frontend/blob/main/packages/nhsuk-frontend/src/nhsuk/core/settings/_colours-palette.scss", "also": [ "https://service-manual.nhs.uk/design-system/styles/colour" ] }, { "name": "Grey 1", "hex": "#4C6272", "role": "Secondary text colour and input border online", "prov": "published", "source": "https://github.com/nhsuk/nhsuk-frontend/blob/main/packages/nhsuk-frontend/src/nhsuk/core/settings/_colours-palette.scss", "also": [ "https://service-manual.nhs.uk/design-system/styles/colour" ] }, { "name": "Grey 3", "hex": "#AEB7BD", "role": "Secondary border colour; hover colour", "prov": "published", "source": "https://github.com/nhsuk/nhsuk-frontend/blob/main/packages/nhsuk-frontend/src/nhsuk/core/settings/_colours-palette.scss" }, { "name": "Grey 4", "hex": "#D8DDE0", "role": "Border colour; template background", "prov": "published", "source": "https://github.com/nhsuk/nhsuk-frontend/blob/main/packages/nhsuk-frontend/src/nhsuk/core/settings/_colours-palette.scss", "also": [ "https://service-manual.nhs.uk/design-system/styles/colour" ] }, { "name": "Grey 5", "hex": "#F0F4F5", "role": "Page background tint online: reduces glare, dark text on light-not-white ground", "prov": "published", "source": "https://github.com/nhsuk/nhsuk-frontend/blob/main/packages/nhsuk-frontend/src/nhsuk/core/settings/_colours-palette.scss", "also": [ "https://service-manual.nhs.uk/design-system/styles/colour" ] }, { "name": "Dark green (digital)", "hex": "#004C23", "role": "Frontend dark-green", "prov": "published", "source": "https://github.com/nhsuk/nhsuk-frontend/blob/main/packages/nhsuk-frontend/src/nhsuk/core/settings/_colours-palette.scss" }, { "name": "Green (digital)", "hex": "#007F3B", "role": "Success colour and primary button colour online", "prov": "published", "source": "https://github.com/nhsuk/nhsuk-frontend/blob/main/packages/nhsuk-frontend/src/nhsuk/core/settings/_colours-palette.scss", "also": [ "https://service-manual.nhs.uk/design-system/styles/colour" ] }, { "name": "Pale green", "hex": "#CCE5D8", "role": "Frontend pale-green", "prov": "published", "source": "https://github.com/nhsuk/nhsuk-frontend/blob/main/packages/nhsuk-frontend/src/nhsuk/core/settings/_colours-palette.scss" }, { "name": "Pale aqua green", "hex": "#BAE6E3", "role": "Frontend pale-aqua-green", "prov": "published", "source": "https://github.com/nhsuk/nhsuk-frontend/blob/main/packages/nhsuk-frontend/src/nhsuk/core/settings/_colours-palette.scss" }, { "name": "Dark aqua green", "hex": "#004A45", "role": "Frontend dark-aqua-green", "prov": "published", "source": "https://github.com/nhsuk/nhsuk-frontend/blob/main/packages/nhsuk-frontend/src/nhsuk/core/settings/_colours-palette.scss" }, { "name": "Purple (digital)", "hex": "#5C338E", "role": "Frontend purple", "prov": "published", "source": "https://github.com/nhsuk/nhsuk-frontend/blob/main/packages/nhsuk-frontend/src/nhsuk/core/settings/_colours-palette.scss" }, { "name": "Pale purple", "hex": "#DED6E8", "role": "Frontend pale-purple", "prov": "published", "source": "https://github.com/nhsuk/nhsuk-frontend/blob/main/packages/nhsuk-frontend/src/nhsuk/core/settings/_colours-palette.scss" }, { "name": "Dark pink (digital)", "hex": "#6E234B", "role": "Frontend dark-pink", "prov": "published", "source": "https://github.com/nhsuk/nhsuk-frontend/blob/main/packages/nhsuk-frontend/src/nhsuk/core/settings/_colours-palette.scss" }, { "name": "Pale pink", "hex": "#EFD3E3", "role": "Frontend pale-pink", "prov": "published", "source": "https://github.com/nhsuk/nhsuk-frontend/blob/main/packages/nhsuk-frontend/src/nhsuk/core/settings/_colours-palette.scss" }, { "name": "Dark red (digital)", "hex": "#801810", "role": "Frontend dark-red", "prov": "published", "source": "https://github.com/nhsuk/nhsuk-frontend/blob/main/packages/nhsuk-frontend/src/nhsuk/core/settings/_colours-palette.scss" }, { "name": "Red (digital)", "hex": "#D5281B", "role": "Error colour; urgent care cards", "prov": "published", "source": "https://github.com/nhsuk/nhsuk-frontend/blob/main/packages/nhsuk-frontend/src/nhsuk/core/settings/_colours-palette.scss", "also": [ "https://service-manual.nhs.uk/design-system/styles/colour" ] }, { "name": "Pale red", "hex": "#F7D4D1", "role": "Frontend pale-red", "prov": "published", "source": "https://github.com/nhsuk/nhsuk-frontend/blob/main/packages/nhsuk-frontend/src/nhsuk/core/settings/_colours-palette.scss" }, { "name": "Dark orange", "hex": "#5F3800", "role": "Frontend dark-orange", "prov": "published", "source": "https://github.com/nhsuk/nhsuk-frontend/blob/main/packages/nhsuk-frontend/src/nhsuk/core/settings/_colours-palette.scss" }, { "name": "Pale orange", "hex": "#FBE8CC", "role": "Frontend pale-orange", "prov": "published", "source": "https://github.com/nhsuk/nhsuk-frontend/blob/main/packages/nhsuk-frontend/src/nhsuk/core/settings/_colours-palette.scss" }, { "name": "Dark warm yellow", "hex": "#664A0B", "role": "Frontend dark-warm-yellow", "prov": "published", "source": "https://github.com/nhsuk/nhsuk-frontend/blob/main/packages/nhsuk-frontend/src/nhsuk/core/settings/_colours-palette.scss" }, { "name": "Pale warm yellow", "hex": "#FFF1D2", "role": "Frontend pale-warm-yellow", "prov": "published", "source": "https://github.com/nhsuk/nhsuk-frontend/blob/main/packages/nhsuk-frontend/src/nhsuk/core/settings/_colours-palette.scss" }, { "name": "Dark yellow", "hex": "#595215", "role": "Frontend dark-yellow", "prov": "published", "source": "https://github.com/nhsuk/nhsuk-frontend/blob/main/packages/nhsuk-frontend/src/nhsuk/core/settings/_colours-palette.scss" }, { "name": "Yellow (focus)", "hex": "#FFEB3B", "role": "Focus state colour; warning callouts", "prov": "published", "source": "https://github.com/nhsuk/nhsuk-frontend/blob/main/packages/nhsuk-frontend/src/nhsuk/core/settings/_colours-palette.scss", "also": [ "https://service-manual.nhs.uk/design-system/styles/colour" ] }, { "name": "Pale yellow", "hex": "#FFF9C4", "role": "Frontend pale-yellow", "prov": "published", "source": "https://github.com/nhsuk/nhsuk-frontend/blob/main/packages/nhsuk-frontend/src/nhsuk/core/settings/_colours-palette.scss", "also": [ "https://service-manual.nhs.uk/design-system/styles/colour" ] }, { "name": "Search button tint", "hex": "#EDF4FA", "role": "Header search submit button fill (NHS Blue tint), observed", "prov": "observed", "source": "https://www.nhs.uk/ (Wayback snapshot 20261026012022, measured 2026-10-31)" }, { "name": "Hero caption blue", "hex": "#D2E2F1", "role": "Hero caption line \"NHS website for England\" on the NHS Blue panel (reverse secondary text = 78% tint of NHS Blue), observed", "prov": "observed", "source": "https://www.nhs.uk/ (Wayback snapshot 20261026012022, measured 2026-10-31)" }, { "name": "My account blue", "hex": "#004B93", "role": "\"My account\" button fill and border in the header (20% shade of NHS Blue), observed", "prov": "observed", "source": "https://www.nhs.uk/ (Wayback snapshot 20261026012022, measured 2026-10-31)" }, { "name": "Header hairline blue", "hex": "#337EC6", "role": "1px line between header top row and nav row (box-shadow 0 -1px 0 0), observed", "prov": "observed", "source": "https://www.nhs.uk/ (Wayback snapshot 20261026012022, measured 2026-10-31)" }, { "name": "Button shadow green", "hex": "#00401E", "role": "Computed shade used by NHS.UK frontend for the primary button (50% / 20% shade of #007F3B)", "prov": "inferred", "source": "https://github.com/nhsuk/nhsuk-frontend/blob/main/packages/nhsuk-frontend/src/nhsuk/core/settings/_colours-applied.scss" }, { "name": "Button hover green", "hex": "#00662F", "role": "Computed shade used by NHS.UK frontend for the primary button (50% / 20% shade of #007F3B)", "prov": "inferred", "source": "https://github.com/nhsuk/nhsuk-frontend/blob/main/packages/nhsuk-frontend/src/nhsuk/core/settings/_colours-applied.scss" } ] }, "typography": { "display": { "family": "Istok Web", "steal_family": "Istok Web", "weight": 700, "line_height": 1.125, "tracking": 0, "fallback_stack": "\"Istok Web\", Arial, sans-serif", "real": "Frutiger 65 Bold (web: Frutiger W01 at font-weight 600). Licensed by NHS England for NHS organisations in England only (perpetual licence, Dec 2024, three weights)", "stand_in": true, "prov": "published", "source": "https://www.england.nhs.uk/nhsidentity/identity-guidelines/fonts/", "also": [ "https://service-manual.nhs.uk/design-system/styles/typography", "https://github.com/nhsuk/nhsuk-frontend/blob/main/packages/nhsuk-frontend/src/nhsuk/core/settings/_globals.scss" ], "files": [], "google": "https://fonts.googleapis.com/css2?family=Istok+Web:wght@400;700&display=swap", "site": { "prov": "observed", "source": "https://www.nhs.uk/ (Wayback snapshot 20261026012022, measured 2026-10-31)", "family": "\"Frutiger W01\", arial, sans-serif", "weights": "400 body, 600 headings, links in cards and action links" } }, "body": { "family": "Istok Web", "steal_family": "Istok Web", "weight": 400, "line_height": 1.474, "tracking": 0.015, "scale": 1, "fallback_stack": "\"Istok Web\", Arial, sans-serif", "real": "Frutiger 55 Roman (web: Frutiger W01 400)", "stand_in": true, "prov": "published", "source": "https://www.england.nhs.uk/nhsidentity/identity-guidelines/fonts/", "also": [ "https://service-manual.nhs.uk/design-system/styles/typography", "https://github.com/nhsuk/nhsuk-frontend/blob/main/packages/nhsuk-frontend/src/nhsuk/core/settings/_globals.scss" ], "files": [], "google": "https://fonts.googleapis.com/css2?family=Istok+Web:wght@400;700&display=swap", "site": { "prov": "observed", "source": "https://www.nhs.uk/ (Wayback snapshot 20261026012022, measured 2026-10-31)", "family": "\"Frutiger W01\", arial, sans-serif", "weights": "400 body, 600 headings, links in cards and action links" } }, "mono": { "family": "JetBrains Mono", "steal_family": "JetBrains Mono", "weight": 400, "fallback_stack": "menlo, \"Cascadia Mono\", \"Segoe UI Mono\", consolas, \"Liberation Mono\", monospace", "real": "No brand mono; NHS.UK frontend uses a system monospace stack for code only", "stand_in": true, "prov": "published", "source": "https://github.com/nhsuk/nhsuk-frontend/blob/main/packages/nhsuk-frontend/src/nhsuk/core/settings/_typography.scss" }, "calibration": "Real face Frutiger W01 (55 Roman 400; 65 Bold rendered at CSS weight 600) is licensed to NHS organisations only. Stand-in: Istok Web (Google Fonts, OFL; weights 400 and 700 only). Calibrated 2026-10-31 by rendering the same lines in Frutiger W01 (the site's own woff2) and 29 open candidates at the same size, weight and tracking 0. Headings: \"Find information and services to help you\" 48px: Frutiger 600 = 938.8px; Istok Web 700 +0.3% width, -0.9% ink. \"More information and advice\" 36px: Istok 700 -1.0% width, -1.0% ink. Body \"Find out about conditions, symptoms, medicines, tests and treatments\" 19px: Frutiger 400 = 618.7px; Istok Web 400 -2.9% width, -10.5% ink; with letter-spacing 0.015em the width matches. x-height at 100px: Frutiger 51, Istok 51; cap height 70 vs 70 (exact). Istok Web shares Frutiger's humanist construction (open apertures, slanted terminals). Round 1 used Onest (width within 1%, but geometric shapes); the grade said it read too geometric and compact, so the book moved to Istok Web. Rules: every heading/link-heading weight is Istok Web 700 (the site's 600); body 400 with letter-spacing 0.015em (0.29px at 19px, 0.24px at 16px); headings letter-spacing 0. Never synthesize 600 (the browser will pick 700 anyway)." }, "style": { "button_shape": "rounded", "button_note": "Primary button: green #007F3B fill, white Frutiger 600 text, 4px radius, 4px solid shadow below in a 50% shade of the green. Secondary: transparent with 2px NHS Blue border. Reverse: white with black text. Warning: red. Login: NHS Blue (NHS.UK frontend applied colours and globals)", "corners": "4px radius on buttons and search; cards are square-cornered", "linework": "4px border width; 4px yellow focus ring; 1px hero border", "motion": "none: the identity and service manual publish no motion system; links and buttons change colour on hover/active only", "radius": 4, "border_width": 4, "prov": "published", "source": "https://github.com/nhsuk/nhsuk-frontend/blob/main/packages/nhsuk-frontend/src/nhsuk/core/settings/_globals.scss", "also": [ "https://github.com/nhsuk/nhsuk-frontend/blob/main/packages/nhsuk-frontend/src/nhsuk/core/settings/_colours-applied.scss" ] }, "voice": { "tone": [ "Clear", "Reassuring", "Personal", "Factual", "Empowering" ], "notes": [ "Neutral and factual; authoritative but calm and reassuring (service manual voice).", "Empowering rather than patronising, personal rather than formal; address the reader as \"you\".", "Written communications should be clear, concise, straightforward, honest, open, professional, respectful and accessible (identity guide, aligned with the NHS Constitution).", "Write so it could be read aloud to one person.", "Tone shifts with the reader's state: direct, serious and reassuring for a diagnosis; encouraging and conversational for exercise or diet.", "Plain English first, medical term second, e.g. piles (haemorrhoids). Reading age 9 to 11 where possible." ], "rules": [ { "id": "headline-case", "kind": "headline_case", "value": "sentence", "prov": "published", "source": "https://service-manual.nhs.uk/content/punctuation" }, { "id": "spelling", "kind": "spelling", "value": "en-GB", "prov": "inferred", "source": "https://service-manual.nhs.uk/content/punctuation", "why": "British public service; the style guide uses British spellings throughout (e.g. \"colour\", \"diarrhoea\")" }, { "id": "person", "kind": "person", "value": "we_you", "prov": "published", "source": "https://service-manual.nhs.uk/content/voice-and-tone" }, { "id": "sentence-length", "kind": "max_sentence_words", "value": 20, "prov": "published", "source": "https://service-manual.nhs.uk/content/how-we-write" }, { "id": "exclamations", "kind": "exclamations", "value": "never", "prov": "inferred", "source": "https://service-manual.nhs.uk/content/voice-and-tone", "why": "Neutral, calm voice; no exclamation marks appear in the published examples" }, { "id": "no-should", "kind": "avoid", "terms": [ "should" ], "instead": "say what to do, e.g. \"talk to your doctor about\"", "why": "\"should\" can sound patronising", "prov": "published", "source": "https://service-manual.nhs.uk/content/voice-and-tone" }, { "id": "do-not", "kind": "avoid", "terms": [ "don't", "can't", "won't", "shouldn't" ], "instead": "do not, cannot", "why": "negative contractions are misread; \"do not\" is clearer", "prov": "published", "source": "https://service-manual.nhs.uk/content/punctuation" }, { "id": "short-words", "kind": "prefer", "term": "have / get", "over": [ "experience" ], "prov": "published", "source": "https://service-manual.nhs.uk/content/how-we-write" }, { "id": "paragraphs", "kind": "guidance", "text": "Short paragraphs of up to 3 sentences; use subheadings and bulleted lists", "prov": "published", "source": "https://service-manual.nhs.uk/content/how-we-write" }, { "id": "active", "kind": "guidance", "text": "Active voice: \"find a pharmacy\", not \"a pharmacy can be found\"", "prov": "published", "source": "https://service-manual.nhs.uk/content/how-we-write" }, { "id": "no-metaphor", "kind": "guidance", "text": "Factual, neutral, unambiguous; no metaphors; say what you mean", "prov": "published", "source": "https://service-manual.nhs.uk/content/how-we-write" }, { "id": "subjective", "kind": "guidance", "text": "Use \"good\", \"bad\" or \"easy\" with care; give the evidence or the number instead", "prov": "published", "source": "https://service-manual.nhs.uk/content/how-we-write" }, { "id": "plain-first", "kind": "guidance", "text": "Plain English term first, then the medical term in brackets", "prov": "published", "source": "https://service-manual.nhs.uk/content/how-we-write" }, { "id": "contractions", "kind": "guidance", "text": "Use positive contractions (you'll, we'll, you're); avoid should've, could've, would've", "prov": "published", "source": "https://service-manual.nhs.uk/content/punctuation" }, { "id": "no-caps", "kind": "guidance", "text": "No block capitals; sentence case everywhere including page titles", "prov": "published", "source": "https://service-manual.nhs.uk/content/punctuation" }, { "id": "no-full-stops", "kind": "guidance", "text": "No full stops in headings, buttons, action links or single-sentence link cards", "prov": "published", "source": "https://service-manual.nhs.uk/content/punctuation" }, { "id": "straight-apostrophes", "kind": "guidance", "text": "Straight, not curly, apostrophes", "prov": "published", "source": "https://service-manual.nhs.uk/content/punctuation" }, { "id": "dashes", "kind": "guidance", "text": "Avoid dashes; if needed, an en dash (–). Avoid hyphens unless the meaning needs one", "prov": "published", "source": "https://service-manual.nhs.uk/content/punctuation" }, { "id": "conditions-lower", "kind": "guidance", "text": "Conditions and generic drug names lower case unless a proper name (type 1 diabetes, Parkinson's disease)", "prov": "published", "source": "https://service-manual.nhs.uk/content/punctuation" }, { "id": "numbers", "kind": "guidance", "text": "Use precise numbers in context (\"4 out of 5 people recover fully in a week\") rather than vague reassurance", "prov": "published", "source": "https://service-manual.nhs.uk/content/how-we-write" }, { "id": "reading-age", "kind": "guidance", "text": "Aim for a reading age of 9 to 11; where clinical content makes that hard, 11 to 14", "prov": "published", "source": "https://service-manual.nhs.uk/content/how-we-write" }, { "id": "jargon", "kind": "guidance", "text": "Avoid jargon, acronyms and unnecessary technical language", "prov": "published", "source": "https://www.england.nhs.uk/nhsidentity/identity-guidelines/tone-of-voice/" }, { "id": "empower", "kind": "guidance", "text": "Empower: \"talk to your doctor about…\" rather than \"your doctor will tell you about…\"", "prov": "published", "source": "https://service-manual.nhs.uk/content/voice-and-tone" }, { "id": "difficult", "kind": "guidance", "text": "On difficult subjects, show genuine understanding and respect; leave the reader informed and empowered", "prov": "published", "source": "https://www.england.nhs.uk/nhsidentity/identity-guidelines/tone-of-voice/" } ], "approved": { "phrases": [ "talk to your doctor about", "find a pharmacy", "4 out of 5 people", "do not" ], "words": [ "you", "get", "have", "find" ] }, "banned": [ "should (patronising)", "don't / can't (use do not, cannot)", "block capitals", "metaphors", "\"a good chance of recovery\" (vague)", "\"approved\", \"endorsed\", \"certified\" by the NHS (suppliers)" ], "is_not": [ [ "Authoritative", "Formal" ], [ "Reassuring", "Vague" ], [ "Empowering", "Patronising" ], [ "Personal", "Chatty" ], [ "Factual", "Cold" ] ], "prov": "published", "source": "https://service-manual.nhs.uk/content/voice-and-tone", "also": [ "https://www.england.nhs.uk/nhsidentity/identity-guidelines/tone-of-voice/", "https://service-manual.nhs.uk/content/how-we-write", "https://service-manual.nhs.uk/content/punctuation" ] }, "spec": { "source": "https://www.england.nhs.uk/nhsidentity/identity-guidelines/", "how": "Identity law from the NHS Identity Guidelines; digital application from the NHS digital service manual and NHS.UK frontend; page anatomy measured on www.nhs.uk (Wayback snapshot 2026-10-26).", "provenance": "published + observed", "motion": [], "icons": { "grid": "24px viewBox", "sizes": [ { "name": "small", "px": 20 }, { "name": "default", "px": 24 }, { "name": "large", "px": 32 } ], "stroke": "solid filled shapes, no strokes", "caps_joins": "n/a (filled)", "color": "functional: NHS Blue, green #007F3B for action arrows, white on blue", "rule": "Functional only: arrows, chevrons in circles, tick/cross, search, user; never decorative; no red cross or plus symbols", "prov": "published", "source": "https://service-manual.nhs.uk/design-system/styles/icons" }, "signature": [ { "name": "NHS Blue header", "where": "top of every NHS web page", "spec": "solid #005EB8 band, white lozenge logo top left at 40px high, white underlined nav links; no graphic devices or straplines at the top of the page", "dont": "put imagery or straplines in the header area", "prov": "published", "source": "https://www.england.nhs.uk/nhsidentity/identity-guidelines/visual-styles-graphic-devices-and-straplines/" }, { "name": "Grey page, white square cards", "where": "content sections", "spec": "#F0F4F5 page ground; white cards with 1px #D8DDE0 border and a 3px #D8DDE0 underline shadow, square corners", "dont": "round the cards or add drop shadows", "prov": "observed", "source": "https://www.nhs.uk/" }, { "name": "Green action link", "where": "links that start a task or service", "spec": "green #007F3B circle with a cut-out arrow, then bold blue text", "dont": "use it for ordinary navigation", "prov": "published", "source": "https://service-manual.nhs.uk/design-system/styles/icons" } ], "page": { "source": "https://www.nhs.uk/ (Wayback snapshot 20261026012022, measured 2026-10-31)", "date": "2026-10-31", "prov": "observed", "voices": "The homepage voice is the service-manual content voice: plain, task-first, sentence case, no slogans. Headings are the names of tasks and services; descriptions are one plain sentence. The identity guide's tone rules (clear, concise, honest, personal) are the same voice. Landing pages follow this homepage voice.", "no_cookie_banner": "The reference was captured with the cookie banner dismissed and hidden. Do NOT build a cookie banner or confirmation bar.", "page": { "width_desktop": 1440, "container": "960px centred (x 240-1200 at 1440), padding 0; phone 16px side gutters (content x 16-374 at 390)", "page_ground": "#F0F4F5 body; sections alternate grey-5 #F0F4F5 and white #FFFFFF full-bleed", "height": "3096px at 1440; 4424px at 390", "font": "Istok Web (stand-in for Frutiger W01), text #212B32" }, "nav": { "cookie_banner": "The reference was captured with the cookie banner dismissed and hidden. Do NOT build a cookie banner or confirmation bar.", "page_frame": "Container 960px centred (x 240-1200 at 1440), phone 16px gutters (x 16-374). Body ground #F0F4F5; sections alternate #F0F4F5 and #FFFFFF full bleed. Page height 3096px at 1440, 4424px at 390. All text Istok Web (Frutiger stand-in) #212B32 unless stated.", "voice_on_page": "The homepage voice is the service-manual content voice: plain, task-first, sentence case, no slogans. Headings are the names of tasks and services; descriptions are one plain sentence. The identity guide's tone rules (clear, concise, honest, personal) are the same voice. Landing pages follow this homepage voice.", "summary": "Solid NHS Blue #005EB8 header, 128px tall at desktop in two rows: top row (72px) logo left, search + My account right; second row (56px) five white underlined links. No sticky.", "ground": "#005EB8 full bleed; a 1px #337EC6 line (box-shadow 0 -1px 0 0 #337EC6) on top of the nav row, spanning the 960px container only (x 240-1200)", "height": "128px desktop (72 + 56); 189px phone (130 + 59)", "border": "none at bottom", "logo": { "variant": "white lozenge: white rectangle with the letters NHS cut out, so the blue header shows through the letters (asset nav-nhs-logo-white.svg)", "px": "100x40 at x 240, y 16 desktop; 100x40 at x 16, y 16 phone", "position": "top left (digital exception to the top-right print rule)", "size_note": "nhs.uk draws the logo 100x40 at both widths with 16px margins (observed), not the identity guide's 30px mobile size; follow the observed size on this page." }, "search": { "desktop": "x 794-1073, y 16, 279x40: input 235x40 white #FFFFFF, 1px solid #FFFFFF border, radius 4px 0 0 4px, padding 0 12px, placeholder \"Search\" 16px #4C6272-ish grey; submit button 44x40 fill #EDF4FA, radius 0 4px 4px 0, blue magnifier icon 28x28 #005EB8 centred", "phone": "second line of the top row: x 16-374, y 74, 358x40 (input 314 + button 44)", "placeholder": "\"Search\" 16px #4C6272" }, "actions": "\"My account\" button: x 1088, y 15, 113x42 (phone x 262, y 16, 112x42), fill #004B93, 1px solid #004B93 border, radius 4px, padding 8px 12px, text 16px/24px 400 white, underlined", "links": { "count": 5, "labels": [ "Health A to Z", "NHS services", "Healthy living", "Mental health", "Care and support" ], "size": "16px/24px 400", "color": "#FFFFFF", "decoration": "underline always (1px, auto offset)", "alignment": "left, first link text starts x 240; items padded 0 16px with link padding 16px 2px; row y 72-128; link x positions 240, 376, 503, 642, 784", "positions_rule": "Keep the measured x positions (240, 376, 503, 642, 784) over the padding when the stand-in changes the word widths." }, "sticky": false, "phone": { "what_shows": "Row 1: logo left + My account right (y 16). Row 2: full-width search (y 74). Row 3 (y 130-189, 59px): \"Health A to Z\", \"NHS services\", then \"More\" with a white down-chevron (button). The other three links go into the More dropdown.", "menu": "More opens a white dropdown list of the five links (not shown at rest)", "cta": "none", "positions": "Third row: link text \"Health A to Z\" x 16-120, \"NHS services\" x 136-232, \"More\" button x 247-308 (text from x 249, 16px white chevron-down after the word, 8px gap); items are padded 0 8px (not 16px as on desktop); link padding 16px 2px; row 59px tall; all three underlined.", "divider": "No divider line on phone: the 1px #337EC6 rule is desktop only (between the logo row and the nav row). Phone header is uninterrupted blue from y 0 to 189.", "more_menu": "At rest the dropdown is closed and invisible. Chevron: white, 16px, pointing down." }, "optical": "Istok Web sits about 2px higher in a line box than Frutiger: nudge text blocks down 2px (padding-top +2px) in nav links, card headings and the hero panel to match Frutiger's ink position." }, "hero": { "summary": "Full-bleed photo band (369px) with an NHS Blue text panel at the left of the container; two white cards overlap the bottom of the photo by 90px.", "desktop": { "band": "y 128-497, 1440x369, ground #005EB8 under a cover photo (hero-photo.png, background-size cover, background-position 100% 50%, no-repeat); padding 10px 0 90px", "panel": "NHS Blue #005EB8 box x 240-952 (712px wide), y 170-375 (205px tall), padding 32px 24px, square corners, no border; sits 32px below the band top + 10px", "text": "Line 1 caption \"NHS website for England\" 32px/36px 600 (Frutiger; set Istok Web 700) (Frutiger; set Istok Web 700) #D2E2F1 (1 line, y 202); line 2 headline \"Find information and services to help you manage your health\" 43.2px/48.6px 600 (Frutiger; set Istok Web 700) (Frutiger; set Istok Web 700) #FFFFFF in 2 lines (y 238-335, break after \"to\"). Both are spans inside one h1; text width 664px. 8px margin below the h1. With Istok Web the 664px line still breaks after \"to\" (2 lines); if a stand-in breaks differently keep 2 lines at 664px by keeping the same words per line.", "cta": "none in the hero", "media": "photo only; no overlay tint", "photo_behind_cards": "UNMISSABLE: the photo band runs y 128-497. The two hero cards start at y 407, so for 90px the photo shows on both sides of and between the cards. Do NOT paint the grey #F0F4F5 ground behind the top 90px of the cards: grey starts at y 497 (desktop) and y 536 (phone). Build it as: hero section padding-bottom 90px; the cards container margin-top -90px with position:relative; the cards section must not have a background on its top 90px (use a ::before grey layer starting at 90px, or put the ground on a wrapper below)." }, "phone": { "band": "y 189-536, 390x347, background-position 70% 50%", "panel": "x 16-374 (358 wide), y 231-414 (183 tall), padding 16px", "text": "caption 24px/28.5px 600 (Frutiger; set Istok Web 700) (Frutiger; set Istok Web 700) #D2E2F1 (1 line); headline 32px/38px 600 (Frutiger; set Istok Web 700) (Frutiger; set Istok Web 700) white in 3 lines", "order": "photo band, panel inside it, then the cards overlap below" }, "at_rest": "static; nothing animates", "media": "hero-photo.png (1000x439, clinician holding a tablet, right side); the panel covers the left of the photo", "type": "see spec.type display-hero-caption and display-hero", "proof": "none" }, "sections": [ { "name": "Hero cards: Health A to Z and NHS services", "summary": "Two big white link cards side by side, pulled up 90px over the hero photo; grey-5 ground below.", "ground": "#F0F4F5 (section), cards #FFFFFF", "desktop": "section y 407-664; container margin-top -90px so cards start at y 407 (90px above hero bottom 497). Two cards 464x206 at x 240 and x 736 (32px gap), y 407. Section bottom = card bottom + 51px.", "phone": "cards stacked, 358x191 each at y 446 and y 653 (16px gap), section ends y 872", "anatomy": [ "Card: white #FFFFFF, 1px solid #D8DDE0 border, square corners, box-shadow 0 3px 0 0 #D8DDE0 (a 3px grey underline)", "Content padding 32px 80px 32px 32px desktop (24px 72px 24px 24px phone)", "Heading: blue #005EB8 underlined link, 26px/32px 600 (Frutiger; set Istok Web 700) (Frutiger; set Istok Web 700) (phone 22px/29px), margin-bottom 24px (16 phone); headings are \"Health A to Z\" and \"NHS services\"", "Description: 19px/28px 400 #212B32, 3 lines at desktop (350px wide), one sentence, no full stop: what the hub covers (conditions, symptoms, medicines, tests, treatments / GPs, pharmacies, prescriptions, hospitals, dentists)", "Icon: blue chevron-in-circle 32x32 #005EB8 (icon-chevron-right-circle-blue.svg), absolutely placed right: x = card right - 65 (desktop x 639 / 1135), vertically centred on the card (y 494)", "Whole card clickable" ], "components": [ "card_primary" ], "copy": [ "Health A to Z: \"Find out about conditions, symptoms, medicines, tests and treatments, including when to get help\" (3 lines desktop at 350px, 4 lines phone)", "NHS services: \"Find out about NHS services including GPs, pharmacies, prescriptions, hospitals and dentists\" (3 lines desktop, 4 phone)" ], "spacing": "Desktop: cards 464x206, card margin-bottom 51px, so the section ends y 664. Phone: cards 358x191, 16px apart, section ends 28px below the second card (y 872)." }, { "name": "Manage your health", "summary": "H2 plus four green action links in a single column.", "ground": "#F0F4F5", "desktop": "section y 664-1014 (350px), padding-bottom 28px; H2 at y 664 (no top padding: it follows the card section's 51px bottom space), list starts y 730, rows every 58px (y 730, 788, 846, 904); column 704px wide (two-thirds)", "phone": "y 872-1201. H2 y 872 (27px/33px, margin 16px); rows at y 929, 976, 1023, 1094 (two-line labels 56px); icon 24x24 at x 14 (2px outside the gutter), text from x 42 (28px right of the icon left edge); text 19px/24px 700 blue.", "anatomy": [ "H2 \"Manage your health\" 36px/42px 600 (Frutiger; set Istok Web 700) (Frutiger; set Istok Web 700) #212B32, margin-bottom 24px", "4 action links, each li padding 8px 0 6px: green arrow-in-circle icon 36x36 #007F3B (icon-arrow-right-circle-green.svg) at left (x 236), text 22px/36px 600 (Frutiger; set Istok Web 700) (Frutiger; set Istok Web 700) #005EB8 NOT underlined, starting x 280", "Labels (wayfinding, verbatim): \"Order a repeat prescription\", \"View your test results\", \"Find out how to book an appointment at your GP surgery\", \"Find out how to register with a GP surgery\"" ], "components": [ "action_link" ], "spacing": "Desktop: H2 y 664, margin-bottom 24px; list y 730; each li is 58px (padding 8px 0 6px around a 44px link); list margin-bottom 24px; section padding-bottom 28px. Icon left edge x 236 (4px left of the container edge), text from x 280. Phone: H2 y 872 (27px/33px, margin 16px); rows at y 929, 976, 1023, 1094 (two-line labels 56px); icon 24x24 at x 14 (2px outside the gutter), text from x 42 (28px right of the icon left edge); text 19px/24px 700 blue." }, { "name": "NHS services", "summary": "White band: H2, then two half columns: a stack of four solid blue link bars plus one action link on the left; a grey \"Help from NHS 111\" card on the right.", "ground": "#FFFFFF", "desktop": "section y 1014-1530, padding 64px 0 28px; H2 y 1078; columns start y 1144: left x 240-704 (464), right x 736-1200 (464)", "phone": "y 1201-1950. section padding 48px 0 28px; H2 27px/33px with 16px margin-bottom; bars start y 1308 (26px under the H2), 48px tall (72 for 2 lines), 4px apart; action link at y 1554; the grey 111 card follows at y 1611 (25px below the action link), full width 358, padding 24px (NOT 32), heading 22px/29px with 16px margin-bottom, paragraphs 16px/24px with 16px between them; card bottom + 40px margin.", "anatomy": [ "H2 \"NHS services\" 36px/42px 600 (Frutiger; set Istok Web 700) (Frutiger; set Istok Web 700), margin-bottom 24px", "Blue link bars: 464x52 each (two-line one 80px), fill #005EB8, square corners, padding 12px 24px, text 19px/28px 400 white NOT underlined, white chevron 24x24 at right (x 668), 4px gap between bars (y 1154, 1210, 1266, 1322); phone 16px/24px, padding 12px 16px, 48px tall", "Bar labels verbatim: \"Find a pharmacy\", \"Find a dentist\", \"Find a GP\", \"Find NHS talking therapies for anxiety and depression\" (wraps to 2 lines)", "Below the bars (y 1428): action link \"Find other NHS services\" (green arrow 36px, 22px 600 (Frutiger; set Istok Web 700) blue text)", "Right: card 464x310 at y 1144, fill #F0F4F5 (grey, not white), 1px solid #D8DDE0 border, no shadow, padding 32px; H3 \"Help from NHS 111\" 26px/32px 600 (Frutiger; set Istok Web 700) (Frutiger; set Istok Web 700) #212B32 (not a link) margin-bottom 24px; then 3 paragraphs 19px/28px with 24px gaps: a 3-line explanation that NHS 111 tells you what to do next if you are worried about a symptom; \"Go to 111.nhs.uk or call 111.\" with the two underlined blue links; \"For a life-threatening emergency call 999.\"" ], "components": [ "link_bar", "action_link", "card_panel_grey" ], "copy": [ "NHS 111 card paragraph 1 (3 lines desktop, 3 phone): if you are worried about a symptom and not sure what help you need, NHS 111 can tell you what to do next", "Paragraph 2: \"Go to 111.nhs.uk or call 111.\" — the link texts are \"111.nhs.uk\" and \"call 111\"", "Paragraph 3: \"For a life-threatening emergency call 999.\"" ], "spacing": "Desktop: column top y 1144; the bar list has margin-top 10px (first bar y 1154); bars 4px apart; action link \"Find other NHS services\" 26px below the last bar (y 1428). Phone: section padding 48px 0 28px; H2 27px/33px with 16px margin-bottom; bars start y 1308 (26px under the H2), 48px tall (72 for 2 lines), 4px apart; action link at y 1554; the grey 111 card follows at y 1611 (25px below the action link), full width 358, padding 24px (NOT 32), heading 22px/29px with 16px margin-bottom, paragraphs 16px/24px with 16px between them; card bottom + 40px margin." }, { "name": "Featured", "summary": "Grey band: H2 and three equal white link cards.", "ground": "#F0F4F5", "desktop": "section y 1530-2093, padding 64px 0 28px; H2 y 1594; cards row y 1660, three columns 299px wide at x 240, 571, 901 (32px gaps), all stretched to the same height 354px", "phone": "y 1950-2744. padding 48px 0 28px; H2 + 16px; cards full width 358, padding 24px, 19px apart; heading 22px/29px 2-3 lines + 16px; description 16px/24px; list margin-bottom 40px.", "anatomy": [ "H2 \"Featured\" 36px/42px 600 (Frutiger; set Istok Web 700) (Frutiger; set Istok Web 700)", "Card: #FFFFFF, 1px solid #D8DDE0, square, box-shadow 0 3px 0 0 #D8DDE0, padding 32px (24 phone); no icon", "Card heading: blue underlined link 26px/32px 600 (Frutiger; set Istok Web 700) (Frutiger; set Istok Web 700), 3 lines at 233px text width, margin-bottom 24px", "Description 19px/28px 400 #212B32, 2-6 lines", "Card headings verbatim: \"Find a walk-in COVID-19 vaccination site\", \"Find a pharmacy that offers free flu vaccination\", \"Refer yourself for help for back and joint problems\"; descriptions are one plain sentence each about the service (no full stop)" ], "components": [ "card_primary" ], "copy": [ "Walk-in COVID-19 vaccination: one sentence of about 17 words on finding a vaccination site or pharmacy that offers COVID-19 vaccinations without an appointment (5 lines at 233px)", "Free flu vaccination: one sentence of about 11 words on using the service to find a pharmacy offering flu vaccinations (3 lines)", "Back and joint problems: one sentence of about 16 words on getting NHS help from community musculoskeletal (MSK) services such as physiotherapy (6 lines; this tallest card sets the row height 354)" ], "spacing": "Desktop: padding 64px 0 28px; H2 42px + 24px margin; cards row y 1660, all 354px tall (stretch to the tallest); card margin-bottom 35px + list margin-bottom 16px = 51px under the cards; section ends y 2093. Phone: padding 48px 0 28px; H2 + 16px; cards full width 358, padding 24px, 19px apart; heading 22px/29px 2-3 lines + 16px; description 16px/24px; list margin-bottom 40px." }, { "name": "More information and advice", "summary": "White band: H2 and a 3-column grid of borderless link cards, each with a grey underline.", "ground": "#FFFFFF", "desktop": "section y 2093-2771, padding 64px 0 28px; H2 y 2157 (960 wide); grid rows at y 2223 and 2483; columns 299px at x 240, 571, 901; row 1 has 3 cards, row 2 has 2 (third cell empty)", "phone": "y 2744-3723. padding 48px 16px 28px; H2 27px/33px in 2 lines + 16px; cards full width, content padding 0 0 24px, heading 22px/29px + 16px, description 16px/24px, 19px between cards (card margin-bottom 19px; heights 142/142/118/…).", "anatomy": [ "H2 \"More information and advice\" 36px/42px 600 (Frutiger; set Istok Web 700) (Frutiger; set Istok Web 700) (phone 2 lines)", "Card: transparent (white band shows), NO side/top border, only a 1px #D8DDE0 bottom border plus box-shadow 0 3px 0 0 #D8DDE0 (a 4px grey underline in total); content padding 0 0 32px; card height 201; 24px between rows (li margin-bottom 24px plus card margin 35px)", "Heading blue underlined link 26px/32px 600 (Frutiger; set Istok Web 700) (Frutiger; set Istok Web 700), 1 line; description 19px/28px, 2-4 lines", "Headings verbatim: \"Vaccinations\", \"COVID-19\", \"Baby\", \"Women's health\", \"Contraception\"" ], "components": [ "card_link_plain" ], "copy": [ "Vaccinations: 4 lines (about 19 words: vaccinations for babies, children and adults, why they matter, how to get them)", "COVID-19: 4 lines (symptoms, treatments, avoiding catching and spreading it; this one ends with a full stop on nhs.uk)", "Baby: 2 lines (a guide to caring for a baby)", "Women's health: 3 lines (information and support on health, wellbeing, conditions and screening)", "Contraception: 4 lines (types of contraception, where to get them, how well they work)" ], "spacing": "Desktop: padding 64px 16px 28px; H2 + 24px; rows 59px apart (li margin-bottom 24px + card margin-bottom 35px): row 1 y 2223 (cards 201px tall incl. 32px bottom padding and the 4px underline), row 2 y 2483. Phone: padding 48px 16px 28px; H2 27px/33px in 2 lines + 16px; cards full width, content padding 0 0 24px, heading 22px/29px + 16px, description 16px/24px, 19px between cards (card margin-bottom 19px; heights 142/142/118/…)." } ], "footer": { "summary": "Grey #D8DDE0 footer with a 4px NHS Blue top border, four columns of small underlined dark-blue links, then a hairline and the copyright line.", "ground": "#D8DDE0; border-top 4px solid #005EB8", "anatomy": [ "Desktop: y 2771-3096 (325px), padding 32px 0; four lists 216px wide at x 240, 488, 736, 984 (32px gaps), starting y 2807", "Links 16px/24px 400 #003087, underlined, 8px between items", "Column 1: Home, Health A to Z, NHS services, Healthy living, Mental health, Care and support", "Column 2: NHS App, View your test results, About the NHS, Healthcare abroad", "Column 3: Manage NHS profiles, Other NHS websites", "Column 4: About us, Report an issue with the NHS website (wraps 2 lines), Accessibility statement, Our policies, Cookies", "No column headings (a visually hidden \"Support links\" heading only)", "Meta row at y 3015: 1px solid #AEB7BD top border across 960px, padding-top 24px, \"© Crown copyright\" 16px/24px #212B32", "No logo, no social icons, no address or phone in the footer" ], "phone": "y 3723-4424; padding 24px 0; the four lists stacked one under another (24px gaps), then the hairline and © Crown copyright (padding-top 16px)" }, "dark_ground": { "note": "The only dark ground is NHS Blue #005EB8 (header, hero panel, link bars).", "secondary_button": "not used on the homepage", "link": "#FFFFFF underlined", "muted_text": "#D2E2F1", "hairline": "#337EC6", "logo_variant": "white lozenge with cut-out letters" } }, "bands": [ { "label": "Header", "ground": "#005EB8", "content": "logo, search, My account; 5-link nav row", "desktop": "1440x128, y 0", "phone": "390x189", "anatomy": [ "two rows 72 + 56", "1px #337EC6 line between rows inside the 960 container" ] }, { "label": "Hero", "ground": "#005EB8", "content": "photo + NHS Blue text panel (caption + 2-line H1)", "desktop": "1440x369, y 128-497", "phone": "390x347", "anatomy": [ "panel 712x205 at x 240, y 170", "cards overlap the bottom 90px" ] }, { "label": "Hero cards", "ground": "#F0F4F5", "content": "2 white primary cards with chevron icons", "desktop": "y 407-664", "phone": "y 446-872", "anatomy": [ "464x206 each, 32px gap" ] }, { "label": "Manage your health", "ground": "#F0F4F5", "content": "H2 + 4 action links", "desktop": "y 664-1014", "phone": "y 872-1201", "anatomy": [ "rows every 58px" ] }, { "label": "NHS services", "ground": "#FFFFFF", "content": "H2; 4 blue link bars + action link | grey NHS 111 card", "desktop": "y 1014-1530", "phone": "y 1201-1950", "anatomy": [ "half columns 464 + 464" ] }, { "label": "Featured", "ground": "#F0F4F5", "content": "H2 + 3 white cards", "desktop": "y 1530-2093", "phone": "y 1950-2744", "anatomy": [ "3 x 299px, equal height 354" ] }, { "label": "More information and advice", "ground": "#FFFFFF", "content": "H2 + 5 underline cards in a 3-column grid", "desktop": "y 2093-2771", "phone": "y 2744-3723", "anatomy": [ "row 2 has 2 cards" ] }, { "label": "Footer", "ground": "#D8DDE0", "content": "4 link columns + © Crown copyright", "desktop": "y 2771-3096", "phone": "y 3723-4424", "anatomy": [ "4px #005EB8 top border" ] } ], "layout": { "page_margin": { "desktop": 240, "phone": 16 }, "container_max": 960, "section_padding": { "desktop": 64, "phone": 48 }, "columns": "halves (464 + 32 + 464) and thirds (299 + 32 + 299 + 32 + 299)", "gutter": 32, "gutter_phone": 16, "card_gap": 32, "nav_height": 128, "nav_height_phone": 189, "breakpoints": "320 / 641 / 769 / 990 (NHS.UK frontend)", "prov": "observed", "source": "https://www.nhs.uk/ (Wayback snapshot 20261026012022, measured 2026-10-31)", "also": [ "https://service-manual.nhs.uk/design-system/styles/layout" ], "section_padding_bottom": { "desktop": 28, "phone": 28 }, "phone_switch": "Use phone values below 641px (NHS.UK frontend tablet breakpoint: the type scale and spacing switch there). Grids: halves and thirds sit side by side from 641px up; stack below." }, "type": [ { "role": "Hero caption", "id": "hero-caption", "face": "Istok Web", "size": { "desktop": 32, "phone": 24 }, "line_height": 1.125, "weight": 700, "color": "#D2E2F1", "prov": "observed", "source": "https://www.nhs.uk/ (Wayback snapshot 20261026012022, measured 2026-10-31)", "line_px": "36px desktop / 28.5px phone", "line_height_phone": 1.188, "tracking_px": 0 }, { "role": "Hero headline", "id": "display-hero", "face": "Istok Web", "size": { "desktop": 43.2, "phone": 32 }, "line_height": 1.125, "weight": 700, "color": "#FFFFFF", "lines": { "desktop": 2, "phone": 3 }, "prov": "observed", "source": "https://www.nhs.uk/ (Wayback snapshot 20261026012022, measured 2026-10-31)", "line_px": "48.6px desktop / 38px phone", "line_height_phone": 1.188, "tracking_px": 0 }, { "role": "Section H2", "id": "heading-l", "face": "Istok Web", "size": { "desktop": 36, "phone": 27 }, "line_height": 1.167, "weight": 700, "color": "#212B32", "prov": "observed", "source": "https://www.nhs.uk/ (Wayback snapshot 20261026012022, measured 2026-10-31)", "line_px": "42px desktop / 33px phone", "line_height_phone": 1.222, "tracking_px": 0 }, { "role": "Card heading (link)", "id": "heading-m", "face": "Istok Web", "size": { "desktop": 26, "phone": 22 }, "line_height": 1.231, "weight": 700, "color": "#005EB8 underlined", "prov": "observed", "source": "https://www.nhs.uk/ (Wayback snapshot 20261026012022, measured 2026-10-31)", "line_px": "32px desktop / 29px phone", "line_height_phone": 1.318, "tracking_px": 0 }, { "role": "Action link", "id": "action-link", "face": "Istok Web", "size": { "desktop": 22, "phone": 19 }, "line_height": 1.636, "weight": 700, "color": "#005EB8, no underline", "prov": "observed", "source": "https://www.nhs.uk/ (Wayback snapshot 20261026012022, measured 2026-10-31)", "line_px": "36px desktop / 24px phone", "line_height_phone": 1.263, "tracking_px": 0 }, { "role": "Body", "id": "body", "face": "Istok Web", "size": { "desktop": 19, "phone": 16 }, "line_height": 1.474, "weight": 400, "color": "#212B32", "prov": "observed", "source": "https://www.nhs.uk/ (Wayback snapshot 20261026012022, measured 2026-10-31)", "line_px": "28px desktop / 24px phone", "line_height_phone": 1.5, "tracking_px": 0.29 }, { "role": "Nav / footer / small", "id": "body-s", "face": "Istok Web", "size": { "desktop": 16, "phone": 16 }, "line_height": 1.5, "weight": 400, "prov": "observed", "source": "https://www.nhs.uk/ (Wayback snapshot 20261026012022, measured 2026-10-31)", "line_px": "24px desktop / 24px phone", "line_height_phone": 1.5, "tracking_px": 0.24 } ], "components": { "card_primary": { "fill": "#FFFFFF", "border": "1px solid #D8DDE0", "radius": 0, "shadow": "0 3px 0 0 #D8DDE0", "padding": "32px (32px 80px 32px 32px when it has the chevron icon); phone 24px", "heading": "26px/32px 700 (Frutiger 600) #005EB8 underlined link", "body": "19px/28px #212B32", "icon": "32px blue chevron-in-circle at right, vertically centred", "hover": "heading link colour #003087 (NHS.UK frontend link hover)", "prov": "observed", "source": "https://www.nhs.uk/ (Wayback snapshot 20261026012022, measured 2026-10-31)" }, "card_link_plain": { "fill": "transparent", "border": "bottom 1px solid #D8DDE0 only", "shadow": "0 3px 0 0 #D8DDE0", "padding": "0 0 32px", "prov": "observed", "source": "https://www.nhs.uk/ (Wayback snapshot 20261026012022, measured 2026-10-31)" }, "card_panel_grey": { "fill": "#F0F4F5", "border": "1px solid #D8DDE0", "shadow": "none", "padding": "32px", "prov": "observed", "source": "https://www.nhs.uk/ (Wayback snapshot 20261026012022, measured 2026-10-31)", "phone_padding": "24px" }, "action_link": { "icon": "36x36 green #007F3B circle with white arrow (cut-out), 24x24 on phone", "text": "22px/36px 700 (Frutiger 600) #005EB8, no underline (phone 19px/24px)", "gap": "text starts 44px right of the icon left edge", "padding": "8px 0 0 40px", "prov": "observed", "source": "https://www.nhs.uk/ (Wayback snapshot 20261026012022, measured 2026-10-31)", "phone": "icon 24x24 at x 14, text from x 42, 19px/24px", "hover": "text underlined on hover (NHS.UK frontend); colour unchanged" }, "link_bar": { "fill": "#005EB8", "text": "19px/28px 400 #FFFFFF, no underline", "padding": "12px 24px (phone 12px 16px)", "height": "52px one line, 80px two lines (phone 48/72)", "radius": 0, "gap": "4px", "icon": "white chevron 24x24 at the right, 12px from the edge", "prov": "observed", "source": "https://www.nhs.uk/ (Wayback snapshot 20261026012022, measured 2026-10-31)", "hover": "fill #003087 (published dark blue); text stays white" }, "button_primary": { "fill": "#007F3B", "text": "#FFFFFF", "radius": 4, "shadow": "0 4px 0 #00401E (50% shade)", "hover": "#00662F (20% shade)", "note": "not on the homepage; NHS.UK frontend default", "prov": "published", "source": "https://github.com/nhsuk/nhsuk-frontend/blob/main/packages/nhsuk-frontend/src/nhsuk/core/settings/_colours-applied.scss", "weight": 700 }, "search": { "input": "white, 1px white border, radius 4px 0 0 4px, 40px tall", "button": "#EDF4FA fill, radius 0 4px 4px 0, 44x40, blue magnifier 28px", "prov": "observed", "source": "https://www.nhs.uk/ (Wayback snapshot 20261026012022, measured 2026-10-31)" }, "account_button": { "fill": "#004B93", "border": "1px solid #004B93", "radius": 4, "text": "16px white underlined", "size": "113x42", "prov": "observed", "source": "https://www.nhs.uk/ (Wayback snapshot 20261026012022, measured 2026-10-31)", "hover": "fill #003087" }, "focus": { "style": "yellow #FFEB3B background with a 4px #212B32 bottom bar on focused links (NHS.UK frontend focus state)", "prov": "published", "source": "https://service-manual.nhs.uk/design-system/styles/focus-state" }, "states_note": { "text": "Hover colours come from NHS.UK frontend (link hover = dark-blue #003087); they were not observed on the live page. Focus: yellow #FFEB3B fill with a 4px #212B32 bottom bar on every focused link and button.", "prov": "published", "source": "https://github.com/nhsuk/nhsuk-frontend/blob/main/packages/nhsuk-frontend/src/nhsuk/core/settings/_colours-applied.scss" } }, "type_note": "NHS.UK frontend sizes 64/48/36/26/22/19/16/14 at tablet+ and 48/32/27/22/19/16/14/12 on mobile; weights 400 and 600 (https://github.com/nhsuk/nhsuk-frontend/blob/main/packages/nhsuk-frontend/src/nhsuk/core/settings/_typography.scss)", "breakpoints": { "all": [ 320, 641, 769, 990 ], "prov": "published", "source": "https://github.com/nhsuk/nhsuk-frontend/blob/main/packages/nhsuk-frontend/src/nhsuk/core/settings/_breakpoints.scss" } }, "system": { "fixed": [ "NHS Blue #005EB8 and white dominant", "The lozenge, original artwork, one per page", "Frutiger (Arial fallback), no other faces", "Sentence case, plain English" ], "flex": "Supporting colour tiers, photography and graphic devices let an NHS organisation differ from other NHS organisations, never from the NHS.", "traits": [ { "is": "Authoritative", "not": "Formal", "text": "Neutral and factual, calm and reassuring.", "source": "https://service-manual.nhs.uk/content/voice-and-tone", "prov": "published" }, { "is": "Empowering", "not": "Patronising", "text": "Tell people what they can do; avoid \"should\".", "source": "https://service-manual.nhs.uk/content/voice-and-tone", "prov": "published" }, { "is": "Personal", "not": "Chatty", "text": "Address the reader as \"you\", as if spoken to one person.", "source": "https://www.england.nhs.uk/nhsidentity/identity-guidelines/tone-of-voice/", "prov": "published" }, { "is": "Clear", "not": "Simplistic", "text": "Plain English first, then the medical term.", "source": "https://service-manual.nhs.uk/content/how-we-write", "prov": "published" } ] }, "formats": [ { "format": "Landing page", "level": 1, "must": "Build it the way nhs.uk is built (kit.spec.page): solid NHS Blue header, grey-5 #F0F4F5 page, white square cards, Frutiger (stand-in) 600 headings in sentence case, #212B32 text, NHS Blue underlined links, green circle-arrow action links; logo top left in the header at 40px high on desktop", "flex": "which sections and how many cards" }, { "format": "Slides", "level": 1, "must": "White or NHS Blue grounds, Bold titles, plain sentences", "flex": "one support colour as an accent" }, { "format": "Print / poster", "level": 2, "must": "Logo top right with its margin, NHS Blue dominant, Frutiger Bold titles", "flex": "photography and one graphic device" }, { "format": "Social", "level": 2, "must": "Digital exclusion zone around the logo; no text on cover images", "flex": "visual style or plain NHS Blue" } ], "checks": [ { "name": "Logo hidden", "text": "Cover the logo. It should still read as NHS: blue and white dominant, Frutiger-like sans, plain sentence-case words." }, { "name": "Plain English", "text": "Read it aloud to one person. Sentences under 20 words, no \"should\", no jargon." } ], "examples": [], "make_it_yours": { "note": "Everything above transfers. These are NHS's own and must be replaced with yours: name and logo, purpose, positioning, messaging pillars, proof, taglines and boilerplate.", "replace": [ "identity", "purpose", "positioning", "messaging.pillars", "messaging.proof_points", "messaging.taglines", "messaging.boilerplate" ], "reference": { "purpose": { "mission": { "text": "Signpost people to NHS organisations and services and help them identify official NHS information.", "prov": "published", "source": "https://www.england.nhs.uk/nhsidentity/why-its-important/", "paraphrase": true }, "story": { "text": "A single NHS Identity was introduced in England in 1999. Research shows people see the NHS as one national, unified service and want its identity applied consistently; that consistency reassures them about the quality of care.", "prov": "published", "source": "https://www.england.nhs.uk/nhsidentity/why-its-important/", "paraphrase": true }, "values": [ { "name": "Working together for patients", "means": "NHS value from the NHS Constitution", "prov": "published", "source": "https://www.england.nhs.uk/nhsidentity/why-its-important/" }, { "name": "Respect and dignity", "means": "NHS value from the NHS Constitution", "prov": "published", "source": "https://www.england.nhs.uk/nhsidentity/why-its-important/" }, { "name": "Commitment to quality of care", "means": "NHS value from the NHS Constitution", "prov": "published", "source": "https://www.england.nhs.uk/nhsidentity/why-its-important/" }, { "name": "Compassion", "means": "NHS value from the NHS Constitution", "prov": "published", "source": "https://www.england.nhs.uk/nhsidentity/why-its-important/" }, { "name": "Improving lives", "means": "NHS value from the NHS Constitution", "prov": "published", "source": "https://www.england.nhs.uk/nhsidentity/why-its-important/" }, { "name": "Everyone counts", "means": "NHS value from the NHS Constitution", "prov": "published", "source": "https://www.england.nhs.uk/nhsidentity/why-its-important/" } ] }, "positioning": { "statement": { "text": "The national health service for England, recognised instantly by its blue and white identity and trusted as an official source of care and information.", "prov": "inferred", "source": "https://www.england.nhs.uk/nhsidentity/why-its-important/" }, "category": { "text": "Public national health service (England)", "prov": "published", "source": "https://www.england.nhs.uk/nhsidentity/why-its-important/" }, "audience": { "text": "Patients and the public in England, plus NHS staff and organisations who apply the identity", "prov": "published", "source": "https://www.england.nhs.uk/nhsidentity/why-its-important/identity-policy-and-principles/" }, "problem": { "text": "People need to know quickly whether a service or piece of information is genuinely from the NHS.", "prov": "published", "source": "https://www.england.nhs.uk/nhsidentity/why-its-important/", "paraphrase": true }, "promise": { "text": "If it carries the NHS Identity, you can rely on it.", "prov": "inferred", "source": "https://www.england.nhs.uk/nhsidentity/why-its-important/" }, "differentiators": [ { "text": "One identity across every NHS organisation; no alternative logos permitted.", "prov": "published", "source": "https://www.england.nhs.uk/nhsidentity/identity-guidelines/visual-styles-graphic-devices-and-straplines/" }, { "text": "A legally protected name and logo (UK trade marks, copyright).", "prov": "published", "source": "https://www.england.nhs.uk/nhsidentity/identity-guidelines/who-can-use-the-nhs-identity/" }, { "text": "Plain, clinically checked content written for a reading age of 9 to 11.", "prov": "published", "source": "https://service-manual.nhs.uk/content/how-we-write" }, { "text": "Accessibility built into the palette: every colour offers at least AA.", "prov": "published", "source": "https://www.england.nhs.uk/nhsidentity/identity-guidelines/colours/" } ], "alternatives": [ { "text": "Private healthcare providers and non-NHS health information sources (the identity exists to distinguish the NHS from them).", "prov": "inferred", "source": "https://www.england.nhs.uk/nhsidentity/identity-guidelines/visual-styles-graphic-devices-and-straplines/" } ] }, "messaging": { "taglines": [ { "text": "NHS website for England", "prov": "observed", "source": "https://www.nhs.uk/", "source_note": "2026-10-26 (Wayback snapshot)", "where": "Homepage hero caption above the H1" }, { "text": "Find information and services to help you manage your health", "prov": "observed", "source": "https://www.nhs.uk/", "source_note": "2026-10-26 (Wayback snapshot)", "where": "Homepage H1" } ], "attributes": [ "trusted", "national", "free at the point of use", "consistent", "accessible" ], "key_messages": [], "boilerplate": { "text": "The NHS Identity is the visual signpost to NHS organisations and services in England, introduced in 1999 so people can recognise information that comes from an official NHS source. It is managed by NHS England on behalf of the Department of Health and Social Care.", "prov": "published", "source": "https://www.england.nhs.uk/nhsidentity/why-its-important/", "also": [ "https://www.england.nhs.uk/nhsidentity/" ], "paraphrase": true }, "pillars": [ { "name": "Recognition", "claim": "One national, unified identity people recognise instantly and trust as the NHS.", "prov": "published", "source": "https://www.england.nhs.uk/nhsidentity/why-its-important/", "proof": [ "p-lozenge", "p-colours" ] }, { "name": "Consistency", "claim": "Applied the same way everywhere, so people know they can rely on the quality of care wherever they access it.", "prov": "published", "source": "https://www.england.nhs.uk/nhsidentity/why-its-important/identity-policy-and-principles/", "proof": [ "p-lozenge" ] }, { "name": "Plain help", "claim": "Clear, factual, accessible information that helps people manage their health.", "prov": "published", "source": "https://service-manual.nhs.uk/content/how-we-write", "proof": [ "p-reading-age" ] }, { "name": "Everyone counts", "claim": "Accessible to all: imagery and words reflect the diversity of patients, the public and staff.", "prov": "published", "source": "https://www.england.nhs.uk/nhsidentity/identity-guidelines/imagery/", "proof": [ "p-values" ] } ], "proof_points": [ { "id": "p-lozenge", "kind": "stat", "text": "98% prompted awareness of the NHS lozenge (public research, 2015).", "source": "https://www.england.nhs.uk/nhsidentity/why-its-important/", "prov": "published" }, { "id": "p-colours", "kind": "stat", "text": "87% spontaneous awareness of the blue and white colours of the logo (public research, 2015).", "source": "https://www.england.nhs.uk/nhsidentity/why-its-important/", "prov": "published" }, { "id": "p-since-1999", "kind": "other", "text": "The single NHS Identity has been in place since 1999.", "source": "https://www.england.nhs.uk/nhsidentity/why-its-important/", "prov": "published" }, { "id": "p-reading-age", "kind": "other", "text": "Content aims at a reading age of 9 to 11; clinicians check clinical information.", "source": "https://service-manual.nhs.uk/content/how-we-write", "prov": "published" }, { "id": "p-values", "kind": "other", "text": "Six NHS values from the NHS Constitution sit behind the identity.", "source": "https://www.england.nhs.uk/nhsidentity/why-its-important/", "prov": "published" } ], "claim_boundaries": [ { "text": "Suppliers may state they supplied the NHS only in plain descriptive text; never \"approved\", \"endorsed\", \"certified\" or \"authorised\".", "prov": "published", "source": "https://www.england.nhs.uk/nhsidentity/identity-guidelines/who-cannot-use-the-nhs-identity/" }, { "text": "The NHS does not endorse third-party goods or services.", "prov": "published", "source": "https://www.england.nhs.uk/nhsidentity/identity-guidelines/who-cannot-use-the-nhs-identity/" }, { "text": "Only original artwork for the NHS logo; never recreate it.", "prov": "published", "source": "https://www.england.nhs.uk/nhsidentity/identity-guidelines/nhs-logo/" } ] } } } }