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/visual-framework" /> <link rel="shortlink" href="/node/81" /> <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/visual-framework" /> <meta property="og:url" content="https://identity.ucsf.edu/brand-guide/visual-framework" /> <meta property="twitter:title" content="Visual Framework | UCSF Brand Identity" /> <meta property="og:title" content="Visual Framework" /> <title>Visual Framework | 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-81 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/visual-framework" 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-EglNYkud_1kn601vv-x5VS_qUbDJ4BzwwyZbazS7w_A" /> <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 active-trail active menu-mlid-1801"><a href="/brand-guide/visual-framework" class="active-trail active">Visual Framework</a></li> <li class="leaf menu-mlid-16836"><a href="/brand-guide/patterns" title="Patterns">Patterns</a></li> <li class="leaf menu-mlid-16831"><a href="/brand-guide/iconography">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">Visual Framework</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>Visual Framework</h1> <p>The visual framework, also known as the graphic expression, is a design framework which allows you to put the pieces of the visual system together to create a look and feel that is unique to UCSF. The result builds consistency and recognition into UCSF materials, and helps us embrace the UCSF brand and begin to look like a cohesive family.</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-81" class="node node-page header--navy clearfix" about="/brand-guide/visual-framework" typeof="sioc:Item foaf:Document"> <span property="dc:title" content="Visual Framework" 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>聽</p> <h2><img alt="visual framework" height="932" src="/sites/g/files/tkssra266/f/wysiwyg/UCSF-Visual-Framework.jpg" width="1604" /></h2> <p>Our graphic expression is an organic tapestry that brings color, imagery, textures and content together to form a connected and unified expression of this brand promise and to symbolize one UCSF.</p> <h2>Application</h2> <div class="wysiwyg_twocols--second bg--transparent">聽</div> <p><img alt="Graphic Expression Application" height="1074" src="/sites/g/files/tkssra266/f/wysiwyg/UCSF_GraphExp_Application_1604x1074.jpg" width="1604" /></p> <p>Our graphic expression is a flexible system that can convey multiple concepts to reinforce a story or simply to serve as a functional element that visually supports content flow and hierarchy. The following demonstrates the range and flexibility of our graphic expression optimized for both digital (desktop and mobile) and traditional print applications.</p> <div class="wysiwyg_twocols layout--50-50"> <div class="wysiwyg_twocols--first bg--transparent"> <p><img alt="graphic expression focus" height="600" src="/sites/g/files/tkssra266/f/wysiwyg/UCSF_GraphExp_Variations_Focus_770x751.jpg" style="float:left" title="" width="615" /></p> <h3>Focus</h3> <p><strong>Focus and Highlighting: </strong>Layering and scaling graphic forms within itself to create a focal point may visually suggest or reinforce the idea of focus or magnification.</p> </div> <div class="wysiwyg_twocols--second bg--transparent"> <p><img alt="graphic expression overlap" height="600" src="/sites/g/files/tkssra266/f/wysiwyg/UCSF_GraphExp_Variations_Overlap_770x770.jpg" style="float:right" title="" width="1101" /></p> <h3>Overlap</h3> <p><strong>Collaboration and Integration: </strong>Overlapping graphic forms to reveal a focal point may visually reinforce the idea of collaboration or integration to highlight an area of focus.</p> </div> </div> <div class="wysiwyg_twocols layout--50-50"> <div class="wysiwyg_twocols--first bg--transparent"> <p><img alt="graphic expression connect" height="1115" src="/sites/g/files/tkssra266/f/wysiwyg/UCSF_GraphExp_Variations_Connect_770x1114.jpg" style="float:left" title="" width="771" /></p> <h3>Connect</h3> <p><strong>Connected Community:</strong> Connecting graphic forms into a composition visually reinforces UCSF鈥檚 core building blocks and its core story of converging the best research, education and patient care.</p> </div> <div class="wysiwyg_twocols--second bg--transparent"> <p><img alt="graphic expression stack" height="527" src="/sites/g/files/tkssra266/f/wysiwyg/UCSF_GraphExp_Variations_Stack_770x526.jpg" style="float:right" title="" width="771" /></p> <h3>聽</h3> <h3>聽</h3> <h3>Stack</h3> <p><strong>Combined Expertise: </strong>Stacking graphic forms can visually create hierarchy for conveying multiple ideas or offerings. Using color in this stacked approach can also visually represent momentum or an integrated step-by-step process.</p> </div> </div> <h2>Examples</h2> <p><img alt="graphic expression example" height="625" src="/sites/g/files/tkssra266/f/wysiwyg/graphic-system.jpg" width="833" /></p> <div class="wysiwyg_threecols layout--33-33-33"> <div class="wysiwyg_threecols--first bg--undefined bg--transparent"> <p><img alt="graphic expression example green" height="770" src="/sites/g/files/tkssra266/f/wysiwyg/UCSF_GraphExp_Expression-Examples_01_770x770.jpg" style="float:left" width="770" /></p> </div> <div class="wysiwyg_threecols--second bg--undefined bg--transparent"> <p style="text-align:center"><img alt="graphic expression example blue" height="770" src="/sites/g/files/tkssra266/f/wysiwyg/UCSF_GraphExp_Expression-Examples_02_770x770.jpg" width="770" /></p> <p>聽</p> </div> <div class="wysiwyg_threecols--third bg--undefined bg--transparent"> <p><img alt="graphic expression example magenta" height="770" src="/sites/g/files/tkssra266/f/wysiwyg/UCSF_GraphExp_Expression-Examples_03_770x770.jpg" style="float:right" width="770" /></p> </div> </div> <h2>Download Visual Framework Templates</h2> <p>Templates are available in both horizontal and vertical graphic forms, from simple two-graphic configurations to muti-graphic configurations. Open these templates in your design programs (Adobe InDesign or Illustrator) to serve as a starting point for creating UCSF materials.</p> <p>聽</p> <h5>HORIZONTAL TEMPLATES</h5> <hr /> <p><a href="https://ucsf.app.box.com/s/kcel7ojqnn7gtcqgs1fdem7upcptvf69/file/238951617167" target="_blank"><img alt="" height="971" src="/sites/g/files/tkssra266/f/wysiwyg/vs13_graphexp_126_a.png" width="1604" /></a></p> <p><a class="btn--small btn--white--underline" href="https://ucsf.app.box.com/s/kcel7ojqnn7gtcqgs1fdem7upcptvf69/file/238951617167" target="_blank">Download here</a></p> <p>聽</p> <h5>VERTICAL TEMPLATES</h5> <hr /> <p><a href="https://ucsf.app.box.com/s/kcel7ojqnn7gtcqgs1fdem7upcptvf69/file/238951617423" target="_blank"><img alt="" height="1158" src="/sites/g/files/tkssra266/f/wysiwyg/vs13_graphexp_129_a.png" width="1604" /></a></p> <p><a class="btn--small btn--white--underline" href="https://ucsf.box.com/s/kcel7ojqnn7gtcqgs1fdem7upcptvf69" target="_blank">Download here</a></p> <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><strong><a href="/brand-guide/visual-framework">Visual Framework聽禄</a></strong></p> <p><a href="/brand-guide/patterns">Patterns聽禄</a></p> <p><a href="/brand-guide/iconography">Iconography 禄</a></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 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>