Each UCSF website provides an opportunity to make a strong impression on our audiences. The following pages detail best practices to create consistency across UCSF websites. 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. All logo lock-ups are created by UCSF Document and Media. No other logos are permitted on UCSF websites.

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.


Building Consistency

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.

Interactive Colors

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.

PDF iconInteractive Colors from UCSF_BrandGuide_v2.1_083116.pdf

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.

Web Banner

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.





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.










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


vertical 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