Design tokens

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

Color

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.

When using colors, be sure to use them in accessible combinations. Use the WebAIM Contrast Checker and reference WCAG 2.1 Understanding Success Criterion 1.4.3: Contrast (Minimum) to make accessible decisions.

blue

  1. var(--color-blue-100) #F7F8F9
  2. var(--color-blue-200) #B2BEC9
  3. var(--color-blue-300) #4C6781
  4. var(--color-blue-400) #00274C
  5. var(--color-blue-500) #001324

maize

  1. var(--color-maize-100) #FFF9E6
  2. var(--color-maize-200) #FFEA9B
  3. var(--color-maize-300) #FFDA50
  4. var(--color-maize-400) #FFCB05
  5. var(--color-maize-500) #EABA02

neutral

  1. var(--color-neutral-100) #E5E9ED
  2. var(--color-neutral-200) #8A96A1
  3. var(--color-neutral-300) #637381
  4. var(--color-neutral-400) #212B36
  5. var(--color-neutral-500) #06080A

teal

  1. var(--color-teal-100) #E9F2F5
  2. var(--color-teal-200) #A7CDDB
  3. var(--color-teal-300) #65A8BF
  4. var(--color-teal-400) #1D7491
  5. var(--color-teal-500) #106684

orange

  1. var(--color-orange-100) #FFF1EB
  2. var(--color-orange-200) #FFB899
  3. var(--color-orange-300) #FF8A58
  4. var(--color-orange-400) #F25F1F
  5. var(--color-orange-500) #C74E1A

pink

  1. var(--color-pink-100) #FCEBEB
  2. var(--color-pink-200) #F29D9D
  3. var(--color-pink-300) #EC6969
  4. var(--color-pink-400) #D93838
  5. var(--color-pink-500) #BF3232

indigo

  1. var(--color-indigo-100) #EEF1F9
  2. var(--color-indigo-200) #AAB9E3
  3. var(--color-indigo-300) #7C93D4
  4. var(--color-indigo-400) #506FC5
  5. var(--color-indigo-500) #274391

green

  1. var(--color-green-100) #EAF8EE
  2. var(--color-green-200) #96DBAA
  3. var(--color-green-300) #57BC75
  4. var(--color-green-400) #20A848
  5. var(--color-green-500) #198539

Space

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.

Preview CSS custom property Value
var(--space-xxx-small) 2px
var(--space-xx-small) 4px
var(--space-x-small) 8px
var(--space-small) 12px
var(--space-medium) 16px
var(--space-large) 24px
var(--space-x-large) 32px
var(--space-xx-large) 40px
var(--space-xxx-large) 48px
var(--space-xxxx-large) 64px
var(--space-xxxxx-large) 96px
If you found a mistake on this page, would you kindly submit a fix on GitHub?

Get started

You can start using the Web Components and design tokens immediately by adding this stylesheet and these script tags to the <head>:

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

Use this design system across any framework or no framework at all. We accomplish this by using standardized web platform APIs. We love HTML, CSS, and JavaScript.