alert callout We are in the process of releasing new package(s) for the Design System CSS and web components. Please reach out to the Design System team if you are building a new Library user interface or making updates to an existing interface.
Build User Interfaces
The Design System is flexible so you can use as much or as little as you need to for the interface you’re creating. It is compatible with any framework or no framework at all.
There are four levels of adoption:
- Design tokens only: copy/paste CSS custom properties for the DS tokens for color, typography, and spacing
- Compiled CSS: design tokens plus opinionated base styles
- Reusable designs: copy/paste HTML and CSS components
- CSS + Web Components: full component library via CDN or npm
Design Tokens
View the design tokens on CodePen and copy/paste into your project's CSS file.
Compiled CSS
Includes design tokens and opinionated base styles. Use this if you want consistent foundational styles without the web components.
Reusable Designs (components)
The Reusable Designs are pre-built HTML and CSS components — badges, buttons, tables, navigation patterns, and more. They require the compiled CSS to be loaded in your project.
Browse the library, find what you need, and copy the code directly into your project.
Web Components
Includes the compiled CSS plus the web components. There are a few ways to get started.
Install with CDN via jsDelivr
<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>
npm
npm i @umich-lib/web
Download
View complied web components umich-lib.esm.js