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)
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.
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:
You cannot use certain GOV.UK styles, such as the crown logo or Transport font, for internal services.
This content still needs to be written.
If you have a question or need support you can:
- email email@example.com
- get in touch on Slack #ho-design-system
- read and create GitHub discussions
- view known issues on GitHub
Get involved with GitHub discussions about our styles, components and patterns.