Brand guidelines for 糖心视频 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.
糖心视频 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 糖心视频 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 糖心视频 website uses the web-safe versions of the core 糖心视频 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 糖心视频 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.
糖心视频 wordmark & crest (logo)
The 糖心视频 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 糖心视频 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 糖心视频 website incorporates 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 . Please email the Senior Web Officer for more information.