These are the offically supported colors for web properties of UCSF. Note they are used in "primary" and "secondary" main colors on many of the sites, although the other colors have been designed for complimentary look and feel. Future goals are to build out the suggested color combinations that ensure best practices for design and accessiblity. E.g, a light font used on a dark background.
Colors are the digital or interactive versions of the UCSF Brand master palette, and provide opportunities for greater contrast in order to meet W3C’s Web Content Accessibility Guideline (WCAG) AA level color contrast standards. Font size and other key details still need to be considered when using colored backgrounds. Visit identity.ucsf.edu for precise use cases and applications.
The fonts in the Pattern Library at the time of creation have been taken from the UCSF approved branding and supporting digital and web use. Note that some fonts require licensing to use.
Helvetica Neue Light is UCSF's primary typeface, and Granjon is secondary. Font licenses can be secured through services like myfonts.com; if you need help with this process, contact [email protected]. Information on best practices and examples of incorrect usage are available on identity.ucsf.edu.
Primary Typeface - Helvetica Neue
Helvetica Neue Light Italic
Helvetica Neue Roman
Helvetica Neue Italic
Helvetica Neue Bold
Helvetic Neue Substitute: Arial
Arial Regular
Arial Italic
Arial Bold
Arial Bold Italic
Secondary Typeface - Granjon Roman
Granjon Roman
Granjon Italic
Granjon Bold
Granjon Roman Substitute: Garamond Regular
Garamond Regular
Garamond Italic
Garamond Bold
This section contains all form elements and their accessible treatments. Future implementation requires an accessible error-handling treatment for when form elements don't pass validation.
Form elements should always have an intelligible order and proper attribution, so that a user can easily understand why and what is required of them. Forms should be tested for screen reader accessibility and responsive design.
This section contains a visible representation of the grid structure to support the site design. Singularity was chosen for the grid technology to provide a lighter framework with enough support to address all layout needs.
When developing new features, this framework should be considered so that elements can be interchanged easily.
These are headings.
Headings should be used to enhance navigation and information hierarchy. H1 should be used for page titles only, and all other titles should use H2 - H5 according to their level of importance. For visual interest and distinction, it's recommended that both serif and sans-serif are used. For instance, H1 and H2 are serif, but H3 and H4 are sans-serif. Headers should be used consistently across a site's pages to help orient users.
This section contains stylized ordered and unordered lists. At initial development, there were only standard styles, but this section is intended to define the multiple stylized list treatments in one place.
Lists should be used to delineate a series of items. Lists help a user quickly scan a page for relevant information.
Add stylized media treatments to this area, such as embedded video. Your group may explore additional video styles and treatments for specific use cases. The additional video treatments would be added to this section for future reference.
Media should meet general guidelines for accessibility and branding, available on identity.ucsf.edu.
The tables in the section were styled based on the approach used by UCD. They are classic tables and not yet responsive. This section is intended to display approved table styling for true tabular formatted data. Leverage teasers and cards in lists or rows if you are looking for more stylized layout structures.
Tables should be used sparingly; formatting can be frustrating for end users on mobile devices if the data cannot be compressed or expressed easily at a narrow size. Tables should also be used to complement other information, and should not be the main thrust of your webpage.
| thead th | thead th | thead th |
|---|---|---|
| tbody td | tbody td | tbody td |
| tbody td | tbody td | tbody td |
| tbody td | tbody td | tbody td |
| tbody td | tbody td | tbody td |
| tbody td | tbody td | tbody td |
| tbody td | tbody td | tbody td |
| tfoot td | tfoot td | tfoot td |
| thead th | thead th | thead th |
|---|---|---|
| tbody td | tbody td | tbody td |
| tbody td | tbody td | tbody td |
| tbody td | tbody td | tbody td |
| tbody td | tbody td | tbody td |
| tbody td | tbody td | tbody td |
| tbody td | tbody td | tbody td |
| tfoot td | tfoot td | tfoot td |
| thead th | thead th | thead th |
|---|---|---|
| tbody td | tbody td | tbody td |
| tbody td | tbody td | tbody td |
| tbody td | tbody td | tbody td |
| tbody td | tbody td | tbody td |
| tbody td | tbody td | tbody td |
| tbody td | tbody td | tbody td |
| tfoot td | tfoot td | tfoot td |
Most standard HTML text-like elements have been styled. Should you add additional style variants to the Pattern Library, add them here for reference and follow the structure for adding the global CSS.
Text styles should be applied universally for consistent user experience. For examples of proper and improper font usage, visit identity.ucsf.edu.
Lorem ipsum dolor sit amet, ex labore vivendo laboramus has, vel at putant legendos. Quod appareat id eos, noster malorum et mea.
Strong is used to indicate strong importance
This text has added emphasis
This text is deleted and This text is inserted
This text has a strikethrough
Superscript®
Subscript for things like H2O
Abbreviation: HTML
This text is a short inline quotation
This is a citation
The mark element indicates a highlight
Lorem ipsum dolor sit amet, consectetur adipiscing elit. This is a text linking something. Nulla vel iaculis diam. Nunc tincidunt, quam pulvinar luctus tempus, nisi diam ultricies felis, id egestas erat justo congue nisi.
Paragraph Style
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Large Paragraph Style
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Through development, you may need to add padding or other layout utilities to your structures. These classes provide a consistent way to apply padding and, if required in the future, can be changed globally.
Elements should sit comfortably away from one another so that a page's contents don't appear cramped or illegible.
Left Alignment
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere consectetur est at lobortis.
Center Alignment
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere consectetur est at lobortis.
Right Alignment
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere consectetur est at lobortis.
No Space Left
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere consectetur est at lobortis. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec sed odio dui.
Spacing Left Small
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere consectetur est at lobortis. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec sed odio dui.
Spacing Left
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere consectetur est at lobortis. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec sed odio dui.
Space Left Large
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere consectetur est at lobortis. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec sed odio dui.
One Fourth Width
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere consectetur est at lobortis. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec sed odio dui.
One Third Width
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere consectetur est at lobortis. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec sed odio dui.
Half Width
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere consectetur est at lobortis. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec sed odio dui.
Two Thirds Width
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere consectetur est at lobortis. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec sed odio dui.
Three Fourths Width
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere consectetur est at lobortis. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec sed odio dui.
Two Fifths Width
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere consectetur est at lobortis. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec sed odio dui.