Skip to main content
  1. Home
  2. Publishing
Last updated: 8 Mar 2024

Add an organisation's brand colour or logo

Add an organisation’s logo in the publishing components gem

1. Add the organisation logo to the govuk-publishing-components gem

The organisation logo component is used to render organisation logos that use either the Government Identity System, such as HMRC, or have a brand exemption, such as HMPS.

To add or update single identity logos in the publishing components gem, please refer to the organisation-logos component documentation.

2. Add the organisation logo as an option in Whitehall

Add a new entry for the organisation in app/models/organisation_logo_type.rb, which will show the organisation as an option under the organisation logo drop down field in Whitehall. The CSS class name should match the abbreviated organisation name added above in the govuk publishing components gem.

Add a custom organisation logo in Whitehall

Policy approval is required to use any logo other than the crown crest. If approved, the custom organisation logo can be uploaded when editing the organisation in Whitehall. The image used should be a PNG image of the logo with a width between 288px and 300px.

Add an organisation’s brand colour

An organisation’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.

Documentation in govuk_publishing_components explains how brand colours work in the code, for reference.

1. Check the colour passes WCAG contrast requirements

If an organisation’s brand colour changes or a new one is required, check that it is of a high enough contrast against a white background to be accessible. Use a tool such as the WebAIM Contrast Checker to determine this.

2. Add the brand colour in govuk_publishing_components

If the brand colour is required urgently, follow this step to temporarily add it directly to govuk_publishing_components. Otherwise, skip to step 3.

Add styles to _brand-colours.scss as shown in this example for 10 Downing Street. Copy and paste these lines and modify the organisation CSS class name and colour as required.

You will then need to ready a new release of the components gem for deployment.

3. 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 that it may be some time before a new version of govuk-frontend is released.

4. 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 earlier.

Testing your changes

If you have modified govuk_publishing_components:

  1. Run collections with your local version of govuk_publishing_components (see Local frontend development if you need help).
  2. Go to an organisation page and use Chrome’s developer tools to change the brand class of an element to match, check that the required colour/logo is applied.
  3. Create a new release of govuk_publishing_components and get a branch of collections including this deployed to integration.

If you have modified govuk-frontend:

  1. Check and approve the dependabot PR in govuk_publishing_components for the new version of govuk-frontend.
  2. Include a commit to remove any styles added in section 2 of this guide.
  3. Create a new release of govuk_publishing_components and get a branch of collections including this deployed to integration.

Then:

  1. In integration 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).
  2. Check the relevant organisation page has the new logo / colour.

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.

Further info

Related repositories

More in the Publishing section

Learn

How to...