Having the right primary & secondary colours on your platform is more important than you might think, for multiple reasons. It reflects and defines your platforms brand & identity, makes the platform welcoming and visually pleasing, and ensures information is easy to read for users.
Which colours appear where on the platform?
You can change the settings of these color options in your admin panel, by going to "Settings" > "Branding". The header overlay can be customised from "Pages & Menu" > "Home", clicking "Edit", and selecting the Hero module.
Which combination of colours should I choose?
The name of the game is contrast and simplicity. Although you may already have a few colours in mind that reflect your organisation's brand and identity, only pick the most relevant and suitable ones.
Main/primary colour - This is the defining color of your platform. It should be a shade of either Red, Blue or Green.
Secondary colours - It can be either the same as the primary colour OR another colour that is complementary to the primary colour. Using the diagram below, based on your primary colour, you can choose any color that is opposite of it on the colour wheel.
For text – pick either black or a dark shade of another colour (e.g dark grey, dark blue, dark red).
For the overlay – we recommend keeping it the same colour as your primary colour to build a consistent and visually pleasing look to the homepage.
🚨 Selecting "white" or a very light colour as your primary or secondary colour options can make important call to actions (as buttons) disappear.
Branding possibilities available outside of the admin panel
Our team can do custom modifications to the style of your platform, but you should contact us for this:
Adding a custom font from Adobe or a custom URL.
Inverting the colours of the navigation bar (if you want a dark/coloured background option).
Modifying the title font size & weight for the Hero section of the home page.
Related Articles:
Do you have further questions or need help? Send us a message at support@citizenlab.co!