CLF Specifications


Guidelines for the FOE UBC CLF are defined in three categories:

  1. Minimum Requirements;
  2. Highly Recommended; and
  3. Optional

Please see reference image below

Minimum Requirements

There are parts of the CLF that are mandatory or required for all FOE UBC websites. This ensures that FOE UBC websites have a minimum level of uniformity in visual presentation and functionality, hence the term “common look and feel”. The parts defined as minimum requirements are marked in red.

Highly Recommended

These parts of the CLF, while optional, are critical elements we highly recommend that you keep intact and incorporate into your site.

The CLF Templates have been designed following best practices in usability and have been rigorously tested for compatibility across multiple browsers, operating systems, devices, and screen resolutions. Furthermore, the design and code meets web accessibility standards. Any modifications to the highly recommended parts may result in undesirable effects and compatibility issues. The parts defined as highly recommended are marked in yellow.


Finally, the optional part of the CLF is the area where units have the freedom to create and incorporate custom design styles. The part defined as optional is marked in green.

CLF Specifications Map- green editable, yellow recommended, red must remain

The Faculty of Education banner is a visual element that is meant to accent the web page and not to overwhelm. The banner can be solid color or a gradient. Some muted images are welcomed as seen in the image below .

Banner with muted imagery

Banner dimensions and templates

Purpose and Function

The chevron’s purpose is to maintain a units/departments brand on every page without taking up too much header space. The chevron “is not” meant to be a logo and should not include imagery or illustrations of any kind.


The shape of the chevron has been styled to respond to the viewer’s device size, and therefore, should remain the same shape on every site using the Faculty of Education CLF.

Chevron Dimensions and Templates

The Hoeffler & Frère-Jones font Whitney is the institutional typeface used in all UBC Brand Signatures. The Whitney typeface is not yet available as a web font, and the main web font used for the CLF is Arial (Regular and Bold).

Note that a change to OpenSans font is proposed for June 2014. This change will bring us closer to the Whitney look and will also provide a more open, cleaner, looking feel to the sites

Units are encouraged to use Arial as a first choice throughout content areas, but they can also opt for other handsome typography that is appropriate for their website.

The default body text size is 14px with a line-height of 20px. The default type sizes, spacing and alignment have been carefully selected to ensure strong contrast and legibility on various screen sizes.

h1. Heading 1

h2. Heading 2

h3. Heading 3

h4. Heading 4

h5. Heading 5
h6. Heading 6

Please Note! Units can make changes to type and heading sizes, but need to keep in mind readability, color contrast and alignment on various screen sizes. Please test a text sample on small, medium and large screen sizes before deciding on type size.

With approximately 20% of people being affected by some form of disability and a growing population of older people with changing abilities due to aging, making UBC’s websites accessible is a high priority for us. That’s why we’ve designed the UBC CLF to meet Web Content Accessibility Guidelines (WCAG) 2.0 , an internationally recognized standard for Web Accessibility.

Color Contrast Considerations

We ask that this be taken into consideration for a current and future web projects. For more information in this matter please read WCAG 2.0 and Link Colors

Color Contrast Tool

To help aid web designers and content managers an online contrast tool has been created. This tool will help you see if your text and background color contrast properly and whether it is WCAG AA or AAA compliant.