How to use the DWP Design System

The DWP Design System extends the GOV.UK Design System with additional patterns and components. It includes:

Components – simple interface elements such as navigation bars and toggles, which can be combined to build pages that look and behave consistently.

Patterns – blueprints for how DWP services should meet a specific user need. Patterns are larger and more complex than components: they may include several pages as well as choices on how user journeys should work.

Templates – ready-made page templates for use in DWP digital services.

If your service is public-facing you will often find everything you need in the GOV.UK Design System. The DWP Design System includes some extra public-facing elements where we have identified a need, as well as some things specifically designed for internal services.

How to use the DWP Design System in your project

We recommend using the GOV.UK Prototype Kit along with DWP Frontend to get automatic updates when new versions of components are released. However you can also copy and paste sample HTML code from most components and patterns.

Some patterns also have plugins for the GOV.UK Prototype Kit which will install the whole pattern and its functionality into a prototype with minimal coding. However, when you build a production service the screens and routes will need to be built.

Tell us what you use

When you use something from the DWP Design System in a prototype or live service, you must:

• Tell the Design System team in the #design-system Slack channel or by email on dwp-design-system@engineering.digital.dwp.gov.uk
• Share the outcomes of any research or insights, either on the relevant GitHub discussion or by emailing the team

Do I have to use the Design System?

Yes. DWP services should always start with standard patterns and components from the GOV.UK Design System and the DWP Design System. This raises the consistency, quality and usability of our services, speeds up delivery, and makes our overall code base easier to maintain.

Can I change the components and patterns to suit my service?

You should always start by testing with the standard version of a pattern or component.

If you think you need to adapt a pattern or component for it to work in your service:

• Read the design notes. This will include details of all major design choices and why they were made.
• Always test the standard version alongside your variant in any research. This helps you to evidence the need for variation in your service assessment, and also helps us to identify potential improvements.
• Tell the Design System team about your work. You can add to the GitHub discussion or contact the team directly. This feedback is essential for us to evolve and improve the design system.

If I only use standard patterns, do I still need to do user research and design?

Yes. Although we do a lot of research into existing practice to make our patterns the best possible starting point, we cannot research with your users or design your service.

The aim of the patterns in the Design System is to provide blueprints for how common tasks should work, so that design teams spend less time on basic research before getting to a working prototype. We intend that they work as well as possible ‘out of the box’ but we also depend on research from real services to improve and refine them.

Are the components and patterns accessible?

We take care to make the DWP Design System accessible, but using its components is not a substitute for accessibility testing. Accessibility depends on how components and patterns are implemented and used in context.

As a minimum, all Design System components pass automated tests at WCAG 2.2 level AA in axe and pa11y. We also test manually with assistive technology.

Because patterns are made of multiple components and screens and can be built in several ways, their accessibility depends on how they are implemented.

Any known issues or special accessibility considerations will be described in the guidance for the relevant pattern or component. See Accessibility for more about how we test.

Can I use things from other design systems?

If you can’t find something you need but it exists in another design system, contact the Design System team before using it. We may already be working on a similar component or be able to help you adapt the existing thing for DWP use.

What's the difference between a pattern and a component?

Patterns are made of components.

Components

Components are typically smaller parts of an interaction such as an information container or functional toggle. There may be several ways that a component can be designed or laid out, and the content may be specific to your service: but it's less likely that you will need to modify a component before using it in your service or prototype.

Most components are included in DWP Frontend and can be installed and kept up to date automatically.

Patterns

Patterns are blueprints for how services should meet a specific user need. They specify how a user journey should work and often involve several screens. Because they exist at a larger scale than components, you are more likely to need to make changes to individual screens (for example, to content or headings) – but you should always begin with the standard pattern and make changes only with good evidence.

---

Could we improve this page?

Send questions, comments or suggestions to the DWP Design System team.