Get started

The Home Office design system helps us understand what Home Office services look like and how they should behave. It builds on the GOV.UK design system.

There is an implementation of the design system that's an extension of NotGovUK which implements the GOV.UK design system in React. (See: design decisions)

You can use the Home Office design system for prototyping and products in production. See styles for more information on internal and public facing services.

Design prototype assets

You can explore ideas and demonstrate page flows using these design assets:

• GOV.UK design system flow diagram (Mural)
• GOV.UK design system community assets
• Home Office styles and components (Figma)

HTML prototype

Public facing services

When prototyping an external public-facing service, use the GOV.UK prototype kit which contains the GOV.UK styles.

You may find some of features of the Home Office plugin makes it easier and quicker to prototype.

Internal services

For internal services, such as caseworking systems, use the Home Office styles (including logo, colours and internal font) in your prototypes. You can choose whether to use the:

• GOV.UK prototype kit with the Home Office plugin
• Home Office design system React prototype kit

You cannot use certain GOV.UK styles, such as the crown logo or Transport font, for internal services.

Production

This content still needs to be written.

Support

If you have a question or need support you can:

• email ucdops@homeoffice.gov.uk
• get in touch on Slack #ho-design-system
• read and create GitHub discussions
• view known issues on GitHub

Contribute

Get involved with GitHub discussions about our styles, components and patterns.