Skip to main content
Warning This document has not been updated for a while now. It may be out of date.
Last updated: 4 May 2022

Add an organisation's brand colour

An organistion’s brand colour is used to style their organisation page (such as dividing lines, icons and link text). For example see the DCMS organisation page.

The colour is set as an option under a drop down field called “brand colour” when creating or editing an organisation page in Whitehall Publisher.

1. Add the brand colour in GOV.UK Frontend

Set up a fork of govuk-frontend, then add the colour to the _colours-organisations.scss file and update the CHANGELOG. See updating changelog and example PR for more details.

Note

It may be some time before the next version of govuk-frontend is released, to get the changes out on time you can add the colour in govuk_publishing_components, see this PR as an example.

2. Add the organisation as brand colour option in Whitehall

Add a new entry for the organisation in app/models/organisation_brand_colour.rb, which will show the organisation as an option under the brand colour drop down field in Whitehall. The CSS class name should match the name used in govuk-frontend.

Testing your changes locally

  1. Install govuk-frontend with npm
  2. In govuk_publishing_components, update package.json to point to your local govuk-frontend repo, then update the package, see this doc for more details
  3. In collections, update the Gemfile to point to your local version of govuk_publishing_components
  4. In whitehall, you should see the organisation as an option under the brand colour field (you will also need to update the Status on GOV.UK to currently live to view the page)
  5. Run ./startup.sh —integration in collections to view the organisation’s page

Note

It may take some time for the colour to update on the page in integration. You might be able to speed up the process by running the publishing_api:republish_organisation[slug] rake task in Whitehall.