Skip to main content

Use with our old frameworks or colours

You can configure GOV.UK Frontend to look like our old frameworks, GOV.UK Elements, GOV.UK Template and GOV.UK Frontend Toolkit.

If you do this, your service will not meet the Web Content Accessibility Guidelines (WCAG 2.1 level AA) because your users will not be able to change the font size.

You cannot use the following features if you installed GOV.UK Frontend using precompiled files. Install with node package manager instead.

‘Compatibility mode’

Use ‘compatibility mode’ if you want to use GOV.UK Frontend components and an old framework together in a service.

GOV.UK Frontend will:

  • use the old colour palette
  • use the old GOV.UK font from GOV.UK Template
  • override some of the CSS in the legacy frameworks
  • no longer use rem for font sizes

Turn on ‘compatibility mode’

Add one or more of the following lines to your project’s Sass file, above @import "govuk-frontend/govuk/all":

  • $govuk-compatibility-govukelements: true; if you’re using GOV.UK Elements
  • $govuk-compatibility-govuktemplate: true; if you’re using GOV.UK Template
  • $govuk-compatibility-govukfrontendtoolkit: true; if you’re using GOV.UK Frontend toolkit

Turn off ‘compatibility mode’

Remove the following lines from your project’s Sass file:

  • $govuk-compatibility-govukelements: true;
  • $govuk-compatibility-govuktemplate: true;
  • $govuk-compatibility-govukfrontendtoolkit: true;

Use the old colour palette

If you’re not using any of our old frameworks, you can still configure GOV.UK Frontend to use the old colour palette.

Add the following variable to your project’s Sass file, above @import "govuk-frontend/govuk/all":

$govuk-use-legacy-palette: true;