skip to Main Content
+1.608.443.1600 Contact Community en English

Brand Guide

A lot of hard work goes into creating a cohesive brand design. Every piece is intentional and designed to strengthen the integrity of the visual brand. This guide is designed to help you uphold the aesthetic standards of the brand, and ensure the visual identity of Mediasite is consistent and professional.   

Table of Contents

Brand Identity

Brand Archetype

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

Brand Attributes

Mediasite is Like…

…a trusty hiking boot, a tricked-out SUV, or your faithful four-legged companion: Dependable, loyal, durable — a go to resource that supports you tirelessly and always has what you need.

 

Values that guides us:

  • Stay Relevant / Always be innovating / Transform communication / Transform education
  • Tight-knit community / Responsive to customers / Fun & energetic
  • Execution above all/Leaders/On the forefront / Meet every need
  • Renegades / Flexible / Open to new ideas

Messaging

The key messaging components of the Mediasite identity, when handled with consistency, reinforce and protect our brand. Our guidelines spell out how to apply the brand messaging components correctly to the public.

Boilerplates

Writing Style Guidelines

Brand Name Style

 

DO 

DON’T 

Mediasite 

Media Site 

MediaSite 

Media site 

Sonic Foundry 

SonicFoundry 
Sonic foundry 
sonic foundry 
SoFo 

Brand Name Usage

 

DO 

DON’T 

Mediasite 

Media Site 

MediaSite 

Media site 

Use ‘Mediasite’ for all product mentions 

Use ‘Mediasite by Sonic Foundry’ 

Use ‘Sonic Foundry’ for investor-related communications 

Use ‘Mediasite‘ for investor-related communications 

Use ‘Sonic Foundry’ after your title, i.e. ‘[Name], [Your Title] of Sonic Foundry’ 

Use ‘Mediasite‘  

Mediasite Events 

Sonic Foundry Event Services 

Product Naming & Abbreviations

While product shorthand is used internally, it should NOT be conveyed to customers or prospects. Always use the full product name on external documents, forums, and other communications.

 

 

DO 

DON’T 

Mediasite Video Platform’ or ‘Mediasite Video Cloud’ 

‘MVP’ or ‘MVC’ 

 

Mediasite Join 

Join 

Mediasite Catch 

Catch 

Mediasite Connect 

Connect 

‘My Mediasite’ and ‘Mediasite Desktop Recorder’ 

MDR 

Mediasite Recorder 

Recorder 

Mediasite RL Recorder, a rack-mounted device’ 

RL Recorder 

Mediasite ML Recorder, a mobile device 

ML Recorder 

Mediasite RL Mini’ on first reference 

 

Four Dots

DO use our four dots mark to add a pop of branding wherever it might be useful.

 

DON’T use them next to a logo. We do not want dot overload!

 

DON’T change the color or alignment of the dots. They are always orange.

Mediasite Logo

Colors

Color is an integral part of brand identity. Consistent use of color palettes will reinforce brand cohesiveness. The colors serve a psychological purpose by communicating specific messages to your audience.  

Base Palette

 

 

#071d49 100/90/13/71 PMS 2768 C

 

Indigo

 

 

#004c97 100/53/2/16 PMS 2945 C

 

Cobalt

 

 

#0086BF 100/6/2/10 PMS 7460 C

 

Bright Blue

 

 

#c2ecf7 PMS 9460-U

 

Sky Blue

 

 

#ed8b00 0/51/100/0 PMS 144 C

 

Orange

Accent Palette

 

 

#f8c592

PMS 155 U

 

Pale Orange

 

 

#f8e38b

PMS 1205 C

 

Yellow

 

 

#e76c48

PMS 1665 U

 

Red Orange

 

 

#8fd7c2

PMS 337 U

 

Mint Green

Monochrome Palette

 

#25282A

94/77/53/94

PMS 426 C

 

Black

 

 

#404040

 

Grey 5

 

#54595B

48/29/26/76

 

Grey 4

 

 

#898D8D

22/14/18/45

 

Grey 3

 

 

#C7C8C6

6/4/7/13

 

Grey 2

 

 

#EFEFF0

 

Grey 1

 

 

#f9f9f9

PMS 179-1 U

 

 

Off White

The main colors are bold and selected to represent how customers should feel when aligning with Mediasite. Color psychology suggests the rich blue and deep indigo convey intelligence, strength and trustworthiness. The bright accent blue speaks to security, stability, reliability, clarity and communication. The orange of the four dots represents creativity, energy and exuberance. Grey projects security, reliability, maturity and stability 

 

The softer accent palette provides a thoughtful break from the bold colors. The accent palette is to be used sparingly and intentionally. 

 

  • PMS: Use this when printing offset or silkscreen and you need accurate color matching.
  • CMYK: Use this when printing digitally or when printing offset and you’re using color photography where four colors are needed.
  • RGB: Use this when working on digital and on-screen applications.

Typography

Fonts

Font Size & Hierarchy

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.

Type Styles

Headline

Gilroy – Light, Cobalt (#004c97)

Subhead

Proxima Nova – Bold, Orange (#ed8b00); ALL CAPS WHEN USED AS A MODIFIER

Body

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

Accent

Kalam, Bold, Orange (#ed8b00)

Kalam, Bold, Cobalt (#004c97)

Web Type Styles

Page Title

Gilroy – Light, 60px, Indigo (#071d49)

H2.

Gilroy – Light, 40px, Cobalt (#004c97)

Proxima Nova – Bold, 24px, Orange (#ed8b00)

H3.

Kalam – Regular, 78px, Orange (#ed8b00)

H4.

PROXIMA NOVA – BOLD, 20px, ORANGE (#ed8b00); ALL CAPS

H5.

PROXIMA NOVA – BOLD, 16px, ORANGE (#ed8b00); ALL CAPS

Paragraph

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

Link

Default state: Proxima Nova – Regular, 16px, Grey 3 (#898D8D)

Rollover state: Proxima Nova – Regular, 16px, Bright Blue (#0086BF)

Brand Collateral

Presentations

Web Elements

Every website is a full representation of the brand and should be in exact alignment with the other brand websites. Opening it up to individual preferences or interpretation diminishes and harms the brand.   

Process Buttons

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.

Styles

Action Buttons

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.

Template

Field States

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.

Selection Menus

Search Fields

Icons

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.

SIZE

  • Icons should be between 16x16px – 40x40px on web.
  • Offline icon sizes may vary based on the size of the execution. A general rule of thumb is to make it within 1-2x the size of the X-height of the text it accompanies.

Portal Cards

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

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.

Devices

Style

Product screenshots are used frequently in brand communications. Screenshots should be displayed within the appropriate device shell. While older brand communications used photo realistic devices, all communications should now use the white, minimalistic device illustration shells.

Templates

Template Usage

  • Use the browser shell by default when showing software screenshots.
  • Use the Mobile, Laptop, and Laptop + Mobile shells with intention, when the device(s) is relevant.
  • Use no frame if only a cropped portion of the interface is shown.
  • Use no frame when the animation is not depicting software.
  • Shells have two styles: Light and Dark. Use the appropriate shell to provide the best contrast on the background.

Photography

Sourcing

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.

Attributes

  • 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.

Composition

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.

Color Palatte

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

 

Co-Branding

What is cobranding?

Cobranding is a strategic agreement between partner brands to work together to achieve a desired goal.

Why cobrand?

  • Establish or increase consumer preference.
  • Generate loyalty and brand differentiation.
  • Enter new markets.
  • Promote new products/new application of existing products.
  • Engage the customer and drive relevance at multiple touch points.

Key Principles

  • DO present Mediasite as the dominant/lead brand (whenever possible). The Mediasite logo should be clearly displayed and given prominence.
  • DO leverage Mediasite brand guidelines; create a partnership environment where Mediasite’s brand feels organic to the experience.
  • Certain partnerships are unique and necessitate further consultation from marketing.

Logo Guidelines

  • DO give the Mediasite logo prominence on a page.
  • DO always maintain the required clear space around the logo. (See Brand Design > Logo)
  • DO use the full color logo on a white background whenever possible.
  • DO ensure both logos are the same size.
  • DO NOT use the logo more than once on a single page or screen.
  • DO NOT use black and white versions unless the full color logo is not an option.
  • DO NOT use the logo as part of a sentence within a block of copy.

Brand Dominance

Brand dominance means one partner will have the lead presence, often emphasizing their visual system in marketing communications.

 

Brand dominance is determined during partnership negotiations and is influenced by factors such as financial and/or resource contribution, which partner is granting access to customers and maintaining that relationship, or which partner will host the experience.

 

Create dominance by:

  • Placing the dominant partner logo in the most visible and valuable space (e.g. Above the fold on a website, or at lower right on an advertisement).
  • When partner logos are shown in proximity, place the dominant brand on the left.

Cobranding Approach Based on Dominance

Mediasite Dominant

Mediasite dominance is when Mediasite most heavily influences the communication experience. This is when Mediasite is driving the customer experience or if our resources are most depended upon. Mediasite dominant experiences rely heavily on the Mediasite visual system for look and feel.

 

Partner Dominant Cobranding 

Partner dominance is when the partner brand heavily influences the communication experience. As a result, the Partner brand is featured more, and the design is geared towards their visual system. While the execution will be driven by the partner brand’s visual system, it’s critical that we protect and appropriately display the Mediasite logo.

 

Other Partnerships 

Not all partnerships have clear brand dominance. It is important that you maintain as many of the Mediasite visual components as possible.

Logo

Our partners always use this guide when following logo guidelines:

 

Logo Guidelines and Clear Space 

  • DO give the Mediasite logo a place of prominence on a page.
  • DO NOT place the logo more than once on a single page or screen.
  • DO always maintain the required clear space around the logo.
  • DO NOT use the logo as part of a sentence within a block of copy.
  • DO use black and white versions only where the full color logo is not an option.

 

Logo Placement 

The placement of logos communicates brand dominance. The dominant brand is always on the left or on top, subordinate/partner logo is always on the right or on the bottom. Maintain the proper clear space around each logo.

 

Follow these rules when using the Mediasite and partner logos together:

  • DO default to the full color logo on a white background whenever possible.
  • DO make the two logos the same size.
  • DO always follow the logo guidance rules regardless of brand dominance.

Have Questions?

We’re happy to help. Contact us.

Back To Top