Apply the kit to an existing product

Use this when you have a product that predates the kit, and you're bringing it on.

This is still a work in progress. What follows is how the kit works today. We're making it easier to install, with npm component packages coming soon.

1. Install frontend styles and scripts

Install Sass, govuk-frontend and i.AI amended frontend:

npm install sass govuk-frontend @i-dot-ai-npm/component-library-frontend --save

Create a idotai.scss file and copy this into it:

// GOV.UK Frontend, compiled without GOV.UK branding.
// See: https://frontend.design-system.service.gov.uk/using-govuk-frontend-without-govuk-branding/
//
// Change the values below to match your service's branding.
@use "govuk-frontend" as * with ( // Use a non-GDS Transport font stack (GDS Transport is GOV.UK-branded).
  $govuk-font-family: ("Helvetica Neue", Helvetica, Arial, sans-serif),
  // Set your own brand colour (used e.g. for footer border).
  $govuk-functional-colours: (brand: #ca357c, surface-background: #f3f3f3, surface-border: #ca357c, template-background: #f3f3f3));


// i.AI override layer — must come after govuk-frontend's base styles.
@use "@i-dot-ai-npm/component-library-frontend/css";

This is the recommended way to adapt GOV.UK Frontend for services that are not on the gov.uk domain. There is more on this in the using GOV.UK Frontend without GOV.UK branding guide.

If your product is department-branded, this is where the department's colour goes. Check it passes contrast on white surfaces before you set it.

Link to the idotai.scss file in your main layout. In astro this will be in the layout.astro file

In Astro:

---
import '<path-to-styles>/idotai.scss'
---

In html:

<head>
    ...
    <link rel="stylesheet" href='<path-to-styles>/idotai.scss' />
    ...
</head>

After the closing body tag, import initAll from govuk-frontend and initAllIAIDesignSystem from the i.AI JavaScript file:

<body>
    ...
        <script>
            import { initAll } from "govuk-frontend";
            import { initAllIAIDesignSystem } from '@i-dot-ai-npm/component-library-frontend';
            initAll();
            initAllIAIDesignSystem();
        </script>
    <body>
</html>

3. Add component library in language of your choice

Go component by component rather than rebuilding the whole interface at once. For each one, check whether the kit already covers it:

  • if the kit has an as-is or adapted equivalent, replace your version with the kit's
  • if what you have is a genuine deviation from GOV.UK, that's worth recording even if you're keeping it for now
  • if what you have doesn't exist in the kit at all, that's a candidate for the kit forum, not just a local fix

4. Record

Record the components you moved onto the kit, anything you deviated from along the way, and anything the product needed that the kit still doesn't have. Take it to the kit forum.