The Michigan Engineering Design System

What is a design system?

A design system is a collection of reusable components, guided by clear standards, that can be assembled together to build any number of applications.

Why do we have a design system?

The Michigan Engineering community has many digital and web properties that represent the diversity of our activities. 

The Michigan Engineering Design System aims to provide consistency to our digital design language, helping us work together to build a great experience for all of users.

Foundations & principles

Our community has many digital and web properties – for our departments, labs, programs and units – that represent the diversity of our activities. Within each of these, there is uniqueness, yet we are strongest in our united voice. We are all unique, yet unified.

To keep our digital landscape from feeling disjointed, we have introduced a framework of core components, so that the elements existing inside of it can be expressive without creating confusion.

This system references the overall Michigan Engineering visual brand.

Our design system reflects our primary brand in being:

  • Authentic
  • Smart
  • Inclusive
  • Bold
  • Contrasting
  • Compassionate
  • Engaging

Within each of these, there is personal expression, yet we are strongest in our united voice. 

We are all unique, yet unified.

Design system values

Authentic & contrasting

Reflection of both worlds: technologies with the human and societal focus. 

  • Vivid or bold colors
  • Engaging photography 
  • Contrast of bold/understated elements
Inclusive & intersectional

Recognize the users we serve and design to meet them where they are. 

  • Accessibility is forefront
  • WCAG 2.0 AA compliance
Smart & considerate

Empathy and understanding of audience needs, preventing obstacles to solutions. 

  • Considerate typography
  • Generous consideration of open space 
  • Clear user pathways
United & diversified

Core components work together to ensure our brand is recognizable. 

  • Color palette and typography unified
  • Content, imagery and experiences diversified