To bring consistency to the user experience and visual appearance of our web estate we have a set of principal colours that are included in all of our website designs.
These colours should be used in any design and have been thoroughly tried and tested. Jisc sites use these core colours so that the content, especially striking imagery, stands out and provides the focus to the page. They clearly define areas of content and help to give structure and rhythm to your website.
- Body #ffffff
- Page background #e4e9ec
- Section background #d4dfe1
- Section background #c3d1d6
- Hero, teaser, banner #2c3841
- Body copy #2c3841
- Supporting text #525e67
- Active link #00557f
- Hovered link #e85e13
- Visited link #55007f
It’s important that our services retain individuality and visual distinctiveness so that users know instinctively which site they are on as they move through our web estate.
Picking an accent colour
These need to be defined in collaboration with the group web team. Accent colours require two variations, light and dark – as per the jisc.ac.uk secondary brand palette. The primary shade is generally used in decorative elements eg masthead, buttons, callouts, etc. The darker shade for any highlights in-content eg pull quote, link hover, etc.
Accent colours need to meet accessibility guidance, be distinctive from others already in use and fit tonally with our brand. Below are some examples (the Jisc secondary colours) of tonally-appropriate colours, along with their levels of accessibility.
If you have a colour that you’re already using, want to try something new or are looking for some advice email us.