DfE Frontend


User-interface styles for colour and typography in DfE services.


The building blocks for pages, and DfE-specific user-interface elements.


Wider service patterns to enable DfE to deliver consistent ways of asking for information or completing a task.


How to install and use DfE Frontend in your product.

When to use

Understand when to use DfE Frontend in your products.

Content design

Our content standards and guidance for tone of voice, the words we use, and writing content strategies for services.

Content design in DfE

How we design good content in DfE for differnet channels and purposes.

Content style guide

The style guide is for anyone creating content for DfE, to help make things clear and consistent across all of our services.

Content strategies

How to create a content strategy to ensure a seamless user experience, efficient content planning, and effective collaboration.

Additional guidance

Guidance for writing content in other services or products.

Should your content go on GOV.UK?

Use the quick tool to understand where your content should be published and your next steps.

Use the tool


Guides to help you get started with the design system and to design, build, and test your products.


Use the DfE Frontend library in your Figma designs.

Prototype kit

Get started with the prototype kit and get it set up.

Hosting your prototype

How to set up your prototype and using Heroku.

Other DfE design systems

These design systems are specific to certain services and products within DfE.

National Careers Service

We're open source

DfE Frontend is available open-source on GitHub. You're welcome to contribute, provide feedback, or pick up helping us with our backlog.

Contribute on GitHub

Keep up to date

We write about, and share as much as we can, in the open. You can find out more about what we're doing on the following channels:

Found a problem?

If you've found something wrong, or found a bug, raise an issue and we'll look into it.