Home | 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> Home | 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="Home"/> <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="Home"> <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"/></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"/></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"/></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"/></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="flex-layout"> <div class="main-content"> <div class="banner"> <div class="viewport-container banner-container"> <div class="banner-text"> <h1>U-M Library Design System</h1> <p>The central place for <strong>brand</strong>, <strong>visual elements</strong>, <strong>reusable designs</strong>, and <strong>content guidelines</strong>, all with detailed documentation.</p> </div> <div class="banner-image"></div> </div> </div> <div class="card-container"> <svg class="ovals" role="presentation" aria-hidden="true" focusable="false" width="180" height="49" fill="none" xmlns="http://www.w3.org/2000/svg"><circle r="3" transform="scale(1 -1) rotate(-72 69.211 -101.325)" fill="#FFB899"/><circle r="3" transform="scale(-1 1) rotate(36 -68.543 -189.014)" fill="#FFB899"/><circle r="3" transform="scale(-1 1) rotate(-36 -45.646 162.427)" fill="#FFB899"/><circle r="3" transform="scale(1 -1) rotate(72 44.98 55.844)" fill="#FFB899"/><circle r="3" transform="matrix(1 0 0 -1 64.19 4.19)" fill="#FFB899"/><circle r="3" transform="scale(1 -1) rotate(-72 19.211 -32.507)" fill="#FFB899"/><circle r="3" transform="scale(-1 1) rotate(36 -18.544 -35.13)" fill="#FFB899"/><circle r="3" transform="scale(-1 1) rotate(-36 4.353 8.544)" fill="#FFB899"/><circle r="3" transform="scale(1 -1) rotate(72 88.743 87.136)" fill="#FFB899"/><circle r="3" transform="matrix(1 0 0 -1 124.19 24.19)" fill="#FFB899"/><circle r="3" transform="scale(1 -1) rotate(-72 35.447 -83.798)" fill="#FFB899"/><circle r="3" transform="scale(-1 1) rotate(36 -79.32 -117.46)" fill="#FFB899"/><circle r="3" transform="scale(-1 1) rotate(-36 5.13 110.874)" fill="#FFB899"/><circle r="3" transform="scale(1 -1) rotate(72 38.743 18.316)" fill="#FFB899"/><circle r="3" transform="matrix(1 0 0 -1 24.19 24.19)" fill="#FFB899"/><circle r="3" transform="scale(1 -1) rotate(-72 -14.552 -14.979)" fill="#FFB899"/><circle r="3" transform="scale(-1 1) rotate(36 -140.097 -199.79)" fill="#FFB899"/><circle r="3" transform="scale(1 -1) rotate(-72 51.401 -135.294)" fill="#FFB899"/><circle r="3" transform="scale(1 -1) rotate(72 99.025 100.694)" fill="#FFB899"/><circle r="3" transform="scale(-1 1) rotate(36 -89.175 -250.362)" fill="#FFB899"/><circle r="3" transform="scale(-1 1) rotate(-36 5.907 213.204)" fill="#FFB899"/><circle r="3" transform="scale(1 -1) rotate(72 82.507 49.608)" fill="#FFB899"/><circle r="3" transform="matrix(1 0 0 -1 84.19 44.19)" fill="#FFB899"/><circle r="3" transform="scale(1 -1) rotate(-72 1.684 -66.27)" fill="#FFB899"/><circle r="3" transform="scale(-1 1) rotate(36 -90.097 -45.907)" fill="#FFB899"/><circle r="3" transform="scale(-1 1) rotate(-36 55.907 59.32)" fill="#FFB899"/><circle r="3" transform="scale(1 -1) rotate(72 32.507 -19.211)" fill="#FFB899"/></svg> <div class="viewport-container"> <div class="cards"> <a href="/getting-started/"> <section class="card"> <h2>Getting Started</h2> <p>Write for the library, follow our established styles, and design or build an interface. </p> </section> </a> <a href="/foundations/"> <section class="card"> <h2>Foundations</h2> <p>We are committed to accessibility and inclusive design, shared guiding principles, and the library鈥檚 brand. </p> </section> </a> <a href="/visual-elements/"> <section class="card"> <h2>Visual Elements</h2> <p>Look and feel essentials: color, typography, the logo, image guidance, icons, and more. </p> </section> </a> <a href="/content/"> <section class="card"> <h2>Content</h2> <p>Our voice, tone, and identity, plus grammar, a word list, and how to write for and about people. </p> </section> </a> <a href="/reusable-designs/"> <section class="card"> <h2>Reusable Designs</h2> <p>Components for designers and developers building user interfaces. </p> </section> </a> <a href="/about/"> <section class="card"> <h2>About</h2> <p>Our team, what's new, and information about some of the technical bits. </p> </section> </a> </div> </div> </div> </div> </div> </main> <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 class="border" fill="none" stroke="#65A8BF" d="M26.3,28.3h250v250h-250V28.3z"/> </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> </body> </html>

CINXE.COM

Home | U-M Library Design System