Design tokens are a tech-agnostic way to store low-level values and then use them to create the styles for your website. Use tokens instead of hard coded values to ensure a scalable, consistent, and sustainable system.
Design tokens are available to use in your stylesheets by
custom properties (MDN web docs)
For consistency, only use the colors below throughout your website. Keep in mind that orange, pink, indigo, and green are only used in special cases, such as a warning state.
Use the spacing tokens to create a visual balance that makes your website easier to scan. These space tokens should be used for all padding, margin and position coordinates.
If you found a mistake on this page, would you kindly submit a fix?
You can start using the
immediately by adding this stylesheet and these script tags to the
< link href = " https://unpkg.com/@umich-lib/css@v1/dist/umich-lib.css " rel = " stylesheet " /> < script type = " module " src = " https://unpkg.com/@umich-lib/components@v1/dist/umich-lib/umich-lib.esm.js " > </ script > < script nomodule src = " https://unpkg.com/@umich-lib/components@v1/dist/umich-lib/umich-lib.js " > </ script > Copy HTML
Use this design system across any framework or no framework at all. We accomplish this by using
standardized web platform APIs
UNIVERSITY OF MICHIGAN LIBRARY
913 S. University Avenue
Ann Arbor, MI 48109