Build User Interfaces | 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> Build User Interfaces | 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="Build User Interfaces"> <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="Build User Interfaces"> <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/build-user-interfaces/">Build User Interfaces</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> <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 class="active-side-nav-page"> <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>Build User Interfaces</h1> <p>The Design System is flexible so you can use as much or as little as you need to for the interface you鈥檙e creating. It is compatible with any framework or no framework at all. </p><p>The primary uses when building an interface are:</p><ul><li>Applying colors, fonts, spacing, and other <a href="/visual-elements/">visual elements</a></li><li>Adding ready-to-use <a href="/reusable-designs/">reusable designs</a> to your interfaces</li></ul><h2 id="options-for-use">Options for use</h2><p>Choose the most appropriate option for what you鈥檙e working on to use our visual elements and reusable designs.</p><p>Options include:</p><ul><li>Using available specifications (such as hex colors or spacing) in your code without design tokens</li><li>Copying and pasting the HTML and CSS available for all of our <a href="/reusable-designs/">reusable designs</a></li><li>Using <a href="/about/web-components-and-design-tokens/">web components and design tokens</a> when they鈥檙e available</li></ul><p>In addition, we encourage everyone to follow the guidelines provided for visual elements and reusable designs to inform your own implementation.</p><h3 id="use-web-components-and-design-tokens">Use web components and design tokens</h3><p>In order to use web components and design tokens, you鈥檒l need to link to our stylesheet and two script tags to the <code><head></code>.</p><pre class="code"><code class="language-html" tabindex="0" role="figure" aria-label="Code to be copied"><link href="https://cdn.jsdelivr.net/npm/@umich-lib/web@latest/umich-lib.css" rel="stylesheet"/> <script type="module" src="https://cdn.jsdelivr.net/npm/@umich-lib/web@latest/dist/umich-lib/umich-lib.esm.js"></script> </code></pre><p>Our overview of <a href="/about/web-components-and-design-tokens/">web components and design tokens</a> will help you get up to speed if these concepts are new to you.</p> </div> <nav class="page-pagination" aria-label="pagination"> <div class="pagination-text previous-page"> <a href="/getting-started/design-user-interfaces/">Design User Interfaces<span class="visually-hidden">previous 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

Build User Interfaces | U-M Library Design System