Follow U-M Library Style and Branding | U-M Library Design System

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content="The U-M Library Design System is the central place for brand, visual elements, reusable designs and content guidelines."> <title> Follow U-M Library Style and Branding | U-M Library Design System </title>  <script> (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-KMFGVLX'); </script>   <meta property="og:title" content="Follow U-M Library Style and Branding"> <meta property="og:type" content="website"> <meta property="og:description" content="The U-M Library Design System is the central place for brand, visual elements, reusable designs and content guidelines."> <meta property="og:image" content="/img/social-card.png"> <meta property="og:url" content="https://design-system.lib.umich.edu/"> <meta property="og:locale" content="en_US">  <meta name="twitter:card" content="summary_large_image"> <meta property="twitter:url" content="https://design-system.lib.umich.edu/"> <meta property="twitter:title" content="Follow U-M Library Style and Branding"> <meta property="twitter:description" content="The U-M Library Design System is the central place for brand, visual elements, reusable designs and content guidelines."> <meta property="twitter:image" content="/img/social-card.png"> <meta property="twitter:image:alt" content=""> <link rel="icon" href="/img/favicon.ico">  <link rel="apple-touch-icon" href="/img/icons/apple-touch-icon.png">  <link rel="apple-touch-icon" sizes="180x180" href="/img/icons/apple-touch-icon-180x180.png">  <link rel="apple-touch-icon" sizes="167x167" href="/img/icons/apple-touch-icon-167x167.png">  <link rel="apple-touch-icon" sizes="152x152" href="/img/icons/apple-touch-icon-152x152.png"> <link href="/pagefind/pagefind-ui.css" rel="stylesheet"> <link rel="stylesheet" href="/css/style.css"> <link href="https://cdn.jsdelivr.net/npm/@umich-lib/web@1.3.0/umich-lib.css" rel="stylesheet"> <script type="module" src="https://cdn.jsdelivr.net/npm/@umich-lib/web@1.3.0/dist/umich-lib/umich-lib.esm.js"></script> <script nomodule="" src="https://cdn.jsdelivr.net/npm/@umich-lib/components@1.1.0/dist/umich-lib/umich-lib.js"></script> <script src="/js/menu.js" defer=""></script> <script src="/js/main.js" defer=""></script> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200"> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> </head> <body>  <noscript> <iframe src="https://www.googletagmanager.com/ns.html?id=GTM-KMFGVLX" height="0" width="0" style="display:none;visibility:hidden"></iframe> </noscript>  <section aria-label="Skip links" class="skip-links"> <div class="viewport-container"> <ul> <li><a href="#main">Skip to main content</a></li> <li><a href="#footer">Skip to footer content</a></li> </ul> </div> </section> <div class="headers"> <m-universal-header></m-universal-header> <div class="website-header-mobile"> <m-website-header name=" Design System"><nav aria-label="Utility" class="utility-nav flex flex-wrap align-items-center"> <ul> <li><a href="https://design-system.lib.umich.edu/visual-elements/color/"> <span class="utility-icon"> <svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 -960 960 960" width="20px" fill="#637381" role="img" aria-hidden="true" focusable="false"><path d="M480-96q-79 0-149-30t-122.5-82.5Q156-261 126-331T96-480q0-80 30.5-149.5t84-122Q264-804 335.5-834T488-864q78 0 146.5 27T754-763q51 47 80.5 110T864-518q0 96-67 163t-163 67h-68q-8 0-14 5t-6 13q0 15 15 25t15 53q0 37-27 66.5T480-96Zm0-384Zm-216 36q25 0 42.5-17.5T324-504q0-25-17.5-42.5T264-564q-25 0-42.5 17.5T204-504q0 25 17.5 42.5T264-444Zm120-144q25 0 42.5-17.5T444-648q0-25-17.5-42.5T384-708q-25 0-42.5 17.5T324-648q0 25 17.5 42.5T384-588Zm192 0q25 0 42.5-17.5T636-648q0-25-17.5-42.5T576-708q-25 0-42.5 17.5T516-648q0 25 17.5 42.5T576-588Zm120 144q25 0 42.5-17.5T756-504q0-25-17.5-42.5T696-564q-25 0-42.5 17.5T636-504q0 25 17.5 42.5T696-444ZM480-168q11 0 17.5-8.5T504-192q0-16-15-28t-15-50q0-38 26.5-64t64.5-26h69q66 0 112-46t46-112q0-115-88.5-194.5T488-792q-134 0-227 91t-93 221q0 130 91 221t221 91Z"></path></svg> </span> <span>Colors</span> </a> </li> <li><a href="https://drive.google.com/drive/folders/1uIDCY-OIyd2cET3PkpZVOco32wGKsM91"> <span class="utility-icon"> <svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 -960 960 960" width="20px" fill="#637381" aria-hidden="true" focusable="false" role="img"><path d="M168-192q-29 0-50.5-21.5T96-264v-432q0-29.7 21.5-50.85Q139-768 168-768h216l96 96h312q29.7 0 50.85 21.15Q864-629.7 864-600v336q0 29-21.15 50.5T792-192H168Zm0-72h624v-336H450l-96-96H168v432Zm0 0v-432 432Z"></path></svg></span> <span>Google Templates</span> </a> </li> <li> <a href="https://www.figma.com/@mlibrary"> <span class="utility-icon"> <svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 -960 960 960" width="20px" fill="#637381" aria-hidden="true" focusable="false" role="img"><path d="m96-528 192-336 192 336H96Zm192 384q-60 0-102-42.24t-42-101.55Q144-348 186-390q42-42 102-42t102 42q42 42 42 102t-42 102q-42 42-102 42Zm.21-72Q318-216 339-237.21t21-51Q360-318 338.79-339t-51-21Q258-360 237-338.79t-21 51Q216-258 237.21-237t51 21ZM221-600h134l-67-119-67 119Zm307 456v-288h288v288H528Zm72-72h144v-144H600v144Zm72-312q-54-45-89.06-74.59-35.05-29.58-56-52Q506-677 497.5-696q-8.5-19-8.5-42.67 0-42.62 28-71.97Q545-840 589.46-840q25.54 0 46.04 10.5T672-797q16-22 37-32.5t46.18-10.5Q799-840 827-810.64q28 29.35 28 71.97 0 23.67-8 42.67t-29.13 41.2q-21.13 22.2-56.5 51.5Q726-574 672-528Zm0-96q68-57 89.5-78.5T783-740q0-11-8-19.5t-18.74-8.5q-8.26 0-15.26 4t-12 10l-57 53-56-53q-6-6-13.21-10-7.2-4-14.79-4-11 0-19 8.5t-8 19.5q0 17 22.5 39t88.5 77Zm0-77Zm-383 48Zm0 362Zm382 0Z"></path></svg> </span> <span>Figma Toolkit</span> </a> </li> <li> <a href="https://codepen.io/team/umlibrary-designsystem"> <span class="utility-icon"> <svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 -960 960 960" width="20px" fill="#637381" aria-hidden="true" focusable="false" role="img"><path d="M336-240 96-480l240-240 51 51-189 189 189 189-51 51Zm288 0-51-51 189-189-189-189 51-51 240 240-240 240Z"></path></svg> </span> <span>CodePen</span> </a> </li> </ul> </nav></m-website-header> <nav aria-label="Primary and utility" class="mobile-nav"> <span class="navBtn"> </span> <div class="submenu-container"> <div class="primary-container"> <ul> <li> <a href="/getting-started/"> Getting Started </a> </li> <li> <a href="/foundations/"> Foundations </a> </li> <li> <a href="/visual-elements/"> Visual Elements </a> </li> <li> <a href="/content/"> Content </a> </li> <li> <a href="/reusable-designs/"> Reusable Designs </a> </li> <li> <a href="/about/"> About </a> </li> </ul> </div> <div class="utility-container"> <ul> <li><a href="https://design-system.lib.umich.edu/visual-elements/color/"> <span aria-hidden="true" class="material-symbols-outlined">palette</span> <span>Colors</span> </a> </li> <li><a href="https://drive.google.com/drive/folders/1uIDCY-OIyd2cET3PkpZVOco32wGKsM91"> <span aria-hidden="true" class="material-symbols-outlined">folder</span> <span class="google-link">Google Templates</span> </a> </li> <li> <a href="https://www.figma.com/@mlibrary"> <span aria-hidden="true" class="material-symbols-outlined">interests</span> <span class="figma-link">Figma Toolkit</span> </a> </li> <li> <a href="https://codepen.io/team/umlibrary-designsystem"> <span aria-hidden="true" class="material-symbols-outlined">code</span> <span class="code-link">CodePen</span> </a> </li> </ul> </div> </div> </nav> </div> <nav aria-label="Primary" class="primary-nav viewport-container flex flex-wrap align-items-center"> <ul> <li> <a href="/getting-started/"> Getting Started </a> </li> <li> <a href="/foundations/"> Foundations </a> </li> <li> <a href="/visual-elements/"> Visual Elements </a> </li> <li> <a href="/content/"> Content </a> </li> <li> <a href="/reusable-designs/"> Reusable Designs </a> </li> <li> <a href="/about/"> About </a> </li> </ul> <div id="search" class="search" style=""></div> </nav> </div> <main class="layout" id="main"> <div class="viewport-container"> <nav aria-label="breadcrumbs" class="breadcrumbs"> <ol> <li> <a href="/">home</a> </li> <li> <a href="/getting-started/">Getting Started</a> </li> <li> <a class="active-page" aria-current="page" href="/getting-started/follow-u-m-library-style-and-branding/">Follow U-M Library Style and Branding</a> </li> </ol> </nav> <div class="flex-layout container"> <aside class="page-aside"> <nav aria-label="Site navigation" class="side-nav"> <ul> <li> <a href="/getting-started/write-for-the-library/">Write for the Library</a> </li> <li class="active-side-nav-page"> <a href="/getting-started/follow-u-m-library-style-and-branding/">Follow U-M Library Style and Branding</a> </li> <li> <a href="/getting-started/design-user-interfaces/">Design User Interfaces</a> </li> <li> <a href="/getting-started/build-user-interfaces/">Build User Interfaces</a> </li> </ul> </nav> </aside> <div class="main-content" data-pagefind-body=""> <div class="prose"> <h1>Follow U-M Library Style and Branding</h1> <p>Creating a flyer, video tutorial, slides, or something else where you need to make font, color, or other design choices? </p> <p>Use our <a href="/visual-elements/">visual elements</a> to pick from a set of established, accessible options, as well as guidance for using images. </p> <p><strong>Need the logo?</strong> <a href="/visual-elements/logo/">Here you go</a>!</p> <p>And don鈥檛 forget we have <a href="https://drive.google.com/drive/folders/1uIDCY-OIyd2cET3PkpZVOco32wGKsM91?usp=sharing">document and slide templates (opens in Google Drive)</a>.</p> </div> <nav class="page-pagination" aria-label="pagination"> <div class="pagination-text previous-page"> <a href="/getting-started/write-for-the-library/">Write for the Library<span class="visually-hidden">previous page</span></a> </div> <div class="pagination-text next-page"> <a href="/getting-started/design-user-interfaces/">Design User Interfaces<span class="visually-hidden">next page</span></a> </div> </nav> </div> </div> <div class="back-to-top"> <a href="#main" class="back-to-top-link hidden">Back to top</a> </div> </div> <article class="feedback-banner"> <div class="viewport-container feedback-banner-container"> <span class="feedback-icon material-icons" aria-hidden="true">thumb_up_alt</span> <p>Was this page helpful? Please <a href="https://umich.qualtrics.com/jfe/form/SV_3kkZEoQLnfnBp8W">submit feedback<span class="visually-hidden">opens in new window</span></a> so we can improve.</p> </div> </article> <footer class="footer" id="footer"> <div class="box-accent"> <svg role="presentation" aria-hidden="true" focusable="false" id="blue-box-svg" viewBox="0 0 280 282"> <style type="text/css"> .border { stroke-width: 8; stroke-linecap: round; stroke-linejoin: round; stroke-miterlimit: 1.5; } </style> <path class="rectangle" fill="#A7CDDB" stroke="none" d="M0,0h250v250H0V0z"></path> <path class="border" fill="none" stroke="#65A8BF" d="M26.3,28.3h250v250h-250V28.3z"></path> </svg> </div> <div class="viewport-container"> <div class="footer__content"> <section class="first-column"> <h2>University of Michigan Library</h2> <ul> <li><a href="https://lib.umich.edu/"><span class="address">913 S. University Avenue Ann Arbor, MI 48109-1190</span></a></li> </ul> </section> <section> <h2>The Design System</h2> <ul> <li><a href="/foundations/accessibility-and-inclusive-design/">Accessibility</a></li> <li><a href="/about/roadmap">Roadmap</a></li> <li><a href="/getting-started/follow-u-m-library-style-and-branding/">U-M Library Style and Branding</a></li> </ul> </section> <section> <h2>Getting Started</h2> <ul> <li><a href="/getting-started/write-for-the-library">Write for the Library</a></li> <li><a href="/getting-started/design-user-interfaces/">Design User Interfaces</a></li> <li><a href="/getting-started/build-user-interfaces/">Build User Interfaces</a></li> </ul> </section> </div> </div> <div class="footer__disclaimer"> <div class="viewport-container"> <p>漏 2024, Regents of the University of Michigan</p> <p> <a href="/about/get-in-touch/">Contact Our Team</a> </p> <p> <a href="/about/whats-new">What's New</a> </p> </div> </div> </footer> <script src="/pagefind/pagefind-ui.js" onload="new PagefindUI({ element: '#search', showImages: false, resetStyles: false });"></script> </main></body></html>

CINXE.COM

Follow U-M Library Style and Branding | U-M Library Design System