Remove GOV.UK branding

Use the GOV.UK prototype kit to make unbranded prototypes

The Government Service Manual explains when not to use GOV.UK branding or the GDS Transport font. This applies to most internal services as well as public-facing services that are not part of GOV.UK.

If your service is not hosted on a service.gov.uk domain you must not use:

• the GDS Transport typeface
• the GOV.UK crown logo in the header
• the Royal Coat of Arms in the footer

The GOV.UK Prototype Kit includes these elements by default: this page explains how to remove them so you can use the kit and the DWP Design System to build unbranded prototypes.

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

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: Helvetica, Arial, sans-serif;

This Sass declaration updates the value for the govuk-font-family variable to use the Helvetica, Arial, sans-serif CSS font stack. This change 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 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.

---

Could we improve this page?

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

Last updated: 11 February 2022