This website stores cookies on your computer. These cookies are used to collect information about how you interact with our website and allow us to remember your browser. We use this information to improve and customize your browsing experience, for analytics and metrics about our visitors both on this website and other media, and for marketing purposes. By using this website, you accept and agree to be bound by UVic’s Terms of Use for web and social media privacy.  If you do not agree to the above, you can configure your browser’s setting to “do not track.”

Skip to main content

Brand guidelines for UVic websites

These guidelines apply to websites built in Cascade using the branded template (version 4.x or later).

For sites still using the legacy template, please email the Senior Web Officer for guidance.

UVic web template

The redesigned look and feel of uvic.ca (aka "template 4") is the result of extensive user interviews, testing and best practices in accessible and mobile-optimized web design.

Please do not add custom code to change the UVic web template. If you have specific customization needs, please email the Senior Web Officer to discuss how we can help.

The Digital Development and User Experience (DDUX) team works hard to align with industry best practices. We continue to implement tools, processes and training as we roll out the new template to ensure the sites remain accessible, searchable and responsive for mobile users.

Typography

The fonts used on uvic.ca are standard across all websites using this template. For accessibility, consistency and usability we do not utilize custom fonts.

Our fonts support a wide range of characters and scripts, including those required for Indigenous languages. This ensures we represent Indigenous languages accurately and respectfully.

  • headings: Poppins bold
  • body text: OpenSans regular
  • buttons and navigation menus: OpenSans semi-bold

Colour palette

The colour palette on the the UVic website uses the web-safe versions of the core UVic palette. These colours have been optimized to ensure they provide enough contrast between background colours and foreground text to meet accessibility requirements.

Please ensure you use the correct combination of background/foreground colours to make sure your text is accessible.

Accent colours

Note that accent colours should be used sparingly; we recommend 60% primary, 30% secondary and 10% accent on a single page.

Please avoid using the yellow background colour for content near the top of a page, as it can be confused with the emergency messaging banner.

Custom colours

Outside of very specific use cases, we do not support custom colours on the UVic website.

Exceptions include the VP Indigenous palette and the Sustainable Development Goals in accordance with the United Nations style rules.

If you have specific colour needs, please email the Senior Web Officer to discuss how we can help.

UVic wordmark & crest (logo)

The UVic wordmark appears in the header of the new web template, with the crest/logo in the footer.

Photo & video

High-quality, dynamic photography is preferred on the website, particularly for full-width hero and feature images.

Recommendations

  • images should be cropped to size and compressed before uploading to the website
  • use WebP images where possible, particularly for large images
  • avoid using PNG files where possible—they are often quite large and slow down page load time
  • for video: host your video through another platform (YouTube, Echo 360, etc) and embed the video using the correct component

Custom graphics & icons

Contact the Senior Web Officer before you start work on custom designs for your web project.

Custom graphics should complement the look and feel of the UVic website, particularly with colour and style.

  • we support SVG (preferred) and Lottie (animated) vector graphics
  • we support WebP (preferred) and JPG raster graphics

FontAwesome

The UVic website incorporates web icons from FontAwesome for certain components (such as the icon bar or infographics). We can also support SVG versions of FontAwesome icons for use in other components.

Our FontAwesome set-up also supports the use of custom icons, provided they follow FontAwesome’s design guidelines and best practices. Please email the Senior Web Officer for more information.