Having worked on a number of NIHR-funded websites over the years, including for the School for Social Care Research and the School for Public Health Research, we see the same thing happen at the start of nearly every project. Someone is handed a funding award, a launch date and a 77-page brand document, and they need to know which parts of it actually apply to a website.
View our Website Development Services
NIHR refreshed its brand in early 2026, and the current document is Brand guidelines Version 1.0. If you are working from anything that mentions design motifs, a 2022 motif pack or the old palette, it is out of date. This post pulls out the parts that matter when you are building or briefing a site.
The Three Identity Principles
The refreshed identity is built around three principles that run through every other decision in the document, from colour to type to graphics:
- Accessible: Legible typography, accessible colour, authentic photography. Designs should be barrier free.
- Expressive: The brand should bring NIHR’s purpose to life, whether the audience is researchers or the public.
- Purposeful: Every visual element should be additive. If it is not helping tell the story, reflect the audience or aid navigation, it probably should not be there.
Worth noting for anyone who worked to the previous guidelines: the old five Operating Principles have been replaced by these three. Alongside them sits a tonal scale running from clarify (understated, functional) to amplify (evocative, emotive), which is how you flex the same brand across a technical research page and a public-facing campaign.
Colour Palette and Hex Values
The palette is split into primary, secondary and neutral groups, each with a bright and a deep tone. These are the digital values you will need:
Primary
- Coral #fc5d5d
- White #ffffff
- Navy #1c285e
- Off-black #3c3c3c
Secondary
- Glove Blue #c7e9ff and Blue Flame #0051c2
- Uniform Lilac #c4c5ff and Twilight #3e439c
- Pink Quartz #ffd1e0 and Berry #804055
- Sunshine Yellow #ffe626 and Teal #0a5766
Neutral
- Putty #faf4eb
- Steel #c5dce5
Two rules catch people out on the build. All headlines and subheadings use Navy, unless they sit on a dark background, in which case they reverse out to White. Tints of 60% and 20% are available for backgrounds and charts, but tints must never be used for text.
Accessibility and Contrast
The guidelines require all on-screen materials to meet WCAG 2.2, in line with UK public sector regulations. The document sets out both levels:
- AA (minimum): 4.5:1 for standard text under 24px, 3:1 for large or bold text at 24px and above
- AAA (enhanced): 7:1 for standard text, 4.5:1 for large or bold text
Most of the deep tones carry an AAA rating at standard text sizes. Coral is the one to watch, rated AA rather than AAA, which makes it a poor choice for body copy even though it is a primary brand colour.
There is also a rule that is easy to break without realising: the approved colour combinations must not be reversed. Use them as shown rather than flipping foreground and background, with the exception of White, Off-black and Navy. And accessible use of colour means never relying on colour alone to carry meaning, so error states, chart series and link styles all need a second signal.
Typography
Two typefaces do the work, plus a system fallback:
- Archia is the display face, used for headlines, section titles, standfirsts, quotes and stats. It is licensed and available through NIHR comms, in Regular, Semibold and Bold.
- Inclusive Sans is the body face, used for body copy, captions and level 3 subheadings. It is an open source Google font, which makes it straightforward to serve on a website. Only Regular and Bold.
- Arial is the fallback where neither is available.
The practical constraints for a web build: minimum body copy size is 12pt, headlines are set in sentence case, and line spacing in text-heavy content should be at least 140% of the text size. Body copy sets in Navy or Off-black, with Off-black recommended for print. Bold emphasis should be used sparingly, as overuse hurts legibility.
One useful detail if a client is producing content in Google Docs or Slides: materials created in Google products can use Inclusive Sans for every level of text, headlines included, rather than trying to source Archia.
Logo Rules for Digital
The core logo is three fixed elements, a letter mark, the full name and a vertical line. That relationship cannot be altered without explicit permission, and no element may be changed. Full colour is the default, with reversed, mono white and mono black variants for dark or single-colour contexts.
For digital work the numbers to hold onto are a minimum lettermark height of 25px on screen, and an exclusion zone equal to the height of the logo’s “N” kept clear on all sides. That exclusion zone applies to sub-brands and acknowledgement logos too.
If your project is funded or supported rather than run by NIHR, there are ‘Funded by’ and ‘Supported by’ acknowledgement logos. These should never appear in isolation and need to sit alongside a full NIHR acknowledgement statement.
Photography
Images should be authentic, insightful and representative, reflecting real health and care research and the communities it serves. Commissioned photography is preferred, though high quality stock is permitted.
The “don’t” list is unusually specific and worth sharing with anyone sourcing imagery. Avoid clean professional models, doctors in white lab coats since that is not NHS clothing, overused stock models, heavily staged or contrived scenes, gendered stereotypes such as male doctors and female nurses, an overfocus on older people and wrinkled hands, and stock images clearly not shot in the UK where uniforms and facilities look wrong. We have been training Google Gemini to create NIHR images based on direction and examples from the new brand guidelines with great success. If you are au fait with your AI image generation, it’s something to consider.
Graphics, Icons and Illustration
The design motifs from the old guidelines are gone. In their place sit gradients, described as capturing the fluid, layered nature of research, built with grain and torn-edge textures. Templates usually ship with pre-existing gradients, and the document includes step-by-step Illustrator settings for creating new ones.
Icons come from the open source Google Material library, modified with a Coral accent. Where a background compromises the Coral element, another brand colour can be substituted. Illustrations are an alternative to photography for bringing warmth or mood, must use brand palette colours, and must not use gradients.
Both icons and illustrations exist as approved sets, available from the NIHR brand team rather than as a public download.
What Has Changed Since the Old Guidelines
If you are updating an existing NIHR-funded site rather than starting fresh, these are the changes most likely to affect you:
- Five Operating Principles have become three identity principles, with a tonal scale added
- The palette has been rebuilt. Aqua is gone, and secondary colours are now organised in bright and deep pairs
- Design motifs have been retired in favour of gradients
- Typography is now Archia for display and Inclusive Sans for body copy
- Contrast guidance is explicitly tied to WCAG 2.2 with per-colour AA and AAA ratings
In practice this is more than a restyle. Changing the palette and both typefaces means revisiting components, contrast pairings and any hard-coded colour values in a theme, so it is worth scoping properly rather than treating it as a quick CSS job.
Seeing It Applied
Reading guidance is one thing, applying it across navigation, templates and content types is another. Our work with the School for Social Care Research shows how the palette, typography and accessibility requirements come together on a live research site.
See the School for Social Care Research case study
For related reading, see our posts on accessible and aesthetic website design, centring PPIE in digital design and designing for public trust and transparency.
Note: Approved icons, illustrations and the Archia licence all sit with the NIHR brand team rather than being publicly downloadable. Factor that request into your project timeline early, as waiting on assets is a common cause of delay.
Book a video audit of your website, fill in the form below to get in touch
