What's New | 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> What's New | 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="What's New"> <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="What's New"> <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="/about/">About</a> </li> <li> <a class="active-page" aria-current="page" href="/about/whats-new/">What's New</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="/about/our-team/">Our Team</a> </li> <li> <a href="/about/web-components-and-design-tokens/">Web Components and Design Tokens</a> </li> <li class="active-side-nav-page"> <a href="/about/whats-new/">What's New</a> </li> <li> <a href="/about/roadmap/">Roadmap</a> </li> <li> <a href="/about/get-in-touch/">Get in Touch</a> </li> </ul> </nav> </aside> <div class="main-content" data-pagefind-body=""> <div class="prose"> <h1>What's New</h1> <p>This is where you'll find a rundown of the latest Design System additions and developments.</p><p>Please contact the <a href="/about/our-team/">Design System team</a> if there are any questions!</p><h2 id="october-2024">October 2024</h2><ul><li>Added <a href="/reusable-designs/badges/">Badges</a> and <a href="/reusable-designs/tags/">Tags </a>as Reusable Designs</li><li>Added a new team member to <a href="/about/our-team/">Our Team</a>! (Welcome, Josh!)</li><li>New script tag for our <a href="/about/web-components-and-design-tokens/">Web Components</a></li></ul><h2 id="may-2024">May 2024</h2><ul><li>Added <a href="/reusable-designs/banner/">Banners</a> as a Reusable Design</li></ul><h2 id="november-2023">November 2023</h2><ul><li>Implemented improvements to the website header and navigation:<ul><li>Site search</li><li>New utility navigation with links for commonly used resources: color table, Google templates, Figma Toolkit and CodePen.</li></ul></li><li>Shared 3 updated Google Slide templates with improved contrast for viewing in different environments</li></ul><h2 id="october-2023">October 2023</h2><ul><li>Added new Reusable Designs for inputs: <a href="/reusable-designs/checkbox/">Checkbox</a>, <a href="/reusable-designs/input-fields/">Input fields</a>, <a href="/reusable-designs/radio-button/">Radio button</a> and <a href="/reusable-designs/input-fields/">Select</a></li></ul><h2 id="march-2023">March 2023</h2><ul><li>Updated <a href="https://docs.google.com/document/d/1MBPKPOfeZCP8FCtiHO8ns1CftqzMEhUIVb-MABbDdBg/edit#heading=h.b3mhyx5rhf2v">Google Site Guidelines</a></li><li>Created a Google Site template using the U-M Library Design System</li></ul><h2 id="february-2023">February 2023</h2><p>After a lot of writing, editing, designing, and building — the new documentation site is live!</p><p>This is the 3rd major redesign of our documentation site since we started the Design System in 2017. Our older sites were built around our design language and components. We collaborated with the library's <a href="https://lib.umich.edu/about-us/our-divisions-and-departments/deans-office/communication-and-marketing">Communication and Marketing department</a>, expanded our scope, and built out a much more robust site rooted in an updated set of <a href="/foundations/">foundations</a>.</p><h3 id="new-features-of-this-site">New features of this site</h3><ul><li>Site sections with landing pages: Getting Started, Foundations, Visual Elements, Content, Reusable Designs, and About</li><li>Look and feel essentials in <a href="/visual-elements/">Visual Elements</a> with connections to our Figma Design Library</li><li>CodePen code samples embedded on <a href="/reusable-designs/">Reusable Designs</a> pages</li><li>Paths guiding different audiences using the Design System through the site in <a href="/getting-started/">Getting Started</a></li><li>Extensive <a href="/content/">Content</a> guidance to support writing for the library across contexts</li></ul> </div> <nav class="page-pagination" aria-label="pagination"> <div class="pagination-text previous-page"> <a href="/about/web-components-and-design-tokens/">Web Components and Design Tokens<span class="visually-hidden">previous page</span></a> </div> <div class="pagination-text next-page"> <a href="/about/roadmap/">Roadmap<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

What's New | U-M Library Design System