A firm grasp on the brand is vital in order to tell the Mediasite story truthfully, meaningfully and consistently, and best honor the customer experience.

Primary Archetype: The Muse

• Source of knowledge and inspiration
• The MUSE is a trusted guide
• Known for bringing clarity and focus to draw out the potential of an idea
• Empowers the creator to best reach their audience

Secondary Archetype: The Storyteller

• Has a gift for relaying information & passing along knowledge in powerful ways
• Charismatic, dramatic
• Artful communicator—able to bridge gaps in knowledge or perspective

Tertiary Archetype: The Innovator

• Willing to experiment and take risks
• Trend-spotter, ahead of the curve
• Rigorous research, relentless willpower and active imagination

Use this logo on white or light colored backgrounds when height is not restricted.

Best use cases: apparel, printed materials, tradeshow booths.

Use this logo on white or light colored backgrounds when height is restricted.

Best use cases: web banners, player banners, websites.

Pay close attention to the size ratio between headlines, subheadlines, and body copy to maintain proper hierarchy. To ensure consistency make sure fonts are used in a consistent manner and the weights of the font have been considered, using heavier weights for headers and to highlight key messages.

Body copy should not be smaller than 16px on screens or 10pt in print, and no text should be smaller than 10px on screens or 8pt in print.

Headline

Subhead

Body

Proxima Nova – Regular, Grey 3 (#898D8D)

Accent

Kalam, Bold, Cobalt (#004c97)

Process buttons are transparent with a Cobalt Blue outline. On hover they fill with Cobalt blue and text reverses to white.

• Process buttons should be used to initiate a process, such as logging in or completing a form.

Action buttons are solid orange (Cobalt blue can be used when necessary for contrast against the background). On hover the shade deepens.

• Action buttons should be used to trigger an immediate action — such as downloading a file or playing a video.
• Action buttons that trigger engagement with content should include an icon to clarify the format (e.g. play button when a video will be launched, download icon when a file will download, etc.)
• Action buttons should also be used whenever a rollover state is not possible, such as static banner ads, or when otherwise necessary for legibility or design aesthetic.

Forms should be as short and simple as possible and use a few fields as necessary. Interaction should be applied to provide feedback and prompts to gracefully move the user through the form.

• Error states should always include plainly-written helper text explaining why the entry is unacceptable.

STYLE

• COLOR: In most cases, icons should be orange to accompany text set in a subhead, h2, h4, or h5 style.
• LINE: Icons should maintain consistent line widths when scaled. Width is roughly equal to the weight of body copy text.
• BACKGROUND: Orange icons can be used on white background, or backgrounds #f9f9f9 or lighter. White icons should be used on colored backgrounds and background darker than #f9f9f9.

Portal cards are used as navigation to take users to a subset of content. They include an icon and title, and may include a short descriptor of up to 60 characters.

For example, on the Mediasite.com homepage each vertical has a card which points to content related directly to that vertical.

Similarly, on the community.mediasite.com page, each forum has a card.

STYLE

• COLOR: In most cases, icon lines should be #C7C8C6. Any color fills should draw from the accent palette.
• LINE: Icons should maintain consistent line widths when scaled. Width is roughly equal to the weight of 2x body copy text.
• BACKGROUND: Illustrated icons can be used on white background, or backgrounds #f9f9f9 or lighter. Reversed out illustrated icons should be used on colored backgrounds and background darker than #f9f9f9. In reversed out illustrated icons the color fills should multiply the background color.

SIZE

• Icons should be between 110px – 200px on web.
• Offline illustrated icon sizes may vary based on the size of the execution. A general rule of thumb is to make it within 4-6x the size of the X-height of the text it accompanies.

Content cards are used to tout pieces of content (e.g. blog posts, webinars, and downloads).

• Web-based written content like blog posts, press releases, and media coverage uses a text-only Content Card.
• Multimedia or downloadable content like webinars, e-books, and toolkits incorporate an image.

Original imagery is preferred when possible to bring authenticity to brand communications. However, there are often situations for which no existing brand photography is available and custom photography is not feasible within time and/or budget. In these cases, we rely on stock imagery to tell our story.

• Believable: Photos should depict real-life situations that could have happened. A women with earbuds in streaming a video on the metro: yes. Five business people in eerily-coordinated suits enthusiastically joining in on a group high five: not so much.
• Natural: Real people aren’t emojis: they don’t burst into tears or grow hearts for eyes at the slightest impulse. Look for photos that look natural, not staged. Models should look like and dress like real people, and their facial expressions and body posture should match. Shots should look candid — eye contact with the camera is acceptable, but should be used with scrutiny to ensure a natural feel is maintained.
• International: Our customers are scattered all over the world and our marketing materials should reflect this. Classrooms, office buildings, hospitals, public transit, and coffee shops all may look different from country to country and culture to culture. We should be intentional to seek out a mix of location-ambiguous imagery, and imagery that shows our global footprint.

Imagery should be clean, simple, and uncluttered. This is often achieved by:

• Visual white space – Avoid busy, complex images. Look for compositions with visual white space around the primary subject.
• Depth of field— A shallow depth of field places primary subject in clear focus, while blurring background details. This helps photos feel clean, clear, and uncluttered.
• Contrast / Saturation— Avoid extremes in contrast and saturation. Images should be evenly exposed and represent realistic lighting and color appearance. Aim for a happy medium; not too flat and monochromatic, nor too severe or punchy. A notable exception to this is Mediasite Events imagery. Event-based imagery may be higher contrast and saturation to evoke the realistic drama and lighting of live events.

Imagery should complement the color palette. This can happen in two ways:

1 – Largely monochromatic images that feature a prominent splash of Cobalt or Orange from the Base palette

	#004c97  100/53/2/16  PMS 2945 C
	#ed8b00  0/51/100/0  PMS 144 C

2 – Images whose overall tone reflects a color in the Accent palette

	#f8c592  PMS 155 U
	#f8e38b  PMS 1205 C
	#e76c48  PMS 1665 U
	#8fd7c2  PMS 337 U