Skip to main content
University of California San Francisco Give to UCSF

UCSF IT Technology

Main navigation

  • Status
    • Security Announcements
  • Services
    • Projects
  • How To
  • News & Events
  • About Us
  • Log In
Open Close Search
Open menu
Give to UCSF

Breadcrumb

  1. Home
  2. Standards and Guidelines
  3. Standards & Guidelines: Example (Web Style Guide)

This content is viewable by Everyone

Guideline

Standards & Guidelines: Example (Web Style Guide)

Save

Log in via MyAccess to save.

  • Impacted Services IT Website

Why have Web style guidelines?

Each UCSF website provides an opportunity to make a strong positive impression on our audiences. In this, an attractive and consistently applied style for presenting graphics and other visuals plays an important role.

We have put together a set of best practices guidelines for ensuring visual consistency across all UCSF-affiliated websites. These guidelines cover:

  • Web banner and main navigation
  • Logo lock-up placement and sizing
  • Application of the graphic system 

The proposed designs:

  • Create a unique visual style for our websites that identifies them at a glance as part of UCSF
  • Establish close stylistic connections between them, while enabling sub-brands to showcase their personalities
  • Will help you align with UCSF brand standards

You can also access requirements and technical specifications to help you build an official UCSF website.

  • If you're starting a website, please review the UCSF Website Standards.

There are several resources that UCSF web site developers can use to meet the UCSF web style guidelines:

  • identity.ucsf.edu - The primary source for all UCSF style information
  • webpatterns.ucsf.edu - A developer- and designer-friendly pattern library
  • ucsf banners code example - Hosted in the UCSF web services Git repository

Two technology-specific code bases are also available:

  • https://github.com/ucsf-web-services/ucsf_jekyll_basic - For Jekyll
  • https://github.com/ucsf-drupal/ucsf_installprofile - The UCSF Drupal Install package

 

  • Owning Team: Web Services
Section Menu
IT Website
  • IT Website Content: Getting Started as a Content Editor
  • IT Website Content: Work with the Drupal Editor
  • IT Website Content: Publishing Content
  • IT Website Content: Best Practices
  • IT Website Content: Create a Service Page
  • IT Website Content: Create a "How to" Page
  • IT Website Content: Create a Status Update
  • IT Website Content: Update Your Team Page and Profile
  • IT Website Content: Search Improvements
Home

Footer Col 1

  • Status
  • Services
  • How To
  • News & Events

Footer Col 2

  • About
  • IT Directory
  • Standards & Guidelines

Footer Col 3

  • Get Help
  • Recognize IT Staff
  • Submit a Support Inquiry

    For emergencies and high priority issues please call the IT Service Desk (415) 514-4100

    • Facebook
    • Twitter
    • YouTube
    • Instagram

    © 2025 The Regents of the University of California