CINXE.COM

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa 1.0//EN" "http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" version="XHTML+RDFa 1.0" dir="ltr" xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:dc="http://purl.org/dc/terms/" xmlns:foaf="http://xmlns.com/foaf/0.1/" xmlns:og="http://ogp.me/ns#" xmlns:rdfs="http://www.w3.org/2000/01/rdf-schema#" xmlns:sioc="http://rdfs.org/sioc/ns#" xmlns:sioct="http://rdfs.org/sioc/types#" xmlns:skos="http://www.w3.org/2004/02/skos/core#" xmlns:xsd="http://www.w3.org/2001/XMLSchema#"> <head profile="http://www.w3.org/1999/xhtml/vocab"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="Generator" content="Drupal 7 (http://drupal.org)" /> <link rel="canonical" href="/brand-guide/iconography" /> <link rel="shortlink" href="/node/211" /> <link rel="shortcut icon" href="https://identity.ucsf.edu/profiles/ucsf_b1gfoot/themes/ucsf_b1gfoot_theme/favicon.ico" type="image/vnd.microsoft.icon" /> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" /> <meta property="og:image" content="https://identity.ucsf.edu/profiles/ucsf_b1gfoot/themes/ucsf_b1gfoot_theme/img/img-metatag.jpg" /> <meta property="og:image:width" content="940" /> <meta property="twitter:image" content="https://identity.ucsf.edu/profiles/ucsf_b1gfoot/themes/ucsf_b1gfoot_theme/img/img-metatag.jpg" /> <meta property="twitter:card" content="summary" /> <meta property="og:site_name" content="UCSF Brand Identity" /> <meta property="twitter:url" content="https://identity.ucsf.edu/brand-guide/iconography" /> <meta property="og:url" content="https://identity.ucsf.edu/brand-guide/iconography" /> <meta property="twitter:title" content="Iconography | UCSF Brand Identity" /> <meta property="og:title" content="Iconography" /> <title>Iconography | UCSF Brand Identity</title> <link type="text/css" rel="stylesheet" href="https://identity.ucsf.edu/sites/g/files/tkssra266/f/css/css_kShW4RPmRstZ3SpIC-ZvVGNFVAi0WEMuCnI0ZkYIaFw.css" media="all" /> <link type="text/css" rel="stylesheet" href="https://identity.ucsf.edu/sites/g/files/tkssra266/f/css/css_EJL_7lrjsH8BZ6q38g9TN9dgvY5IouUd4PiJZQyBEFI.css" media="all" /> <link type="text/css" rel="stylesheet" href="https://identity.ucsf.edu/sites/g/files/tkssra266/f/css/css_rV3Wod_e6ST6El0CA65NgFrvcFHnCpm1z0SGwM9reQg.css" media="all" /> <style type="text/css" media="all"> <![CDATA[/*> </style> <link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/hopscotch/0.2.5/css/hopscotch.min.css" media="all" /> <link type="text/css" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" media="all" /> <link type="text/css" rel="stylesheet" href="https://identity.ucsf.edu/sites/g/files/tkssra266/f/css/css_-5KGL3kpG9BJtjhjan_sSs2LNKUh8DXr0FbFKbHMQxM.css" media="all" /> <link type="text/css" rel="stylesheet" href="https://identity.ucsf.edu/sites/g/files/tkssra266/f/css/css_47DEQpj8HBSa-_TImW-5JCeuQeRkm5NMpJWZG3hSuFU.css" media="print" /> <style type="text/css" media="all"> <![CDATA[/*> </style> <link type="text/css" rel="stylesheet" href="https://identity.ucsf.edu/sites/g/files/tkssra266/f/css/css_StcZZY5AYSkYDUkI_3QyJhnZmk-OFdJWVY2A4NU11NA.css" media="all" /> <script type="text/javascript" src="https://identity.ucsf.edu/sites/g/files/tkssra266/f/js/js_Pt6OpwTd6jcHLRIjrE-eSPLWMxWDkcyYrPTIrXDSON0.js"></script> <script type="text/javascript" src="https://identity.ucsf.edu/sites/g/files/tkssra266/f/js/js_onbE0n0cQY6KTDQtHO_E27UBymFC-RuqypZZ6Zxez-o.js"></script> <script type="text/javascript" src="https://identity.ucsf.edu/sites/g/files/tkssra266/f/js/js_MItSgdSkwVZBTl5MsdgLy94Mp-HJ6pvBHirm2wMSuzA.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/hopscotch/0.2.5/js/hopscotch.min.js"></script> <script type="text/javascript" src="https://identity.ucsf.edu/sites/g/files/tkssra266/f/js/js_Md_O18EkEkENyifmdSaTOM057n9-b6JB039etuiVtGE.js"></script> <script type="text/javascript" src="https://www.googletagmanager.com/gtag/js?id=UA-174314-5"></script> <script type="text/javascript"> <![CDATA[//><!]]> </script> <script type="text/javascript"> <![CDATA[//><!]]> </script> <script type="text/javascript" src="https://identity.ucsf.edu/sites/g/files/tkssra266/f/js/js_3KU2G0XuUwThidq7lpTBQghUO1g1ty4dEdv-co66Xqw.js"></script> <script type="text/javascript" src="https://identity.ucsf.edu/sites/g/files/tkssra266/f/js/js__pev76oqunwyHrozBOUwthVLhzUZgLLfKlmOonOmdkg.js"></script> <script type="text/javascript"> <![CDATA[//><!]]> </script> </head> <body class="html not-front not-logged-in page-node page-node- page-node-211 node-type-page header--navy ucsf-b1gfoot font--header--helveticaneue nav--lock profile--grid sidebar sidebar--left sidebar-color--white" > <div id="skip-link"> <a href="#main-content" class="element-invisible element-focusable">Skip to main content</a> </div> <div id="page-wrapper"> <div id="page"> <div class="ucsf-top-header row-full-width no-logo"> <div class="inside"> <ul class="menu"> <li class="first"><a href="https://www.ucsf.edu">University of California San Francisco</a></li> <li><a href="https://www.ucsfhealth.org/">UCSF Health</a></li> <li><a href="https://www.ucsf.edu/search" title="">Search UCSF</a></li> <li><a href="https://www.ucsf.edu/about">About UCSF</a></li> </ul> </div> </div> <div id="header" class="row-full-width"> <div class="inside clearfix"> <h1 id="site-name"> <a href="/" title="Home" rel="home"> UCSF Brand Identity </a> </h1> <div class="region region-header"> <div id="block-search-form" class="block block-search"> <div class="content"> <form onsubmit="if(this.search_block_form.value=='Search'){ alert('Please enter a search'); return false; }" action="/brand-guide/iconography" method="post" id="search-block-form" accept-charset="UTF-8"><div><div class="container-inline"> <h2 class="element-invisible">Search form</h2> <div class="form-item form-type-textfield form-item-search-block-form"> <label class="element-invisible" for="edit-search-block-form--2">Search... </label> <input title="Enter the terms you wish to search for." placeholder="Search..." class="text-input fa fa-search form-text" aria-hidden="" type="text" id="edit-search-block-form--2" name="search_block_form" value="" size="40" maxlength="128" /> </div> <div class="form-actions form-wrapper" id="edit-actions"><input type="submit" id="edit-submit" name="op" value="" class="form-submit" /></div><input type="hidden" name="form_build_id" value="form-yR-KyK-U-N4Wef6xGlDMK1AJNmtTswo9UfYXsJcZagw" /> <input type="hidden" name="form_id" value="search_block_form" /> </div> </div></form> </div> </div> <div id="block-ucsf-b1gfoot-tweaks-header-socialmedia" class="block block-ucsf-b1gfoot-tweaks"> <div class="content"> <div class="nav-social"></div> </div> </div> <div id="block-menu-block-1" class="block block-menu-block"> <div class="content"> <div class="menu-block-wrapper menu-block-1 menu-name-main-menu parent-mlid-0 menu-level-1"> <ul class="menu"><li class="first expanded active-trail menu-mlid-1776"><a href="/brand-guide" class="active-trail">Brand Guide</a><ul class="menu"><li class="first leaf menu-mlid-1811"><a href="/brand-guide/brand-story">Brand Story</a></li> <li class="leaf menu-mlid-1781"><a href="/brand-guide/logos">Logos</a></li> <li class="leaf menu-mlid-1786"><a href="/brand-guide/color">Color</a></li> <li class="leaf menu-mlid-1791"><a href="/brand-guide/fonts">Font/Typography</a></li> <li class="leaf menu-mlid-1796"><a href="/brand-guide/editorial-expression">Editorial Expression</a></li> <li class="leaf menu-mlid-1801"><a href="/brand-guide/visual-framework">Visual Framework</a></li> <li class="leaf menu-mlid-16836"><a href="/brand-guide/patterns" title="Patterns">Patterns</a></li> <li class="leaf active-trail active menu-mlid-16831"><a href="/brand-guide/iconography" class="active-trail active">Iconography</a></li> <li class="leaf menu-mlid-1806"><a href="/brand-guide/using-ucsf-name">Using the UCSF Name</a></li> <li class="last leaf has-children menu-mlid-1816"><a href="/brand-guide/ucsf-health">UCSF Health Guidelines</a></li> </ul></li> <li class="expanded menu-mlid-2226"><a href="/print-digital">Print & Digital</a><ul class="menu"><li class="first leaf menu-mlid-1826"><a href="/print-digital/print-guidelines">Print Guidelines</a></li> <li class="leaf menu-mlid-1861"><a href="/print-digital/digital-guidelines">Digital Guidelines</a></li> <li class="leaf menu-mlid-1841"><a href="/print-digital/websites">Websites</a></li> <li class="last leaf menu-mlid-1866"><a href="/print-digital/social-media">Social Media</a></li> </ul></li> <li class="expanded menu-mlid-1731"><a href="/photography-video">Photography & Video</a><ul class="menu"><li class="first leaf menu-mlid-1846"><a href="/photography-and-video/photography-standards">Photography Standards</a></li> <li class="leaf menu-mlid-1876"><a href="/photography-video/brand-photography-library">Brand Photography Library</a></li> <li class="last leaf menu-mlid-1851"><a href="/photography-video/video-standards">Video Standards</a></li> </ul></li> <li class="expanded menu-mlid-1726"><a href="/templates-examples">Templates & Examples</a><ul class="menu"><li class="first leaf menu-mlid-1741"><a href="/templates-examples/correspondence">Correspondence</a></li> <li class="leaf menu-mlid-1756"><a href="/templates-examples/presentation">Presentation</a></li> <li class="leaf menu-mlid-2231"><a href="/templates-examples/print-materials">Print Materials</a></li> <li class="leaf menu-mlid-2236"><a href="/templates-examples/posters-digital-signage">Posters & Digital Signage</a></li> <li class="leaf menu-mlid-1766"><a href="/templates-examples/campus-signage">Campus Signage</a></li> <li class="leaf menu-mlid-1771"><a href="/templates-examples/merchandise">Merchandise</a></li> <li class="last leaf menu-mlid-13056"><a href="/zoom-backgrounds">Zoom Backgrounds</a></li> </ul></li> <li class="last leaf menu-mlid-1736"><a href="/faq-contact">FAQ</a></li> </ul></div> </div> </div> </div> </div> </div> <div id="breadcrumb" class="row-full-width"><div class="inside"><h2 class="element-invisible">You are here</h2><div class="breadcrumb"><a href="/">Home</a> > <a href="/brand-guide">Brand Guide</a> > <span class="breadcrumb-page-title">Iconography</span></div></div></div> <div class="content-top"> <div class="region region-content-top"> <div id="block-fieldblock-node-page-default-field-hero-header-content" class="block block-fieldblock"> <div class="content"> <div class="field field-name-field-hero-header-content field-type-text-long field-label-hidden"><div class="field-items"><div class="field-item even"><h1>Iconography</h1> <p>Iconography can help simplify complex ideas or translate messages quickly. From science to conceptual needs, every icon should share a similar style and structure to unify our communications and contribute to a consistent brand experience that is unique to UCSF.</p> </div></div></div> </div> </div> </div> </div> <div id="main-wrapper"> <div id="main" class="clearfix"> <div id="content" class="column"> <div class="inside"> <a id="main-content"></a> <div class="tabs"></div> <div class="region region-content"> <div id="block-system-main" class="block block-system"> <div class="content"> <div id="node-211" class="node node-page header--navy clearfix" about="/brand-guide/iconography" typeof="sioc:Item foaf:Document"> <span property="dc:title" content="Iconography" class="rdf-meta element-hidden"></span><span property="sioc:num_replies" content="0" datatype="xsd:integer" class="rdf-meta element-hidden"></span> <div class="content"> <div class="field field-name-field-body field-type-text-long field-label-hidden"><div class="field-items"><div class="field-item even"><p><img alt="Examples of the new iconography style showing a range of scientific and medical symbols" height="413" src="/sites/g/files/tkssra266/f/wysiwyg/ucsf-iconography-overview.jpg" width="1280" /></p> <p>Sample icons demonstrate UCSF's iconography. The following guidelines help define icon style and demonstrate best-practice use cases. Designers can <a href="https://ucsf.box.com/s/4v85fxi16wvz1by7tpysyzw70wqbtijv">download a template to create icons</a> following the guidelines below. If you have questions about development or formatting of icons, please contact the Office of Communications at <a href="/cdn-cgi/l/email-protection#137a77767d677a676a53667060753d767766"><span class="__cf_email__" data-cfemail="9bf2fffef5eff2efe2dbeef8e8fdb5feffee">[email protected]</span></a>.</p> <h2>Style Cues</h2> <div class="wysiwyg_twocols layout--50-50"> <div class="wysiwyg_twocols--first bg--transparent"> <p><img alt="examples of iconography style showing scientific and location symbols with consistent line weight" height="632" src="/sites/g/files/tkssra266/f/wysiwyg/ucsf-iconography-style-cues-line-weight.jpg" style="float:left" title="" width="674" /></p> <h3>Consistent Line Weight</h3> <p>UCSF icons should be built with a consistent line weight to unify our family of icons. When developing icons, follow our template guidance below.</p> </div> <div class="wysiwyg_twocols--second bg--transparent"> <p><img alt="examples of iconography style showing scientific symbols with consistent flat terminals" height="632" src="/sites/g/files/tkssra266/f/wysiwyg/ucsf-iconography-style-cues-flat-terminals_0.jpg" style="float:right" title="" width="674" /></p> <h3>Flat Terminals</h3> <p>Consistent details like flat terminals define the unique style of UCSF icons. Flat terminals create crisp edges that unifies iconography with our graphic language and identity.</p> </div> </div> <div class="wysiwyg_twocols layout--50-50"> <div class="wysiwyg_twocols--first bg--transparent"> <p><img alt="examples of iconography style showing scientific and medical symbols with consistent corner radius" height="632" src="/sites/g/files/tkssra266/f/wysiwyg/ucsf-iconography-style-cues-radius.jpg" style="float:left" title="" width="672" /></p> <h3>Corner Radius</h3> <p>Maintain a limited range of corner radii to balance with clean geometry, flat terminals and overall style of iconography.</p> </div> <div class="wysiwyg_twocols--second bg--transparent"> <p><img alt="examples of iconography style showing scientific and medical symbols with consistent outline and fills" height="632" src="/sites/g/files/tkssra266/f/wysiwyg/ucsf-iconography-style-cues-outlines.jpg" style="float:right" title="" width="674" /></p> <h3>Outline and Fills</h3> <p>UCSF iconography is defined by outlined forms with consistent line weights and terminals. If introducing filled areas, scale filled areas to family with overall line weights.</p> </div> </div> <h2>Standardized Grid</h2> <div class="wysiwyg_twocols layout--50-50"> <div class="wysiwyg_twocols--first bg--transparent"> <p><img alt="iconography standardized grid" height="688" src="/sites/g/files/tkssra266/f/wysiwyg/ucsf-iconography-style-grid.jpg" style="float:left" title="" width="654" /></p> <h3>Grid</h3> <p>All UCSF icons should be based on a foundational grid of 192 x 192 pixels. Whether you are reformatting past icons or creating new icons, scale to this grid to establish consistency in size.</p> </div> <div class="wysiwyg_twocols--second bg--transparent"> <p><img alt="iconography standardized grid with padding" height="688" src="/sites/g/files/tkssra266/f/wysiwyg/ucsf-iconography-style-padding.jpg" style="float:right" title="" width="654" /></p> <h3>Padding</h3> <p>When building or scaling icons for consistency, add a 4 pixel pad around your icon within the grid to ensure all edges of the icon are rendered with ample clear space.</p> </div> </div> <div class="wysiwyg_twocols layout--50-50"> <div class="wysiwyg_twocols--first bg--transparent"> <p><img alt="iconography standardized grid showing example of a keyline" height="569" src="/sites/g/files/tkssra266/f/wysiwyg/ucsf-iconography-style-keyline-shapes_0.jpg" style="float:left" title="" width="569" /></p> <h3>Key Line</h3> <p>Keyline shapes within the grid serve as general guides for building and approximating scale. For icons that are circular, rectangular or square, keyline guides will help you quickly scale to fit.</p> </div> <div class="wysiwyg_twocols--second bg--transparent"> <p><img alt="iconography standardized grid showing scientific symbols with example of stroke weight" height="569" src="/sites/g/files/tkssra266/f/wysiwyg/ucsf-iconography-style-stroke-width_0.jpg" style="float:right" title="" width="569" /></p> <h3>Consistent Stroke Weight</h3> <p>The primary purpose of following a 192 x 192 pixel grid is to establish universal consistency in scale and line weight. Once you have scaled an icon consistently within this grid, set all line weights to 6 pixels.</p> </div> </div> <h2>Iconography Palette</h2> <div class="wysiwyg_twocols layout--50-50"> <div class="wysiwyg_twocols--first bg--transparent"> <p><img alt="Examples of the new iconography style showing a range of scientific and medical symbols on a navy background using white and blue" height="600" src="/sites/g/files/tkssra266/f/wysiwyg/UCSF_Iconography%20Palette_01_770x1385.jpg" style="float:left" width="334" /></p> </div> <div class="wysiwyg_twocols--second bg--transparent"> <p><img alt="Examples of the new iconography style showing a range of scientific and medical symbols on a white background using navy and blue" height="600" src="/sites/g/files/tkssra266/f/wysiwyg/UCSF_Iconography%20Palette_02_770x1385.jpg" style="float:right" width="334" /></p> </div> </div> <p>In some use cases, UCSF icons may appear in two colors to add contrast and dynamism to the palette. When applying two colors, always use UCSF Navy and UCSF Blue with White to reinforce our core brand colors. Two-color icons may be reversed out of UCSF Navy or appear on white. Using two-color icons will immediately elevate the proprietary look and feel of our icons.</p> <h2>Applications</h2> <div class="wysiwyg_twocols layout--50-50"> <div class="wysiwyg_twocols--first bg--transparent"> <p><img alt="Sample website using iconography with scientific and medical symbols in navy, blue and white" height="1455" src="/sites/g/files/tkssra266/f/wysiwyg/ucsf-iconography-application-1.jpg" style="float:left" width="1508" /></p> <p><img alt="Sample website using iconography with scientific and medical symbols and scientific photography" height="583" src="/sites/g/files/tkssra266/f/wysiwyg/ucsf-iconography-application-4.jpg" style="float:left" width="1507" /></p> <p><img alt="icon example web page color" height="584" src="/sites/g/files/tkssra266/f/wysiwyg/ucsf-iconography-application-5.jpg" style="float:right" width="1506" /></p> </div> <div class="wysiwyg_twocols--second bg--transparent"> <p><img alt="Sample website using iconography with location symbols in navy, blue and white on a dark background" height="847" src="/sites/g/files/tkssra266/f/wysiwyg/ucsf-iconography-application-3.jpg" width="1504" /></p> <p style="text-align:center"><img alt="Sample website using iconography with scientific and medical symbols in navy, blue and white on a white background" height="850" src="/sites/g/files/tkssra266/f/wysiwyg/ucsf-iconography-application-2.jpg" width="1508" /></p> <p style="text-align:center"><img alt="Sample website using iconography with scientific and medical symbols and scientific photography on mobile" height="1241" src="/sites/g/files/tkssra266/f/wysiwyg/ucsf-iconography-application-6-and-7.jpg" width="1500" /></p> </div> </div> <div class="wysiwyg_twocols layout--60-20-20"> <div class="wysiwyg_twocols--first bg--undefined bg--transparent"> <p>聽</p> </div> <div class="wysiwyg_twocols--second bg--undefined bg--transparent"> <p>聽</p> </div> </div> <div class="wysiwyg_twocols layout--50-50"> <div class="wysiwyg_twocols--first bg--transparent"> <p>聽</p> </div> <div class="wysiwyg_twocols--second bg--transparent"> <p>聽</p> </div> </div> <div class="wysiwyg_twocols layout--50-50"> <div class="wysiwyg_twocols--first bg--transparent"> <p>聽</p> </div> <div class="wysiwyg_twocols--second bg--transparent"> <p>聽</p> </div> </div> <p>聽</p> </div></div></div> </div> </div> </div> </div> </div> </div> </div> <div id="sidebar" class="column"> <div class="sidebar"> <div class="section"> <div class="region region-sidebar"> <div id="block-fieldblock-node-page-default-field-textarea-hero-sidebar" class="block block-fieldblock sidebar-banner"> <div class="content"> <div class="field field-name-field-textarea-hero-sidebar field-type-text-long field-label-hidden"><div class="field-items"><div class="field-item even"><p><a href="/brand-guide/brand-story">Brand Story聽禄</a></p> <p><a href="/brand-guide/logos">Logos聽禄</a></p> <p><a href="/brand-guide/color">Color 禄</a></p> <p><a href="/brand-guide/fonts">Fonts/Typography聽禄</a></p> <p><a href="/brand-guide/editorial-expression">Editorial Expression聽禄</a></p> <p><a href="/brand-guide/visual-framework">Visual Framework聽禄</a></p> <p><a href="/brand-guide/patterns">Patterns聽禄</a></p> <p><strong><a href="/brand-guide/iconography">Iconography 禄</a></strong></p> <p><a href="/brand-guide/using-ucsf-name">Using the UCSF Name聽禄</a></p> <p><a href="/brand-guide/ucsf-health">UCSF Health Guidelines聽禄</a></p> </div></div></div> </div> </div> </div> </div> </div> </div> </div></div> <div id="footer"> <div class="section"> <div class="region region-footer"> <div id="block-block-41" class="block block-block"> <div class="content"> <div class="wysiwyg_threecols layout--33-33-33"> <div class="wysiwyg_threecols--first bg--undefined bg--transparent"> <h5><a href="/brand-guide" style="color: #ffffff;">BRAND GUIDE</a></h5> <hr color="white" /> <p><a href="/brand-guide/logos" style="color: #ffffff;">Brand Story</a><br /> <a href="/brand-guide/logos" style="color: #ffffff;">Logos</a><br /> <a href="/brand-guide/color" style="color: #ffffff;">Colors</a><br /> <a href="/brand-guide/fonts" style="color: #ffffff;">Fonts/Typography</a><br /> <a href="/brand-guide/editorial-expression" style="color: #ffffff;">Editorial Expression</a><br /> <a href="/brand-guide/visual-framework" style="color: #ffffff;">Visual Framework</a><br /> <a href="/brand-guide/using-ucsf-name" style="color: #ffffff;">Using the UCSF Name</a><br /> <a href="/brand-guide/ucsf-health" style="color: #ffffff;">UCSF Health Guidelines</a></p> <p>聽</p> </div> <div class="wysiwyg_threecols--second bg--undefined bg--transparent"> <h5><a href="/print-digital" style="color: #ffffff;">PRINT & DIGITAL</a></h5> <hr color="white" /> <p><a href="/print-digital/digital-guidelines" style="color: #ffffff;">Print Guidelines</a><br /> <a href="/print-digital/digital-guidelines" style="color: #ffffff;">Digital Guidelines</a><br /> <a href="/print-digital/digital-colors" style="color: #ffffff;">Digital Colors</a><br /> <a href="/print-digital/websites" style="color: #ffffff;">Websites</a><br /> <a href="/print-digital/social-media" style="color: #ffffff;">Social Media</a></p> <p>聽</p> <h5><a href="/photography-video" style="color: #ffffff;">PHOTOGRAPHY & VIDEO</a></h5> <hr color="white" /> <p><a href="/photography-and-video/photography-standards" style="color: #ffffff;">Photography Standards</a><br /> <a href="/photography-video/brand-photography-library" style="color: #ffffff;">Brand Photography Library</a><br /> <a href="/photography-video/video-standards" style="color: #ffffff;">Video Standards</a></p> <p>聽</p> </div> <div class="wysiwyg_threecols--third bg--undefined bg--transparent"> <h5><a href="/templates-examples" style="color: #ffffff;">TEMPLATES & EXAMPLES</a></h5> <hr color="white" /> <p><a href="/templates-examples/correspondence" style="color: #ffffff;">Correspondence</a><br /> <a href="/templates-examples/presentation" style="color: #ffffff;">Presentation</a><br /> <a href="/templates-examples/print-materials" style="color: #ffffff;">Print Materials</a><br /> <a href="/templates-examples/posters-digital-signage" style="color: #ffffff;">Posters and Digital Signage</a><br /> <a href="/templates-examples/campus-signage" style="color: #ffffff;">Campus聽Signage</a><br /> <a href="/templates-examples/merchandise" style="color: #ffffff;">Merchandise</a></p> </div> </div> </div> </div> </div> <div class="footer-bottom"> <nav aria-label="Footer Navigation" class="footer--navigation"> <ul> <li><a href="https://www.ucsf.edu/accessibility-resources">Accessibility</a></li> <li><a href="https://www.ucsf.edu/website-privacy-policy">Privacy Policy</a></li> <li><a href="https://websites.ucsf.edu/website-terms-use">Terms of Use </a></li> <li><a href="https://websites.ucsf.edu/azlist">A-Z Website List</a></li> </ul> </nav> <div class="footer--copyright"> <p>© 2024 The Regents of the University of California</p> </div> </div> </div> </div> </div> </div> <script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script><script type="text/javascript"> <![CDATA[//><!]]> </script> <script type="text/javascript"> /*<![CDATA[*/ (function() { var sz = document.createElement('script'); sz.type = 'text/javascript'; sz.async = true; sz.src = '//siteimproveanalytics.com/js/siteanalyze_8343.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(sz, s); })(); /*]]>*/ </script> </body> </html>