When we deploy a new Citizen Space site there are some things we can change to make your site look and feel like part of your organisation, and to set it apart from other Citizen Space sites.
Firstly, we can add a selection of your brand colours to the site. The easiest thing is if you supply us with either:
- an existing website you'd like us to copy the colour palette from (such as your organisation's main website) or
- a list of your brand colours, such as in a brand guidelines document
We'll then choose the best colour combination for the site and ask you to review our choices and confirm you're happy with them.
However, if you're keen to be more prescriptive about which colours go where, you can read on for a specific guide on what we're able to change.
With either of these approaches, after adding your chosen colours to the site, we use an online tool to check that the chosen combinations meet an acceptable level of colour contrast from an accessibility perspective and will advise you if we'd recommend changing one or more of the colours.
Global navigation colours
Across the top of your site there is a global navigation bar which will display your organisation logo as well as navigational links and a search function. This bar is always visible for public visitors to the site.
We can control:
- the background colour of this navigation bar (this is often white as many organisations have a coloured logo, but you can also take the opposite approach and have a white version of your logo on a coloured background)
- the colour of the link text on this navigation bar
- the colour the links change to when someone hovers their cursor over the link
(NB. The third navigational link in the above screenshot is a different colour because the cursor was hovering over it.)
- the colour of the search function button
- the colour of the magnifying glass icon on the search button
- the colour of an optional strip we can add below the site-wide navigation bar. This can be useful for adding a flash of another brand colour, or to imitate the layout of another website from your organisation - please see some examples below.
This council's Citizen Space site has a flash of luminous green, one of their brighter brand colours (shown here with the Delib logo instead of the council logo):
This council has a thicker black strip to match the design of their .gov.uk website (shown here with the Delib logo instead of the council logo):
We can control the background colour of the banner on the homepage. The site will display a block of this colour if you have no banner image, or if you have but the image hasn't loaded yet.
We can also control the colour of the intro text box on the banner and the colour of the text itself.
This example has dark red as the banner background colour, white as the text box colour and grey as the text colour:
We can choose one colour which will be used on consultation title strips and other highlights, and we can set the colour of the text which appears against that feature colour.
This council's feature colour is red, so it appears on their consultation titles as shown above, as well as in their consultation listings, as shown below:
Call to action colour
The call to action is a box towards the bottom of every consultation overview page which lets respondents know how they can participate in the consultation, such as by going into the online survey. It's a good idea to choose a bright colour for this box so that it draws the attention of your respondents.
This is the colour of the buttons that respondents use to move through the survey. Your choice needs to pass colour contrast against white, as that is the colour of the button text and cannot be changed.
Other branding elements we can control
We can add one organisation logo to the top left-hand corner of the site, which will be visible at all times. (Please note that you have the ability to add further logos to relevant consultations being run in partnership with other organisations).
We can upload a favicon, which will appear next to the page title in people's browser tabs.
Lastly, we can add a banner image that sits behind the intro text on your homepage, and by default appears above the title on your consultation pages (though this can also be disabled on a consultation by consultation basis).
This might be a landscape photo:
Or a more abstract image or graphic:
Please supply an image that is around 3000px wide by 1000px tall. This allows us to crop and resize the image as required. Please note that this is not a set image size as how tall the image depends on how much text you have on your Consultation Hub.