Immersed Style Guide

Design Elements

Design Aesthetic

Needs to be U-M CoE Branded some accent hues (optional)

Color

Hex values

• maize: #FFCB05;

• dark-blue: #00274C;

• blue: #002E5E;

• light-blue: #1b4472;

• lite-gray: #EFF0F1;

• gray: #E4E5E6;

• dark-gray: #353535;

Transparency Levels

Contrast Levels

Body text: minimum contrast ratio of 4.5:1 between background and text color

Large text (headings, subheadings, anything 18 point or larger OR 14 point bold and larger): minimum contrast ratio of 3:1

Graphics and user interface components (ie. box around a form field): minimum contrast ratio of 3:1

Hover States

Fonts

Roboto

Heading Rules

• Page titles are styled as heading1

• Headings must not skip levels

• Headings Use Title Case (Capitalize important words)

• The “Microsite Header” block contains H1 and H2 headings, so pages with those blocks must not use any additional H1s and should not use any additional H2s.

Photo Direction

Photojournalistic in nature and practice -- The photos should not be staged or overly marketing-esque photography. Instead, the photography should document authentic moments of students and faculty. We have a large archive of imagery, so try to stay away from Getty Images and other stock photography archives.

Logos

C&M Signature (updated one) the one currently used seems awkward

Icon Sets

Social icons are a combination of Entypo and Font Awesome icons. A wide set of colors are available to social icons, it is strongly recommended they are set as white with a maize hover state on dark backgrounds.

Accessibility

All site content must be perceivable, operable, understandable and robust for all users regardless of ability or disability, per WCAG 2.0AA specifications. This includes:

• Alternative (alt) text for all images

• Link text that describes where the link goes

• Appropriate color contrast (see above)

• Captions with appropriate description for all videos

Content Hierarchy

Note that content is in pages, not posts. All pages should be set to “Microsite Landing” in “Page Attributes”.

Avoid using any custom scripts. 

Page meta is available to edit via a page’s “Theme SEO Settings”, whether or not you want to is up to you. If you are unsure of any settings then leave it blank.

Sample Modules

(Drop quotes, Image placeholder, other common elements)

Specific Blocks - Identified 

• Opening Media (video - Image window)

• Video Window

• Video Window vertical

• Quote 01

• Quote 02 (Dual)

• Quote 03 (with image)

• Inpage Navigation (side)

• Inpage Navigation (5 button)

• Navigation (Side)

• Header

• Grid of Paragraphs

• Photogallery 01 

• Photogallery 02 

• DPS Block (to be assessed) 

User Interaction Elements

(Buttons, links, search)

Responsive Page Breakpoints

Max/min width

Copy Elements

Key Language

Voice

In most cases, use an active - first person voice. “Our world-class faculty collaborate across disciplines.” 

Persona: Sarah Trebek

Sarah is a Michigan Engineering grad student who also got her undergrad degree here, so she’s a true insider. She is articulate but not wordy, and great at explaining technical things in easy-to-understand language. She is direct but thorough and carefully considers how the meaning of her words might be interpreted from a diverse readership. 

Marketing Language Highlights 

Phrases: These could be utilized as large text, slogans, callouts or other elements

• Serving the common good

• Providing scientific and technological leadership to the world

• Improving the quality of life

• Creating collaborative solutions to societal problems

• An inclusive and innovative community

• Intellectually curious and socially conscious minds

Blurbs: These could be utilized as website, social media, brochure or other language

• Looking forward over the next decade, what will it mean to be Leaders and Best?

• Looking forward over the next decade, there are many questions. How will the world change? How will the needs of our nation change? How will methods of higher education change? How will technology change? And how will Michigan Engineering change along with it? 

• Michigan Engineering's strategic plan strives to anticipate the changes ahead, and take our institution from great to best.

• Michigan Engineering aspires to be the world’s preeminent college of engineering serving the common good.

• Michigan Engineering provides scientific and technological leadership to the people of the world.

• Michigan Engineers seek to improve the quality of life by developing intellectually curious and socially conscious minds, creating collaborative solutions to societal problems, and promoting an inclusive and innovative community of service for the common good.

How to use the new language

The marketing phrases and highlights (below) should be used in digital and print communications as a method of communicating the strengths and goals of the College. They could supplement some existing brand language. They can be used as: 

• Social media posts (tweets, etc.)

• Mixed into brochure, magazine, report or website text

• Used as large words on brochures, websites or other marketing materials