Design system

Build consistent, accessible user interfaces. Learn from the research and experience of other NHS digital teams.

Use these design styles, components and patterns to quickly make prototypes or build a live service. The examples come with code to make it easy for you to use them in your project.

Changes to meet new accessibility criteria

WCAG 2.2

We've added new guidance to meet WCAG 2.2 level AA. Learn about the new criteria in WCAG 2.2.

Updates to our components

No changes to design or code, but you must check the updated guidance to understand whether your service needs updating.

Page	Changes
Back link	Guidance on positioning and keeping data the user has entered
Breadcrumbs	Guidance on positioning
Buttons	Guidance on minimum target size
Error message	Guidance on not clearing data the user has entered
Footer	Guidance on placing help links
Header	Guidance on placing help links and not hiding content that has a focus applied
Select	Guidance on avoiding click and drag
Summary list	Guidance on action link target size and keeping data the user has entered
Tag	Guidance on avoiding click and drag

Updates to our styles

No changes to design or code, but you must check the updated guidance to understand whether your service needs updating.

Page	Changes
Focus state	Guidance on not hiding content that has a focus applied
Icons	Guidance on minimum target size

Updates to our patterns

None of our patterns need updating.

Updates to the GOV.UK design system

Our design system is based on GOV.UK and we know that teams regularly refer to their guidance too. If your service uses any components or patterns borrowed from the GOV.UK design system, make sure you check their guidance too.

Read about GOV.UK changes to their design system to meet WCAG 2.2.