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.

The primary uses when building an interface are:

Applying colors, fonts, spacing, and other visual elements
Adding ready-to-use reusable designs to your interfaces

Options for use

Choose the most appropriate option for what you’re working on to use our visual elements and reusable designs.

Options include:

Using available specifications (such as hex colors or spacing) in your code without design tokens
Copying and pasting the HTML and CSS available for all of our reusable designs
Using web components and design tokens when they’re available

In addition, we encourage everyone to follow the guidelines provided for visual elements and reusable designs to inform your own implementation.

Use web components and design tokens

In order to use web components and design tokens, you’ll need to link to our stylesheet and two script tags to the <head>.

<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>

Our overview of web components and design tokens will help you get up to speed if these concepts are new to you.