Skip to main content Jisc logo

User experience and design

  • About
  • Key considerations
  • Get started
  • Foundations
  • Guidance
    • Principles
    • Building your layout
    • Design patterns
    • Jisc style
    • User interaction
    • Technical considerations
    • Making resources accessible
  • Resources
  • Assets
  • User experience and design
  • Guidance
  • Jisc style
  • Colour

Colour

Our colours and how we apply them

Contents

  • Colour contrast
  • Main colours
  • Theme colour
  • Visualising data with colour

We want our users to have a consistent experience when they interact with our products. To achieve this, all Jisc products must use our main colour palettes.

Colour contrast

The contrast ratio of text and interactive elements in your product must meet level AA of the Web Content Accessibility Guidelines (WCAG 2.1). Although our colours were chosen with this in mind, you will still need to check your own implementation.

Main colours

Text

Primary text #333 Mine Shaft
Secondary text #666 Dove Gray – dark

Links

a:link #069 Bahama Blue
a:hover #ae460e Rust
a:visited #609 Purple
a:focus #fd6 Dandelion
a:active #333 Mine Shaft

Content layout

To define areas of content and provide structure to your design.

Content background #fff White
Content alternate/boxed out #f7f7f7 Alabaster
Page background #f2f2f2 Concrete
Hairline #d9d9d9 Alto

Utility layout

Used for utility elements such as the Jisc banner, footer or toolbars.

Utility background #333 Mineshaft
Utility background 2 #404040 Tundora – dark
Utility background 3 #4c4c4c Tundora – light

 

Theme colour

Our products need a certain level of visual distinctiveness. This is so users can orientate themselves when moving between different sites.

Picking a theme colour

Your theme colour needs to meet our accessibility guidance, be distinctive from others already in use and fit tonally with our brand. If you would like help and support choosing a theme colour for your product please contact brand@jisc.ac.uk 
 

Visualising data with colour

Use these rules when choosing your colours

  • Get it right in black and white. Make sure your design works in greyscale (black and white) before adding in colour. Don’t assume colours will signal meaning when used on their own.
  • The safest hue is blue. The richest colour across all types of colour blindness is blue, therefore blue (#069) is our primary choice.
  • Red and green should never be seen. Avoid using red and green together as they are difficult to distinguish from one another in the more common types of colour blindness.

For more detail see our guide on using colour in charts

Useful links
  • Cookies
  • Privacy and your data
Contact
  • user.experience@jisc.ac.uk
Archive
  • Looking for the old pattern library?
Jisc logo

We’re a membership organisation, providing digital solutions for UK education and research

jisc.ac.uk

Areas
  • Connectivity
  • Cyber security
  • Cloud
  • Data and analytics
  • Libraries and research
  • Student experience
  • Advice and guidance
Explore
  • Guides
  • Training
  • Consultancy
  • Events
  • R&D