Philosophy

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

Our design system reflects our primary brand in being:

• Authentic

• Smart

• Inclusive

• Bold

• Contrasting

• Compassionate

• Engaging

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 and includes specifications for:

• Colors

• Logos

• Photography & Videography

• Templates

• Typography

• Voice & Tone

AUTHENTIC & CONTRASTING

Reflecting the unique experiences and opportunities for our students, faculty and staff. The visual style is a reflection of both worlds – the technologies we create balanced with the human, societal focus. We achieve this balance through: 

• Vivid or bold colors

• Thoughtful use of engaging photography

• A contrast of bold and understated elements.

INCLUSIVE & INTERSECTIONAL

Our approach is intersectional and human-centric. We recognize the multiple users and communities we serve and design to meet them where they are. We work to create digital environments that allow as many people as possible access to the information we have to share. When used according to our guidelines, this design system: 

• Meets WCAG 2.0 AA standards

• Ensures they are perceivable, operable and understandable 

• Robust for site visitors with motor, sensory and cognitive disabilities

SMART & CONSIDERATE

Users come to our properties to be engaged and informed. We must have an empathy and understanding of our audiences and their needs, and prevent obstacles to their solutions. This is achieved through: 

• Considerate typography

• Generous consideration of open space

• Clear user pathways and intuitive experiences

UNITED & DIVERSIFIED

The core components of our design system work together to ensure our brand is recognizable wherever it appears, and our users are never confused about where they are. This unity allows for our various departments, labs, programs and units to represent their unique and diverse communities. This balance is achieved through:

• Consistent use of logos, color palettes, and typography

• A diversity of content, imagery and experiences

How it Works

These elements work together to create our Michigan Engineering Design System.

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 "reusable blocks" or "patterns".