Use the DfE Design System to ensure products and services, built in the Department for Education, provide people with a consistent, accessible, and usable user experience.

If you've never used the DfE design system before, read through the following guidance first:

When to use

Understand when to use DfE Frontend in your products.

Installation

How to install and use DfE Frontend in your product.

Contribute

How to contribute a style, component or pattern to the design system

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

Prototyping

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

Figma

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

Regional Services Division


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.