How to use the Design System
When you use the 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 on the pattern’s GitHub discussion
Do I have to use the Design System?
DWP services should use standard patterns and components from the GOV.UK Design System and the DWP Design System wherever possible. This raises the consistency, quality and usability of our services, speeds up delivery, and makes our overall code base easier to maintain.
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. We may be working on a similar component or be able to develop the component further to meet DWP’s needs.
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.
Components will often be included in DWP Frontend and if so 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.
Some patterns 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.
Can I make changes to suit my service?
Things published in the DWP Design System are researched and designed as standards that can be used across DWP: this helps to make our services more consistent and easier to use.
Your first choice should always be to use the standard version of a pattern or component.
If you think you need to change a pattern or component for it to work in your service:
- Read the design history. 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 if we are 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 the standard patterns.
Are the components and patterns accessible?
We take care to make the 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.
Could we improve this page?
Send questions, comments or suggestions to the DWP Design System team.