Contrast

Michigan Virtual's Brand Standards & Guidelines

Logo & Usage

Each of the logos is a representation of Michigan Virtual and as such should always remain consistent in clarity, presentation, and representation. The four logo options available provide users with alternative options to best suit various scenarios. The preferred version is the horizontally stacked version, where the symbol is on the left side of the stacked words ‘Michigan Virtual.’ These files are saved with whitespace intentionally added. No text or graphic should enter the white space shown in the logos.

Regardless of which logo is selected, each should be used with caution to ensure a true, unaltered representation of the Michigan Virtual logo. All logos should never be turned upside-down, tilted, or skewed from their original orientation.

The elements of the logo should never be broken apart or changed. No additional elements should be added within the logo. Additionally, no attempts should be made to mimic typeface and fonts included in existing logo assets.

The .zip file below contains the four different logos in three different color options (full color, black, and white) and in four different file formats (.svg, .pdf, .png, and .jpg). Please use the .svg and .pdf formats as the primary image format where possible, using the .png as a fallback for use cases where a .svg or .pdf isn’t accepted or allowed. The .jpg format should be used as a last resort, as it doesn’t have any transparency built in, and is the least versatile file format.

Colors

Michigan Virtual has eight official colors, with accessible (a11y) alternatives for green and orange.

Deep Teal

#093c44
rgb(9,60,68)
cmyk(87,12,0,73)
PMS 309C

Dark Teal

#115e6e
rgb(19,94,111)
cmyk(91,52,44,20)
PMS 315C

Light Teal

#2f8d98
rgb(47,141,152)
cmyk(76,23,33,10)
PMS 7711C

Green

#b5cd34
rgb(182,205,52)
cmyk(34,3,100,0)
PMS 367C

Orange

#f7941e
rgb(247,148,30)
cmyk(0,50,100,0)
PMS 715C

Dark Gray

#414042
rgb(65,64,66)
cmyk(0,0,0,90)
PMS Black 7C

Light Gray

#6d6e71
rgb(109,110,113)
cmyk(0,0,0,70)
PMS Cool Gray 9C

White

#ffffff
rgb(255,255,255)
cmyk(0,0,0,0)
N/A

A11y Green

#6a7f17
rgb(106,127,23)
cmyk(17,0,82,50)
PMS 370C

A11y Orange

#ac6610
rgb(172,102,16)
cmyk(0,41,91,33)
PMS 7512C

Color Usage & Accessibility

To maintain WCAG 2.0 Level AA compliance, background and text color contrasts must meet a minimum of at least 4.5:1 for normal text and 3:1 for large text. When in doubt, use a color contrast checker to ensure the color combination meets WCAG 2.0 AA compliance.

White as text or as background

White text is allowed on all brand colors except for the regular version of green and orange (unless a contrast selector is available to switch between regular and accessible orange and green).

12.06

Deep Teal

7.37

Dark Teal

3.9

Light Teal

4.5

A11y Orange

4.51

A11y Green

5.10

Light Gray

10.31

Dark Gray

2.28

Orange

1.79

Green

Brand colors as text

Do not use any brand colors as text color on another brand color (i.e. light gray on deep teal). Brand colors may only be used on white or a very light background (if it meets color contrast rules)

When to use brand colors

Deep Teal or Dark Teal are to be used as heading colors. Light Teal may be used if it promotes better hierarchy (i.e. to increase visual separation between heading levels)

Dark Gray should be used as the default text color (if on a white or very light background).

Light Gray may be used for ancillary or secondary information (i.e. footnotes or minor callout).

Orange is Michigan Virtual’s Call-to-action (CTA) color, and should be used for action items (actionable callouts, links, or buttons).

Green should never be used as a text color, and instead used as an accent, usually as a divider color to break up sections or denote greater hierarchy.

Fonts

Michigan Virtual utilizes a single primary font (Gotham), with acceptable fallbacks for use cases without access to the primary font. If Gotham is not available, Roboto is the next fallback font, followed by Noto Sans, then Helvetica, then Calibri.

In the scenarios which may call for a serif font, such as a research paper, or a blog article, utilize IBM Plex Serif, with the fallbacks of Garamond, then Noto Serif, then Times.

Use the link below to download the fallback fonts (Roboto, Noto Sans, IBM Plex Serif, and Noto Serif).

Presentations

The official Google Slide template for Michigan Virtual is available for internal employee use. This slide template includes the above resources, as well as content and activity recommendations that follow best practices for teaching adult learners.

Use the download below to create a copy of the official slide template. Please create a new copy for every slide deck created.

Note: You must be signed in to your Michigan Virtual Google account to access the slide template.

Blog Writing

Here at Michigan Virtual, our blog is a vehicle for providing statewide thought leadership in the realm of online and blended learning. We’d love for you to contribute your expertise and help us grow our readership. Maybe you’ve always had an interest in blog writing. Maybe you’re wanting to stretch out some new muscles. Maybe you have something you really want more people to know. Maybe your supervisor has asked you to write a blog and you don’t know where to start!

The following style guide is designed to help you think through the process of writing a blog from scratch, including picking a topic, setting goals, establishing your tone, structuring your blog, writing an introduction, formatting your post, and coming up with a title.

Writing Standards

Acronyms

Michigan Virtual should not be abbreviated to MV unless limited by character length limits.

It’s permissible to use an acronym on first reference if it’s commonly known (MSU, MASSP, MACUL, PD, IEP, etc.). When including an acronym that isn’t commonly known, spell out the words and place the acronym in parentheses on the first use in a document. On subsequent uses in the same document, use the acronym.

Capitalization

Headlines and Headings

Capitalize the first word of the heading and proper nouns (“down style”). In headings, use numerals for all numbers and single quotes for quotation marks.

Example: Study explores teacher infrastructure practices
Example: Online learning is an ‘integral part of the total education environment’

Job Titles

Capitalize job titles when used in front of a person’s name, but not after.

Example: “Research is boss,” said Joe Freidhoff, executive director of MVLRI.
Example: “Online learning is bossier,” said Michigan Virtual President & CEO Jamey Fitzpatrick.

Commas

In a series, use the “Oxford” comma.

Example: Michigan Virtual courses are offered in semesters, trimesters, and in the summer.
Example: Sixty-five percent of rural enrollments reached “Completed/Passed” status compared to 57% in Towns, 56% in Suburbs, and 53% in Cities.

Dates & Time

Date Figures

Always use date figures, without st, nd, rd or th.

Example: The semester starts on September 8 (not September 8th).

Time Figures

Use time figures except for noon and midnight. Use a colon to separate hours from minutes. Avoid redundancies.

Example: The event will take place from 11:30 a.m. – 2:00 p.m.
Example: Class starts at 8 a.m.
Example: Do not use redundant language like 10 a.m. this morning.

Icons

Michigan Virtual has a suite of 100+ icons that are based in the education industry. The downloadable icon pack contains a high-quality vector version (.svg), as well as 4 different sized .png versions (64px, 128px, 256px, and 512px).

These icons should only be used on white or very light background colors.

Artificial Intelligence in Education: A comprehensive AI framework and resources

Research

Innovation

Online Learning Program Self-Assessment Tool

Artificial Intelligence in Education: A comprehensive AI framework and resources

Logo & Usage

Colors

Deep Teal

Dark Teal

Light Teal

Green

Orange

Dark Gray

Light Gray

White

A11y Green

A11y Orange

Color Usage & Accessibility

White as text or as background

12.06

7.37

3.9

4.5

4.51

5.10

10.31

2.28

1.79

Brand colors as text

When to use brand colors

Fonts

Presentations

Blog Writing

Writing Standards

Acronyms

Capitalization

Headlines and Headings

Job Titles

Commas

Dates & Time

Date Figures

Time Figures

Icons

Celebrating 25 years in education.