Prototyping internal services

Adapt the GOV.UK prototype kit for agent-facing services

Services made for internal DWP staff must look different to GOV.UK services made for public use. The main differences are:

• the default font is Arial: you must not use GDS Transport
• the header has a black background, not the blue used in the GOV.UK header component
• the footer does not include the blue accent bar
• the GOV.UK crown logo and Royal Coat of Arms must not be used in the header or footer
• the favicon is the DWP crest, not the default blue GOV.UK favicon

Before you start, install or update DWP Frontend by running this command in your terminal: npm install @dwp/dwp-frontend.

DWP Frontend requires GOV.UK Frontend 6.x. If your prototype still has an older GOV.UK Frontend version, npm install will fail with a dependency conflict error. Update govuk-frontend to a 6.x version in your prototype's package.json, then install again.

Turn off the rebrand flag in the prototype kit for GOV.UK Frontend 5.x

Skip this step if you're on GOV.UK Frontend 6.x. The flag has no effect on 6.x, which is the default for new prototypes and what DWP Frontend requires.

If your prototype is still on GOV.UK Frontend 5.x, this flag keeps the previous GOV.UK branding. Internal service prototypes need it for their colour scheme.

1. In your prototype, go to the app folder and open the file config.json
2. Find the rebrand setting, nested under plugins.govuk-frontend, and change it from true to false:

{
  "plugins": {
    "govuk-frontend": {
      "rebrand": false
    }
  }
}

3. Save and close the file

This nesting applies to current prototype kit versions. If rebrand appears as a top-level setting instead, change it in place.

Change the default font

In your prototype, find the file application.scss. In the same folder, create a new file named settings.scss which contains the following code:

$govuk-font-family: Arial, sans-serif;

Arial, sans-serif is the standard font stack for DWP internal services. This change applies throughout your prototype.

Replace the header and footer

The default page layout in the prototype kit is based on the file /app/views/layouts/main.html. To replace the header and footer, edit this file to import the unbranded versions from DWP Frontend, then add them to the layout.

Import the new header and footer from DWP Frontend

Add the following code at the top of main.html:

{% from "internal-service-header/macro.njk" import dwpHeader %}
{% from "internal-service-footer/macro.njk" import dwpFooter %}

You can now use these components on the page.

Add the new header and footer

In main.html, add the new header and footer using 'blocks'. Place the header block before the content block, and the footer block after it. Read more about using blocks to customise the GOV.UK page template.

{% block header %}
{{
    dwpHeader({
        serviceName: serviceName,
        serviceHref: "/",
        container: true
    })
}}
{% endblock %}

{% block footer %}
{{
    dwpFooter({
        meta: {
            visuallyHiddenTitle: "About this website",
            items: [
            {
                href: "",
                text: "Accessibility statement"
            },
            {
                href: "",
                text: "Privacy"
            },
            {
                href: "/manage-prototype/clear-data",
                text: "Clear data"
              }
            ]
        }
    })
}}
{% endblock %}

Match the page background to the footer

Replacing the footer with dwpFooter can leave a visible seam on short pages. In the same settings.scss file created in the previous step, add:

$govuk-functional-colours: (
  template-background: #F3F3F3
);

Add the DWP favicon

DWP Frontend publishes the DWP crest as a favicon. Add a headIcons block to main.html:

{% block headIcons %}
    <link rel="shortcut icon" href="/plugin-assets/%40dwp%2Fdwp-frontend/assets/images/favicon.ico" type="image/x-icon">
{% endblock %}

---

Could we improve this page?

Send questions, comments or suggestions to the DWP Design System team.

Last updated: 15 October 2026