Subtitle 1Yammer Brand Identity Guidelines

Subtitle

Main copy text

Subtitle

Main copy textBrand Identity Guidelines

3 Introduction

4 Logo

11 Type

15 Color

16 Image

SectionsYammer Brand Identity Guidelines 2

3Yammer Brand Identity Guidelines Introduction

What is Yammer?

Yammer is a best-in-class Enterprise Social Network used by more than 200,000 organizations worldwide to foster team collaboration, empower employees, drive business agility, and promote organizational connectedness. Founded in 2008, Yammer is now part of the Microsoft Office Division.

More at about.yammer.com

Welcome to the Yammer Brand

These guidelines explain the key visual elements of our brand, so you can bring Yammer to life across all our communications.

Clear and consistent use of these elements will keep us true to the Yammer brand and the services it represents.

4Yammer Brand Identity Guidelines

Our logo

Our logo includes the Yammer logotype and a graphic element we refer to as “the Spittle.” These are designed to work together in a horizontal lockup that forms the Yammer logo.

Logo without trademark symbols

Logos are provided without trademark symbols (™ and ®) and should be used in marketing materials only. Trademark symbols are still required in certain places in product. For detailed guidance, visit http://lcaweb/ctp/trademarks/pages/trademark-list-and-usage.aspx.

Logo

Logotype

Logo

Spittleelement

5Yammer Brand Identity Guidelines

Let the logo breathe.

Clear space

Treat our logo with respect and give it room to breathe. Use a minimum clear space surrounding the logo equivalent to the height of the symbol.

Minimum size

The minimum recommended size of the logo is 0.15” (3.8 mm) high for print and 15 px on-screen.

Logo

x

x

x

xx

6Yammer Brand Identity Guidelines

Blue logo on white / light photo tone background White logo on blue / deep photo tone backgroundThe Yammer Logo is blue.

When the Yammer logo is used on white or light backgrounds, it is always blue. The color values for this blue include:

Print Applications:

PMS 300

C100 M50 Y0 K0

Screen / Web Applications:

R0 G114 B198

HEX #0072C6

When the logo appears on a blue background or deeper photographic tone, the logo can alternatively appear as white.

A black version is also available in the case of a black-only application.

Logo

7Yammer Brand Identity Guidelines

Blue logo on white background White logo on blue / deep photo tone backgroundThe Y-Spittle Favicon

A favicon has been developed for instances where space is confined and the Yammer logo becomes unreadable. The Y Spittle Favicon should never replace the Yammer logo for communication purposes. However it can appear to represent Yammer in illustrations or select product instances.

Color

The Y Spittle Favicon should appear as blue on white or light backgrounds using the same color values as the Yammer logo. Alternatively, when it appears on a blue background or deeper photographic tone, it can appear as white.

Minimum Size

The minimum recommended size of the Y Spittle Favicon is 0.15” (3.8 mm) high for print and 15 px on-screen.

If this minimum size does not fit within the digital communication than it should not appear at all.

Logo

8Yammer Brand Identity Guidelines

The tagline variation

On Web materials including landing pages and email communications headers, the Yammer logo locked up with the tagline “The Enterprise Social Network.” This helps to further build an understanding for what the brand provides. The tagline variation is limited to marketing communications and should not appear in the product.

When this logo is used, it would replace the Yammer logo. In other words, the preferred Yammer logo and the tagline logo should not both appear on the same communication.

Do not alter the lock up or relationship between the Yammer logo and the tagline.

All other guidelines for the Yammer logo still apply, including clear space and minimum size.

Logo

Logo with tagline

Spittleelement

Tagline

9Yammer Brand Identity Guidelines Logo

DON’T place the blue logo on a dark colored background. Use the white one.

DON’T put the logo or Y Spittle Favicon in a chat bubble.

DON’T alter the position or relationship between the Spittle element and the logotype (or Y) from what is provided.

DON’T change the color of the logo or add gradient in any way other than provided.

DON’T use the spittle as a stand alone asset or anywhere other than locked up with the yammer logotype or Y element.

DON’T create a logo lockup other than the tagline lockup provided.

DON’T change the font or style of the logo.

DON’T rotate the logo.

YAMMER click here

Large Business

10Yammer Brand Identity Guidelines

Include the Microsoft endorsement.

Color relationship

It is recommended that the Microsoft logotype be shown in gray or white. However, Yammer blue may also be used when the background does not provide sufficient contrast. The gray color values are as follows:

PMS Cool Gray 7

C0 M0 Y0 K48

R150 G150 B150

Size relationship

The recommended size of the Microsoft logo is 1/2 the cap height of the Yammer logo. For small-scale applications, the size of the Microsoft logo is 4/5 the cap height of the Yammer logo.

Placement

The Yammer logo should be placed as the lead brand, preferably top left. Preferred placement for the Microsoft logo is the bottom right corner, opposite the Yammer logo. However any corner will work for either logo as long as the relationship between lead brand and endorsing brand is clear.

Logo

1/2 cap height ofYammer logo

4/5 cap height ofYammer logo

Small-scale applications

Preferred placement Example

11Yammer Brand Identity Guidelines

General Guidelines for Type

Segoe is a Microsoft font utilized for all marketing communications. Segoe comes pre-installed in Windows 7 or later versions (or is available for download from brandtools.microsoft.com)

Segoe Pro vs. Segoe UI

These are two separate fonts optimized for print and web/screen, respectively. Please ensure you are using the correct font family for the appropriate medium.

Case

Sentence case is preferred for all communications. Title case may be used for headings and subheads.

Justification

Type should be set flush left, rag right. The exception is when a single word or headline is the dominant element in the composition, in which case it may be centered.

Relative headline size

Headlines may either be the same height as the Yammer logo or larger.

Type

Example

Headline.Headline.

Move Faster with YammerYammer is a private social network that helps you and your company stay on top of it all. Get connected to the right people, share information across teams and organize around projects so you can go farther faster. Transform your business with Yammer.

Work Better Together

Cut back on meetings and email chains. Work together in a Yammer Group: a flexible workspace for teams to collaborate. Set up a Group in seconds for any team, project, or interest and instantly start collaborating with colleagues. Share documents, images, and videos, keep track of versions and see all conversations about a document in one place. Create editable wikis called Notes, and see character-by-character changes your coworkers make in real time.

12Yammer Brand Identity Guidelines

Guidelines for Print

Weight

Segoe Pro Light is our primary weight and should be used for all dominant typographic messaging, set in 24 pt type or larger.

Segoe Pro Regular is our secondary weight. It should be used for all supporting copy, set in 23 pt type or smaller.

Segoe Pro Semibold may be used for subheads (if type is 23pt or smaller).

Line spacing

Line spacing refers to the space between lines of type. All type sizes should use 120% line spacing.

Letter spacing

Letter spacing is the space between letters. If settings are available, regular or bold weights should be set to Metrics with 0 letter spacing to ensure letters never touch each other. Larger type (24 pt and above) in lighter weights should be set to Metrics with negative letter spacing (-10)to ensure that the letterforms are not too far apart.

Type

This type is set in Segoe Pro Light at 24 pt. Line spacing is set to 140% at 33.6pt, or Multiple 1.4 in PowerPoint. Letter spacing is set to Metrics at -10, or condensed by .8 pt in PowerPoint. Color is Yammer Blue

This type is set in Segoe Pro Regular at 16pt. Line spacing is set to 140% at 22.4pt, or Multiple 1.4 in PowerPoint. Letter spacing is set to Metrics at 0 or not condensed. Color is 85% Pure Black.

The Best Way to Work Social

Loved by 85% of the Fortune 500

Try Yammer for Free Now!

Employee Engagement

CSS Specs for Web Headings

For Web and other screen applications, Segoe UI should be utilized, with the same weight considerations as above.

H1

Font: Segoe UI Light; 38px Font color: #333f46 [*dark backgrounds #ffffff] Line-height: 44px

H2

Font: Segoe UI Semilight; 28px Font color: #333f46 Line-height: 34px

H3

Font: Segoe UI Semilight; 24px Font color: #333f46 Line-height: 34px

H4

Font: Segoe UI Regular; 18px Font color: #333f46 Line-height: 24px

Yammer Brand Identity Guidelines Type 13

CSS Specs for Web Body

Body 1

Font: Segoe UI Regular; 18px Font color: #333f46 Line-height: 26px

Body 2

Font: Segoe UI Regular; 16 px Font color: #4b5c66 Line-height: 24px Align: Left

Body 3 Font: Segoe UI Regular; 14 px Font color: #4b5c66 Line-height: 20 px Align: Center

Keeping up with changes and staying on trend is essential in retail and Yammer helps us do that. It allows people to share best practices, even across functions and geographies. Keeping up with changes and staying on trend is essential in retail and Yammer helps us do that. In a world that’s constantly changing, companies need a new way to work together to achieve results. Yammer helps over 200,000 leading companies – including 85% of Fortune 500 – foster team collaboration, engage employees, drive business agility and make their intranets social. And it can help yours, too.

Connect, communicate and collaborate with your team to supercharge productivity.

Yammer Brand Identity Guidelines Type 14

15Yammer Brand Identity Guidelines Color

Our color palette.

We use friendly, bright colors to represent the Yammer brand. Do not create tints or gradients from these colors.

Yammer blue

Our primary brand color for marketing is Yammer Blue, (Pantone 300) or the same color as our logo. This color is shared across other Microsoft communication-focused offereings.

Secondary colors

Use the secondary colors provided to accent the primary color or highlight select elements. Illustrations should incorporate these colors before selecting others.

The color value has been optimized for the medium in which it’s meant to be used. The RGB and hex values are for on-screen and digital use, and the CMYK and PMS colors are for use in print. Don’t use the automated color conversion tools in your software to convert CMYK to RGB and vice versa.

PMS 300 C100 M50 Y0 K0 R0 G114 B198 HEX #0072C6

PMS 637 C60 M0 Y5 K0 R75 G199 B233 HEX #4BC7E9

PMS 7409 C0 M30 Y100 K0 R251 G173 B25 HEX #FBAD19

PMS N/A C70 M0 Y78 K0 R73 G185 B108 HEX #49B96C

PMS 1788 C0 M95 Y73 K0 R255 G33 B62 HEX #FF213E

PMS 441 C26 M16 Y21 K0 R189 G197 B194 HEX #BDC5C2

16Yammer Brand Identity Guidelines

Photography

Product shots

Photography featuring the product should feature bright, natural light with muted, cool colors. Framing should be intimate and immersive in an environment free of clutter. Sparse, neatly organized objects provide additional context and pops of color.

People portraits

Shoot in well-lit room with either natural ambient light, flash or spotlight. Subjects will be in focus and background should be slightly blurry. Poses to capture: Straight on shot of subject looking at camera, subject looking up and to the left.

Image

17Yammer Brand Identity Guidelines

Iconography & Illustration

We use bright, colorful & whimsical illustration to convey concepts. Objects in general are rendered flat, without rotation, and with minimal detail.

More abstract concepts or use cases can use layers or iconography connected by lines to provide a deeper illustrated story.

Image

NewMessage

NewessageNew

Message

For visual assets, further questions or artwork approvals, please contact the Yammer Group: “Yammer Assets”