Get started

The DWP Design System is made up of commonly used patterns and components that are ready for use in live services and prototypes.

This guidance assumes that you have already installed the GOV.UK Prototype Kit. If you haven’t, do that first.

There are two ways to use the design system in your project.

HTML and CSS

You can use design system components in your prototype with minimal coding by copying and pasting from the code examples. Every code example includes production-ready HTML, and CSS if needed.

Read a step by step guide at Get started: HTML and CSS

Install using npm

If you expect to use more than one or two components – or if you are setting up a new project – we recommend installing DWP Frontend using Node Package Manager (npm).

This is a bit more technical than copying HTML and CSS and involves using Terminal commands, but it will be easier to maintain and update your code.

Read a step by step guide at Get started: install using npm

Get in touch

If you’ve got a question, idea or suggestion email the Design System team on dwp-design-system@engineering.digital.dwp.gov.uk