Colour is an important part of our visual language. We use colour in the Waterloo brand to signify the University, as well as our six faculties.
The colour bar is composed of a black bar with a coloured bar underneath. The coloured bar is divided into four equal parts using the four colours of the University or faculty. The four colours are arranged from lightest to darkest (left to right).
To ensure the colour bar is distinctly Waterloo, we always use it in combination with an official logo.
Learn more about Waterloo colours and colour codes.
The University colour bar always uses a black bar on top and four levels of gold on the bottom. Use this version for corporate or multi-faculty communications
Schools and satellite campuses have the option to use one of three colour bars:
- Red colour bar
- University colour bar
- Associated faculty colour bar
Choose one colour bar and use it consistently in all communications
Follow these guidelines to properly apply the colour bar.
The colour bar always appears with the Waterloo logo. Place it at the top of the layout, spanning the entire width of the canvas. Use padding above the colour bar to accommodate the horizontal logo on black.
Use the colour bar only once in a given communications piece or channel (e.g., on the cover of a brochure or in a social media profile).
After the first instance, do not repeat the colour bar (e.g., throughout a multi-page publication or across multiple social media posts). On a website, you can include the colour bar on every page, but only once per page.
When designing for mobile apps or small-scale layouts, use the colour bar only on the first page or view (e.g., app login page or social media profile).
To ensure legibility in smaller applications, you can remove the black part of the colour bar or omit the colour bar entirely.
Throughout design and concept exploration, barriers with the traditional placement of the colour bar became apparent. In some applications, the colour bar holds too much visual prominence and takes away from important campaign elements.
There are also instances where the technical specs don’t work with the colour bar at the top, we’d like to add flexibility (it was flexible) with this brand element and say it can be used at the top OR side.
Ensure that the entire colour bar is never less than 5.5 millimetres (mm) or 20 pixels (px) high.
To determine the optimal size for the colour bar, divide the canvas into 24 across its longest side to calculate “x” (the minimum size of the margin). The thickness of the colour bar should be 3/4x.
While this sizing is based on a canvas of 8.5" x 11", in some layouts the bar thickness may appear too large or too small. The colour bar may be resized, but it must stay proportionate to the logo.
|5.5 mililmeters (mm) or 20 pixels (px) high|
|Digital- desktop||18 px high|
|Digital - tablet landscape||16 px high|
|Digital - tablet portrait||14 px high|
|Digital - mobile||10 px high|
When using the colour bar, do not do the following:
- Change the placement order of the colours.
- Mix colours from different palettes.
- Use the colour bar multiple times on a single canvas.
- Flip the colour bar so the black line is on top.
- Change the placement of the colour bar within the layout.
- Place elements over the colour bar.
- Alter the thickness of the colour bar.
- Alter the number of colours.
If you can’t print in colour, create a one-colour version of the colour bar using the colours in the table below. Don’t use the colour bar if you can’t print tints.
|Level 1||15% black|
|Level 2||35% black|
|Level 3||50% black|
|Level 4||65% black|