Making our design system a useful tool for teams

A diagram showing instructions for designers.

We have created the Home Office Design System to supplement the GOV.UK Design System. Our design system allows us to provide reusable components and patterns for both internal and public-facing Home Office services. Recently, we've made lots of improvements to our design system so we wanted to share some of the biggest changes.

Clear guidance on styles

While the GOV.UK Design System helps to make public Government services consistent, we can't use certain elements, such as the logo and font, for services that don't sit on GOV.UK. Instead, we use our own design style with a different font, logo and colours.

We've added clear guidance on when to use these different page styles. This means that teams are able to pick up the appropriate styles and use them with as little effort as possible.

New design resources

We've developed design assets such as wireframing kits and user flows to help our designers. Our community has recently added to this by creating storyboarding and workshop templates to help teams work more effectively.

An example of one of our storyboards: Getting a lateral flow Covid test.

Accessibility guidance

Our Accessibility and Digital Inclusion team have created a suite of new guidance to help teams understand and meet our accessibility standards. This includes topics from language to links to audio and video considerations. We are adding to this new accessibility section over time, so watch this space.

Production-ready components

Originally we only defined our components in HTML and CSS code. They were only intended for use by designers when prototyping.

But this meant that our development teams were forced to reimplement the components when building real services. Often some features of the design would be missed, especially around accessibility.

To prevent this and to bridge the gap between design and development we decided to provide production-ready implementations in React.

Greater interoperability

This new codebase builds upon the code in the GOV.UK Design System. This commonality:

• allows us to take advantage of a lot of useful functionality, to support responsiveness and accessibility
• provides us with a way to easily absorb upstream changes
• makes our work more useful for other departments (reducing wasted effort across Government)

Code generators

We've also created a new prototype generator for internal products and services.

In the future this may double up as an application generator or dev-kit. This would allow us to build user interfaces more quickly as well as provide a way of sharing bespoke components between projects. This bringing together of prototyping and production technology will allow designers and developers to work more closely together and so speed up iteration.

Previously a tool primarily for designers, we have now transformed our design system into something that provides broader help and support for delivery teams in the Home Office. This translates into our ability to build internal and public-facing services designed for everyone in mind.