Guidance for using and setting up the Prototype Kit for an Internal Service

[jonhurrell]

Why

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

Related

• Add guidance for fonts to be used within internal services  #236
• Add guidance on how to integrate our components within the GOVUK Prototype kit on Training for designers using the Prototype Kit  #272

Guidance Draft

To install the prototype kit and more general guidance https://dwp-design-manual.herokuapp.com/prototype-kit-training

The GOV.UK Prototype Kit includes these elements by default: this discussion 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.

[TonyDietrich]

Since the header is incorporated into your own page as part of the 'header' block, its actually more manageable to copy the code from the govuk-header/template.njk file, eliminate the logo as above (and make any other changes you want), then save the amended code into a new file local to your project (eg. views/partials/local_header.njk) and

{% block header %}
     {% include/[new file] %}
{% end block %}

[jonhurrell]

Thanks @TonyDietrich. I've updated the guidance to use the header block to call our internal services header.