UBC Visual Identity Header: Colour Scheme Options Matrix

UBC units can choose from one of the following six color combination options for their website header. The three UBC corporate colours are: UBC Blue (#002859), UBC Grey (#7491a3) and White (#000000).

The graphics for these six options will be provided for you from the Public Affairs Office. Colours, dimensions, typography and placement are strictly enforced unless noted otherwise.

Sets of 6 Options for the Visual Identity Header

Option 1: UBC Blue 1

Option 2: UBC Blue 2

Option 3: UBC Grey 1

Option 4: UBC Grey 2

Option 5: UBC Grey with Custom "A Place of Mind" Button 1

Option 6: UBC Grey with Custom "A Place of Mind" Button 2

Note: There is no custom colour available for the “a place of mind” Button with the UBC BLUE WEB BAR.

UBC Visual Identity Header: Design Specifications

Click to enlarge.

UBC Visual Identity Header: "A Place of Mind" Button, Animated VS Non-Animated

The animated version of the "a place of mind" button features a circle icon at the top right.  Use this option to highlight and expose featured stories on your own website.  Clicking on this button will open a mega menu that will display featured stories.

Note: to activate this feature, please see Implementing the CLF.

The non-animated version of the "a place of mind" button does not feature a circle icon.  This option is the default setting.  Clicking on this button will forward users to the UBC Community website, www.aplaceofmind.ubc.ca.

UBC Visual Identity Header: Sub Domains

Academic Units

Primary Unit Level

Secondary Unit Level

Administrative Units

UBC units that service both UBC and/or UBC Okanagan

Executive Units

A limited number of units identified and maintained by Public Affairs

UBC CLF Framework

The CLF Framework consists of Primary-CLF Elements and Secondary-CLF Elements.

1. Primary-CLF Elements consist of:
   1. Required content, design, links and functionality that
      1. Warrant placement in every UBC website across the university due to their high level of use or their strategic value from a web communications perspective, and
      2. Are relevant to all campus locations.
   2. Optional content, links and functionality that adhere to a university-wide standard.
   3. Reserved space for these required and optional university-wide elements.
2. Secondary-CLF Elements consist of:
   1. Required content, design, links and functionality to mark campus location where appropriate.
   2. Site-specific content, design, links, and functionality that can be customized on a site-by-site basis to accommodate localization of unit-level needs (e.g. Campus location, Faculty / Departmental-specific information etc.).
   3. Reserved space for these site-specific elements.

CLF Requirements

Two options for the CLF will be offered:

1. Minimum CLF
2. Full CLF

Minimum CLF

The Minimum CLF consists of the following required elements:

• UBC CLF Background
• Global Utility Header
• Visual Identity Header
• Visual Identity Footer
• Global Utility Footer

These required elements are highlighted in green in the graphic image below and must not be altered in any way.

Full CLF

The FUll CLF consists of the following required elements:

• UBC CLF Background (Minimum CLF Element)
• Global Utility Header (Minimum CLF Element)
• Visual Identity Header (Minimum CLF Element)
• UBC CLF Primary Navigation
• UBC CLF Secondary Navigation
• UBC CLF Content Space
• Sub Footer
• Visual Identity Footer (Minimum CLF Element)
• Global Utility Footer (Minimum CLF Element)

The Full CLF consists of the Minimum CLF elements and the optional content areas of the templates including CSS styles and layouts.  The area highlighted in red in the graphic image below indicates the optional content areas which together with the green areas make up the Full CLF.

Do's and Don'ts With the CLF

The Visual Identity Header should be left intact and unmodified.

The Unit Identifier text should not be modified.

Do not add any sub logos in the Visual Identity Header.

Do not add a unique wordmark or graphic in the Visual Identity Header.

Design Guidelines

The UBC CLF Visual Identity Header provides an information hierarchy and visual consistency across the University's websites. When adapting the Minimum CLF, consider the following design guidelines:

1. If your unit identity includes the UBC Logo, avoid stacking it with the UBC Logo in the Visual Identity Header.
2. In general, avoid UBC Logo versions in close proximity.
3. The dimensions of the UBC Logo have been kept intentionally minimal in the UBC CLF Visual Identity Header. Units repeating the UBC Logo (crest) should alter the scale of their own logo so that the size is substantially different from the one in the Visual Identity Header in order to provide visual clarity and to add interest to the page.

Overview of the CLF Elements

The CLF is made up of the following elements:

1. UBC CLF Header
   1. Global Utility Header
      1. Campuses Mega Menu
      2. UBC Directories Mega Menu
      3. UBC QuickLinks Mega Menu
      4. Search Box
   2. Visual Identity Header
      1. UBC Logo
      2. UBC Tagline
      3. University Name
      4. Unit Identification
   3. UBC CLF Primary Navigation
2. UBC CLF Background
3. UBC CLF Content Space
4. UBC CLF Secondary Navigation
5. UBC CLF Footer
   1. Sub Footer
   2. Visual Identity Footer
      1. UBC Signature (Logo, Tagline, and Name)
      2. Unit Identification
      3. Unit Address and Contact
   3. Global Utility Footer