Color | 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> Color | 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="Color"> <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="Color"> <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="/visual-elements/">Visual Elements</a> </li> <li> <a class="active-page" aria-current="page" href="/visual-elements/color/">Color</a> </li> </ol> </nav> <div class="flex-layout container"> <aside class="page-aside"> <nav aria-label="Site navigation" class="side-nav"> <ul> <li class="active-side-nav-page"> <a href="/visual-elements/color/">Color</a> </li> <li> <a href="/visual-elements/icons/">Icons</a> </li> <li> <a href="/visual-elements/images/">Images</a> </li> <li> <a href="/visual-elements/logo/">Logo</a> </li> <li> <a href="/visual-elements/typography/">Typography</a> </li> </ul> </nav> </aside> <div class="main-content" data-pagefind-body=""> <div class="prose"> <h1>Color</h1> <p>Blue and maize are our primary colors, and teal is frequently used for link text and other interactions.</p><p>We also provide a neutral gray and a set of secondary colors: orange, pink, indigo, and green. Keep in mind that for websites, secondary colors should only be used in special cases, such as in a warning state or as an accent color.</p><p>Across all colors, 400-level is the primary shade.</p><p>See our <a href="/visual-elements/color/#full-color-table">full color table</a> and <a href="/about/get-in-touch/">contact the Design System team</a> with questions about appropriate color choices.</p><h2 id="text-color">Text color</h2><p><strong>Headers</strong> and <strong>body text</strong> are neutral-400.</p><p><strong>Links</strong> are teal-400 and underlined.</p><p>Use white text when the text is on a dark background. For example, teal-400 and pink-400 buttons must use white text. View our <a href="https://www.figma.com/@mlibrary">Figma Guidelines</a> for more examples.</p><p>Learn more about how to use these colors as design tokens when <a href="/getting-started/build-user-interfaces/">building a user interface</a>.</p><h2 id="accessibility">Accessibility</h2><p>Be sure to use the colors in accessible combinations that meet WCAG 2.1 AA accessibility standards:</p><ul><li>Small and regular text must have a contrast ratio of 4.5:1.</li><li>Large text, as well as graphics and interface controls, must have a contrast ratio of 3:1.</li></ul><p>You can use the <a href="https://webaim.org/resources/contrastchecker/">WebAIM Contrast Checker</a> and reference <a href="https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html">WCAG 2.1 Understanding Success Criterion 1.4.3: Contrast (Minimum) </a>to make decisions and ensure the color combinations meet accessibility standards. If you are designing in Figma, you can use the <a href="https://www.figma.com/community/plugin/937465522075454889/Color-contrast">Color contrast plugin</a> to check your work.</p><p>In some situations — like with slide deck templates — it can be helpful to provide a variety of contrasting color options for background and text. This supports accessibility (especially considering eye strain and vision impairments), as well as use in a variety of contexts.</p><h2 id="full-color-table">Full color table</h2><p>Use <a href="/about/web-components-and-design-tokens/#design-tokens">design tokens</a> or hex color codes.</p><section class="color-palettes"> <div class="color-palette"> <h3 class="visually-hidden" id="blue">blue</h3> <ol> <li id="color-blue-100" style="background: var(--color-blue-100);"> <code>var(--color-blue-100)</code> <code>#F7F8F9</code> </li> <li id="color-blue-200" style="background: var(--color-blue-200);"> <code>var(--color-blue-200)</code> <code>#B2BEC9</code> </li> <li id="color-blue-300" style="background: var(--color-blue-300);"> <code>var(--color-blue-300)</code> <code>#4C6781</code> </li> <li id="color-blue-400" style="background: var(--color-blue-400);"> <code>var(--color-blue-400)</code> <code>#00274C</code> </li> <li id="color-blue-500" style="background: var(--color-blue-500);"> <code>var(--color-blue-500)</code> <code>#001324</code> </li> </ol> </div> <div class="color-palette"> <h3 class="visually-hidden" id="maize">maize</h3> <ol> <li id="color-maize-100" style="background: var(--color-maize-100);"> <code>var(--color-maize-100)</code> <code>#FFF9E6</code> </li> <li id="color-maize-200" style="background: var(--color-maize-200);"> <code>var(--color-maize-200)</code> <code>#FFEA9B</code> </li> <li id="color-maize-300" style="background: var(--color-maize-300);"> <code>var(--color-maize-300)</code> <code>#FFDA50</code> </li> <li id="color-maize-400" style="background: var(--color-maize-400);"> <code>var(--color-maize-400)</code> <code>#FFCB05</code> </li> <li id="color-maize-500" style="background: var(--color-maize-500);"> <code>var(--color-maize-500)</code> <code>#EABA02</code> </li> </ol> </div> <div class="color-palette"> <h3 class="visually-hidden" id="neutral">neutral</h3> <ol> <li id="color-neutral-100" style="background: var(--color-neutral-100);"> <code>var(--color-neutral-100)</code> <code>#E5E9ED</code> </li> <li id="color-neutral-200" style="background: var(--color-neutral-200);"> <code>var(--color-neutral-200)</code> <code>#8A96A1</code> </li> <li id="color-neutral-300" style="background: var(--color-neutral-300);"> <code>var(--color-neutral-300)</code> <code>#637381</code> </li> <li id="color-neutral-400" style="background: var(--color-neutral-400);"> <code>var(--color-neutral-400)</code> <code>#212B36</code> </li> <li id="color-neutral-500" style="background: var(--color-neutral-500);"> <code>var(--color-neutral-500)</code> <code>#06080A</code> </li> </ol> </div> <div class="color-palette"> <h3 class="visually-hidden" id="teal">teal</h3> <ol> <li id="color-teal-100" style="background: var(--color-teal-100);"> <code>var(--color-teal-100)</code> <code>#E9F2F5</code> </li> <li id="color-teal-200" style="background: var(--color-teal-200);"> <code>var(--color-teal-200)</code> <code>#A7CDDB</code> </li> <li id="color-teal-300" style="background: var(--color-teal-300);"> <code>var(--color-teal-300)</code> <code>#65A8BF</code> </li> <li id="color-teal-400" style="background: var(--color-teal-400);"> <code>var(--color-teal-400)</code> <code>#1D7491</code> </li> <li id="color-teal-500" style="background: var(--color-teal-500);"> <code>var(--color-teal-500)</code> <code>#106684</code> </li> </ol> </div> <div class="color-palette"> <h3 class="visually-hidden" id="orange">orange</h3> <ol> <li id="color-orange-100" style="background: var(--color-orange-100);"> <code>var(--color-orange-100)</code> <code>#FFF1EB</code> </li> <li id="color-orange-200" style="background: var(--color-orange-200);"> <code>var(--color-orange-200)</code> <code>#FFB899</code> </li> <li id="color-orange-300" style="background: var(--color-orange-300);"> <code>var(--color-orange-300)</code> <code>#FF8A58</code> </li> <li id="color-orange-400" style="background: var(--color-orange-400);"> <code>var(--color-orange-400)</code> <code>#F25F1F</code> </li> <li id="color-orange-500" style="background: var(--color-orange-500);"> <code>var(--color-orange-500)</code> <code>#C74E1A</code> </li> </ol> </div> <div class="color-palette"> <h3 class="visually-hidden" id="pink">pink</h3> <ol> <li id="color-pink-100" style="background: var(--color-pink-100);"> <code>var(--color-pink-100)</code> <code>#FCEBEB</code> </li> <li id="color-pink-200" style="background: var(--color-pink-200);"> <code>var(--color-pink-200)</code> <code>#F29D9D</code> </li> <li id="color-pink-300" style="background: var(--color-pink-300);"> <code>var(--color-pink-300)</code> <code>#EC6969</code> </li> <li id="color-pink-400" style="background: var(--color-pink-400);"> <code>var(--color-pink-400)</code> <code>#D93838</code> </li> <li id="color-pink-500" style="background: var(--color-pink-500);"> <code>var(--color-pink-500)</code> <code>#BF3232</code> </li> </ol> </div> <div class="color-palette"> <h3 class="visually-hidden" id="indigo">indigo</h3> <ol> <li id="color-indigo-100" style="background: var(--color-indigo-100);"> <code>var(--color-indigo-100)</code> <code>#EEF1F9</code> </li> <li id="color-indigo-200" style="background: var(--color-indigo-200);"> <code>var(--color-indigo-200)</code> <code>#AAB9E3</code> </li> <li id="color-indigo-300" style="background: var(--color-indigo-300);"> <code>var(--color-indigo-300)</code> <code>#7C93D4</code> </li> <li id="color-indigo-400" style="background: var(--color-indigo-400);"> <code>var(--color-indigo-400)</code> <code>#506FC5</code> </li> <li id="color-indigo-500" style="background: var(--color-indigo-500);"> <code>var(--color-indigo-500)</code> <code>#274391</code> </li> </ol> </div> <div class="color-palette"> <h3 class="visually-hidden" id="green">green</h3> <ol> <li id="color-green-100" style="background: var(--color-green-100);"> <code>var(--color-green-100)</code> <code>#EAF8EE</code> </li> <li id="color-green-200" style="background: var(--color-green-200);"> <code>var(--color-green-200)</code> <code>#96DBAA</code> </li> <li id="color-green-300" style="background: var(--color-green-300);"> <code>var(--color-green-300)</code> <code>#57BC75</code> </li> <li id="color-green-400" style="background: var(--color-green-400);"> <code>var(--color-green-400)</code> <code>#20A848</code> </li> <li id="color-green-500" style="background: var(--color-green-500);"> <code>var(--color-green-500)</code> <code>#198539</code> </li> </ol> </div> </section> </div> <nav class="page-pagination" aria-label="pagination"> <div class="pagination-text next-page"> <a href="/visual-elements/icons/">Icons<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

Color | U-M Library Design System