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.