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

This page explains how to adapt the GOV.UK prototype kit to make these changes, so you can use it to build internal services.

Before you start, install or update DWP Frontend by running this command in your terminal: npm install @dwp/dwp-frontend. Version 3.4.0 of DWP Frontend includes important changes that isolate the header and footer styling from the GOV.UK components so they no longer inherit GOV.UK colours.

Change the default font and background colour

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;
$govuk-template-background-colour: $light-grey;

This Sass code:

• updates the value for the govuk-font-family variable to use the Arial, sans-serif CSS font stack which is standard for DWP internal services
• makes the page background the same colour as the footer background, so there is no visible colour change if content doesn't fill the available viewport

These changes will apply 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, we will edit this file to first import the unbranded, white-on-black versions from DWP Frontend and 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 %}

The components are now available to be used in the page.

Add the new header and footer

In main.html, add the new header and footer using ‘blocks’. Typically the header block would be placed before the content block, and the footer block after the content block. 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 %}

Any pages based on the main.html layout will now have the unbranded header and footer with black backgrounds, the Arial, sans-serif font stack, and the background colour $light-grey.

---

Could we improve this page?

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

Last updated: 20 October 2025