Branding guidelines

The i.AI Design Kit supports the use of different product brands. A brand is defined by a specific header, footer, colour palette and font. Using the Kit, you can brand a product as i.AI, as a department, or as GOV.UK, and switch between them easily.

Choosing the right brand

Here's how to decide which brand is best for your product:

i.AI brand - Use this if your product is an internal tool for use by i.AI staff, an experiment from i.AI or for a single government department.
GOV.UK brand - Use this if your product is part of a public-facing service on GOV.UK, or if it will be used by public servants across multiple organisations.

How to apply the i.AI brand

To apply the i.AI brand:

Use the i.AI header component
Use the i.AI footer component
Include this line in your Sass file to update fonts and brand colour:
```
$govuk-font-family: "Inter", Helvetica, Arial, sans-serif;
$govuk-functional-colours: (
    brand: #ca357c,
    surface-background: #f3f3f3,
    surface-border: #ca357c,
    template-background: #f3f3f3)
```

Add the govuk-template__body--iai-theme class to the body tag in your HTML or layout file.

...

<body class="govuk-template__body govuk-template__body--iai-theme">
    ...
</body>

How to apply the GOV.UK brand

To apply the GOV.UK brand:

Use the GOV.UK header component
Use the GOV.UK footer component
Remove the Sass variable overrides if they were added from above
Remove the govuk-template__body--iai-theme class from the body tag in your HTML or layout file if it was added

For more guidance, see the Service Manual guide; How to make your service look like GOV.UK.