UCSF Website Standards
In addition to the aligning with UCSF brand standards, requirements and technical specifications are offered to help you build an official UCSF website. If you're starting a website, please review the UCSF Website Standards.
Whether representing a campus or a clinical sub-brand, we are all part of UCSF. And our web presence should reflect this association – we should look like we are part of the same family. As the most visible representation of our brand, the family of UCSF logo lock-ups is an important component to creating a consistent web presence across the entire enterprise. The following pages explain how to unify UCSF web properties.
In digital environments, color plays a big role in accessibility — the greater the contrast, the better the readability. See Interactive Colors for more information.
Download a PDF of Interactive Colors to copy HEX codes.
Sample web layout
This sample layout for a campus sub-brand shows where logo lock-up, type and navigation should be consistently placed. Other branded areas use color, photography and graphic expression to showcase the purpose of the website while maintaining its association with UCSF. Helvetica Neue Roman is recommended for UCSF websites. If you are unable to access or purchase webfonts, Arial should be used as a substitute.
The web banner and main navigation on a webpage should be consistently used to maintain a strong UCSF brand impression. The main splash area is an opportunity to communicate the purpose of the website while maintaining the group’s association with UCSF.
In most cases, the web banner should feature the full text, “University of California San Francisco.” This will help to avoid redundancy with the UCSF logo lock-ups appearing in the main navigation and create optimal clarity and legibility. In cases where the webpage does not include a UCSF logo, the web banner should include both the UCSF logo and “University of California San Francisco” text. Web banner, including links, cannot be modified in any way.
Source code for UCSF web banners can be downloaded in accessibility-approved digital colors.
SUB-BRAND WEB BANNER
WEB BANNER FOR SITES WITHOUT MASTER BRAND LOGO OR SUB-BRAND LOGO LOCK-UP
Web banner COLOR options
Logo Lock-up Sizing, Dimensions
Logo lock-ups should be presented consistently across all UCSF websites.
All logos must be approved by University Relations and created by Documents and Media or another designee. No other logos should be created.
When you receive the folder of logo lock-ups from Documents and Media, a “web only” file is included that is double the maximum logo lock-up size requirement (332 PX). This logo should be used on your website to ensure consistent application.
The main navigation menu should not exceed 7 items in total to ensure adequate spacing. Links should be set in Helvetica Neue or Arial at 16 PX.
The recommended height of the main navigation is 130 pixels. This height should accommodate placement of most logo lock-ups.
Department Logo Lock-Ups for Entities
If you are a campus department that is part of an umbrella entity, use the “web only” version logo lock-up for your department website. When using a campus logo lock-up with entity, the campus department name may occupy a minimum of one line and a maximum of three lines. Please refer to the previous page for guidance on sizing and placement within the main navigation.
1 LINE SUB-BRAND + ENTITY (MINIMUM)
2 LINE SUB-BRAND + ENTITY
3 LINE SUB-BRAND + ENTITY (MAXIMUM)
Responsive Web Application for Campus Logo Lock-Ups
Use the following logo sizing recommendations to determine logo lock-up sizing and breaks for responsive application within devices.
The height of the main navigation across all devices is variable depending on the height of campus logo lock-up with entity tier line. The main navigation height should be adjusted to accommodate the height of the logo with appropriate clear space above and below the logo lock-up.
DESKTOP and horizontal tablet
Sites without Sub-Brand Logo Lock-ups
For sites without a sub-brand logo lock-up (i.e., administrative departments, offices), use the web banner that features the UCSF logo alongside the logotype. Only sites without a sub-brand logo lock-up should use the logo within the web banner.
Sites Without a master brand logo or Sub-Brand Logo Lock-Up