You are here

Colour bar

The colour bar is one of our primary brand signifiers - and should always be accompanied by an official logo. It is composed of a black bar along with the four respective University or Faculty colours.

Note: If full colour printing is not an option. Use the guidelines for colour bar in one colour printing.

The lightest colour (level 1) appears on the left; and the darkest colour (level 4) appears on the right.

For complete details on colours and their codes, see Colour palette.

University colour bar

UWaterloo colour bar with Level 1, 2, 3 and 4 indicated

Faculty colour bars

Applied Health Sciences

Applied Health Sciences colour bar

Arts

Arts colour bar

Engineering

Engineering colour bar

Environment

Environment colour bar

Mathematics

Math colour bar

Science

Science colour bar

Schools and satellite campuses colour bar

Colour bar - red

Schools and satellite campuses may use the red, university or associated faculty colour bar, but should use one colour bar consistently across all communications. 

Usage

  • When communications include multiple Faculties, use the University colour bar (just as you would use the primary University logo).
  • The colour bar should appear only once in communications — the very first instance (e.g. on a brochure cover or social media avatar). Avoid repeating their use throughout communications (e.g. throughout a multiple-page publication or social media posts). As a general rule of thumb, the bar should not be used in situations where the logo would not be used.
  • The colour bar should be used at the top of a layout and span the entire width of the canvas (unless it is not possible due to printing or other technical restrictions). The colour bar can be padded above to accommodate the use of the horizontal logo, on black.
  • When used on websites, the colour bar should appear on every page. When used in mobile apps, or other small applications, the colour bar may appear only on the first page, or view of the application (e.g. an app login page, or social media avatar). In these cases, due to the size, the colour bar may also be used without the black portion.
  • When creating small applications (e.g. social media profile icons) the black portion of the colour bar can be removed or the colour bar can be removed entirely for legibility reasons.

One colour printing

If colour printing is not an option, you can use a one colour version of the colour bar.

Location Colour
Top bar Black
Level 1 15% black
Level 2 35% black
Level 3 50% black
Level 4 65% black

In one colour printing cases where using tints is not an option, do not use the colour bar.

UWaterloo colour bar - one colour

Resources

Sample applications


Print samples

Sample report cover - arts colour bar

This sample shows a concept for a Faculty of Arts annual report cover and uses the Arts colour bar and faculty logo.

Sample report cover - Math colour bar

This sample shows a concept for a Faculty of Mathematics annual report cover, and uses the colour bar and Faculty logo.




Digital samples

Website header desktop

This sample shows the University of Waterloo website header on a mobile device, and uses the University colour bar and logo. In digital applications, the black portion of the colour bar can be increased in height to accommodate logo and menu items.

Sample layout - digital ad 300px x 600px

This sample shows a digital ad, and uses the University colour bar and logo.