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.
5. Testing your changes
If you have modified govuk_publishing_components
:
- Run
collections
with your local version ofgovuk_publishing_components
(see Local frontend development if you need help). - 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 is applied.
- Create a new release of
govuk_publishing_components
and get a branch ofcollections
including this deployed to integration.
If you have modified govuk-frontend
:
- Check and approve the dependabot PR in
govuk_publishing_components
for the new version ofgovuk-frontend
. - Include a commit to remove any styles added in section 2 of this guide.
- Create a new release of
govuk_publishing_components
and get a branch ofcollections
including this deployed to integration.
Then:
- In integration
whitehall
, you should see the organisation as an option under thebrand colour
field (you will also need to update theStatus on GOV.UK
tocurrently live
to view the page). - Check the relevant organisation page has the new 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 thepublishing_api:republish_organisation[slug]
rake task in Whitehall.