Website Standards

Websites are one of UCSF's most powerful and versatile communications platforms. They are an opportunity to make a first impression with the audiences you're trying to reach. Effective websites are strategically designed, intuitive, engaging and accessible.

Consistent Representation of UCSF

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. Before starting a web project, consider the appropriate representation of your department or unit within the UCSF logo family.  For guidance, visit the Logos page.

Sample Website 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.

Branded Areas

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

NEW Global Navigation available for Site Builder websites. For details, go to this blog post on websites.ucsf.edu.

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. All web banners have standard links to UCSF.edu and UCSFHealth.org. Schools may add a link to their main website (in place of "About UCSF" and "Search UCSF") for web banners on department/division sites. No other modifications should be made to web banners without approval from UCSF's Office of Communications.

Sub-Brand Web Banner

Web Banner for Sites Without a Logo Lock-up

Web Banner Color Options

Sizing for Logo Lock-ups

  • Logo lock-ups should be presented consistently across all UCSF websites.
  • All logos must be approved by UCSF's Office of Communications 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.

Campus

Clinical

Sites without Logo Lock-Ups

Exceptions

Web banner example.

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

Web banner example.

Vertical Tablet

Web banner on tablet example.

Mobile

Web banner on mobile example.