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.
How It Works
Elements
The atoms of our system. These are items in their simplest form, including typography, color, lines and grids. In WordPress, they are located under “blocks”.
Components
Small units composed of elements. These are items that come together in common ways, including lists, quotes, images and buttons. In WordPress, they are located under “blocks”.
Component Groups
Made of elements and components. These are more complex units that are grouped together in common patterns, including calls to action, grids and galleries. In WordPress, they are located under “blocks” or “patterns”.
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 & innovative
Applying an application of cutting-edge technology with a human and societal focus.
- Thoughtful tech innovation
- Bold colors and 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