FMSBrandingStyle Guide

James OrdóñezCreative DirectorArtDirectorNY@Gmail.com

- Brand Introduction- Brand Logo- Variations - Construction & Clear Space- Application

- Backgrounds - Color Palette- Typography- Graphics- Email Marketing

Creative Direction For Use Across ALL Media

2 3

TM

Table of Contents

Utilize this Style Guide to maintain consistency in all branding across the various print, tradeshow, digital media, signage, email marketing, web banners and advertising.

Introduction

Manifesto

Backgrounds and Graphics

Logo Introduction

Logo Variations

Logo Construction and Clear Space

Typography

Color Palette

The Primary Brand Colors

Email Marketing

5

6

7

10

11

12

14

16

17

18

FMS

4 5

TM

Introduction

Consistent visual identity correlates with brand recognition. Standards help guide your employees and vendors.

Welcome

The FMS brand standards are sets of guidelines for the colors, photography and graphic elements, important logo specs, usage of fonts, and messaging that comprise the FMS brand. These are the glue that holds the FMS brand together and help to create and protect the outward facing identity as a memorable marketing tool.

Once these guidelines are established, it is imperative that all employees and vendors understand and uphold them. Many firms invest a considerable amount of both human capital and resources into developing a unique brand identity, only to see them diluted along the way.

It is extremely important that there be a single point of contact from a Brand Ambassador—or branding police—for ALL approvals, who uses this Branding Style Guide to maintain important branding continuity and cohesion.

This Brand Style Guide will show why and how brand standards are so important, and why everyone in the organization should implement them within everything that FMS does—without exception.

Consistent Visual Identity Correlates with Brand Recognition

The most powerful brands not only have a great visual identity, but show that identity is methodically reinforced across every single touch-point. Having a Brand Standards Guide that is strictly enforced throughout the company helps to ensure consistency, which over time supports strong brand recognition amongst clients and prospects.

Introduction

6 7

TM

Backgrounds

The purpose of brand guidelines is to help every person in the organization understand your mission and uphold the integrity of the brand in everything that they do.

Binary Mesh & Mirrored Smoke Backgrounds

The binary mesh and mirrored smoke backgrounds were originally created for the FMS website hero image slideshow area. These unique design intentions are intended to be used as the consistent backgrounds for banners and signage, to use only with the various colors of the style guide palette.

These are exclusively created for and owned by FMS as a unique branding and identity element.

Intended Messaging Value of Backgrounds

The subconscious brand messaging intention behind the binary mesh is to illustrate and convey the rapid transfer of data with ubiquitous flexibility. The mirrored image of the smoke background, over the binary mesh, is intended to invoke a ‘sizzling’ subliminal inference. This Branding Design is dependent on this unique binary mesh and mirrored smoke pattern as a constant. Designers may use these layered files to create other binary mesh backgrounds to suit their adaptations of this brand style-guide into their designs, or use portions of the existing patterns.

As a unique point of interest and for conversation, the binary mesh background was created by translating a Sanskrit Mantra of universal abundance into binary code and then stylized with the Adobe Illustrator ‘Mesh’ tool to stretch and twist.

Consistency

These are only two of the several essential constants incorporated into this Brand Design. It is only highlighted here as two examples of how to use all other brand constants altogether from this Corporate Style Guide. Adherence to these Style Guide rules are essential for the success of the brand.

Manifesto

8 9

TM

Backgrounds

The use of consistency in graphical elements and backgrounds is used to maintain cohesive packaging of the FMS brand that promotes memorable experience across the various media, as with colors and fonts.

Blue Diamond Waves Background

As shown on page 13, this background can be used behind the logo, but only with gold logo text, Pantone 611C. This background also works well with the logo for web and email banners.

Frames and Borders

In order to complement the logo design, the use of the rounded top-right corner is encouraged as a frame for photographs, portraits, Social Media icons, etc. To maintain this continuity please use at least once on any page that displays the FMS logo and an image. This works best with square images, and can also be used with horizontal promotional banners or adverts on web and emails. This rounded top-right corner radius should not be overused outside of portraits of speakers, etc. The radius should be proximately 25%

of the smallest width and/or height, with visually proportional line weight of 2pts., to 4pts., at the designers discretion to visually maintain the proportions shown here. The color of the border should always be Pantone 245C or hex #575858.

Logo Halo Graphic for Brand Support

In order to complement the logo branding further this halo like octagonal ornament graphic may be delicately scattered in part or in full to dress up clean page backgrounds. Examples are shown throughout this Branding Style Guide. This use is to only be used very subtly, therefore only use opacity percentages of the Pantone Cool Gray 1C, approximating #F4F4F4—at the designers discretion.Manifesto

10 11

TM

Logo Introduction

Logo Versions

The FMS logo is designed for various applications in different mediums.

1.) Main Logo Centered

2.) Vertical Banner Logo

3.) Main Logo Flush Left

4.) Main Logo Flush Right

5.) Main Logo Left/Right Gray Scale

6.) Social Media Icons

Main Logo Centered

The use of the Main Logo is intended for single uses such as banners, presentations, letterhead, etc. This larger version is not intended for uses where repetition is essential as in all PowerPoint slides or pagination in a multi-page document such as this Branding Style-Guide.

Vertical Banner Logo Left & Right

For that purpose as well as smaller uses such as Internet banners, or small ads, the ‘Vertical Banner Logo” was adopted. This variation comes in flush-left and flush-right, as well as without text for an icon-like use—always hanging (bleeding off) the top of the page.

Icon Variations

Social Media and Internet profiles icons are designed with only the core element of the letters encapsulated as stand alone for easy use. All versions provided are vectors and can be easily resized larger as needed.

Main Logo Flush Left & Right

These are intended for uses where repetition is essential, as in all Microsoft PowerPoint slides or pagination in a multi-page document, such as this Branding Style-Guide.

- Logo Introduction- Variations - Construction & Clear Space- Application- Application on Backgrounds - Correct Logo Placements- Typography

LogoTM

TM

TM

TM TM

12 13

TM

Logo Construction and Clear SpaceStrict Spacing Rules

Consistency in the space around a logo is as important as consistency of colors and typography. This spacing is to allow the logo to breathe and consistently stand out as the main brand element. The FMS Brand Design conservatively uses a consistent spacing of 2em’s† of air on any side or direction as illustrated here in the various formats. The term ‘Logo Violation’ is used in the advertising industry to indicate a disruption to logo continuity as per the Brand Design, especially with the spacing designed around it. Note: This is minimum spacing only.

† The unit of measure ‘em’ is equal to the width of the letter ‘m’ in lower case, for proportional spacing.

Strict Background Rules

Never use white for the Logo Type Text, “Flash Memory Summit”. Doing so upstages the ‘S’ in the acronym emblem. Also, since the emblem is dominant with warm colors, i.e., Warm Red and Gold, only use cool background colors from the Brand Palette, i.e., Light Blue Pantone 660C, Pantone Cool Grey 4C, or Black. Unlike some other brands, the FMS logo emblem was specifically designed to be used with background images and patterns. Such background patterns should be colored with combinations of cool colors as much as possible, i.e., Light Blue Pantone 660C, Dark Purple Blue Pantone 7687C, Pantone Cool Grey 4C, or Black. Background images simply need to be dark enough to pop the logo.

Definitions: “The phrase cool color is used to describe any color that is calm or soothing in nature. Cool colors are not overpowering and tend to recede in space. For this reason, cool colors typically make a space seem larger. Examples of cool colors include green, blue and violet (think calming blue waters). “

“Warm colors convey emotions from simple optimism to strong violence. The warmth of red, yellow, pink, or orange can create excitement or even anger.”

Source: Lifewire and Webopedia

Application on Allowable Backgrounds

2em

2em2em

2em

2em

2em

2em2em

Flash Memory SummitTM

If used without text please keep 2em all around

2em

2em

2em

2em

Flash Memory Summit

TM

TMTM

Flash Memory SummitTM

TM

Flash Memory SummitTM

Flash Memory SummitTM

Flash Memo

Flash Memo

ry

ry

Summi

Summi

t

t

TM

TM

Flash Memo

Flash Memo

ry

ry

Summi

Summi

t

t

TM

TM

Flash MemoFlash Memo ryry Summi Summi tt

Flash Memory Summit

TM

TM

14 15

TM

Corporate Fonts:

Futura BT Medium CondensedFutura BT LightFutura BT Light ItalicFutura BT BookFutura BT Bold

Corporate Font

Typography

The Futura font family is a well known and widely used elegant font, designed in1927 by a fellow named Paul Renner. As a typeface that’s coming in on it’s 100th anniver-sary, it still commands a lot of respect for being as modern today as it was 85 years ago. There are some great free Web font alternatives to Futura that work. However, the best of all is Adobe TypeKit’s actual Futura Family.: https://typekit.com/fonts/futu-ra-pt AND https://typekit.com/fonts/futura-pt-condensed.

The alternatives to use in CSS as backups are available from the Google Fonts Library, and recommend as follows in chronological order for best use: ‘Open Sans’, ‘Didact Gothic‘, ‘Questrial ‘, and ‘Muli ‘.

FUTURA

F u t u r a B T L i g h ta b c d e f g h i j k l m n o p q r s t u v w x y zA B C D E F G H I J K L M N O P Q R S T U V W X Y Z1 2 3 4 5 6 7 8 9 0 ? ! * + ( . , )

F u t u r a B T M e d i u m C o n d e n s e da b c d e f g h i j k l m n o p q r s t u v w x y zA B C D E F G H I J K L M N O P Q R S T U V W X Y Z1 2 3 4 5 6 7 8 9 0 ? ! * + ( . , )

F u t u r a B T B o l da b c d e f g h i j k l m n o p q r s t u v w x y zA B C D E F G H I J K L M N O P Q R S T U V W X Y Z1 2 3 4 5 6 7 8 9 0 ? ! * + ( . , )

F u t u r a B T L i g h t I t a l i c f o r e m p h a s e sa b c d e f g h i j k l m n o p q r s t u v w x y zA B C D E F G H I J K L M N O P Q R S T U V W X Y Z1 2 3 4 5 6 7 8 9 0 ? ! * + ( . , )

F u t u r a B T B o o ka b c d e f g h i j k l m n o p q r s t u v w x y zA B C D E F G H I J K L M N O P Q R S T U V W X Y Z1 2 3 4 5 6 7 8 9 0 ? ! * + ( . , )Typography

Headlines and Subheads in ‘Title Case’ With the exception of the Web Site page divider subheads that are designed encapsulated in gold letters over dark gray background in All Caps, all other Heads and Subheads required a consis-tency that works everywhere else. This style is ‘Title Case.’

16 17

TM

The Primary Brand Colors

Main Brand ColorPANTONE2756 C

The number 1 color as used in the logo acronym’s “F”, for “Flash”, is Pantone 2756C. All other colors in the palette are meant to support and compliment these two main brand colors.

Secondary Brand ColorPANTONE660 C

The number 2 color as used in the logo text “Flash Memory Summit” is Pantone 660C. Together with the main brand color above accompanies, compliments, and together from the two main colors of the palette. All other colors in the palette are meant to support and compliment these two main brand colors.

PANTONE 2756 C

PANTONE 660 C

Strict Background Rules

Do not use Warm Red and/or Gold backgrounds (other than the Vertical Banner Logo Treatment already established). As mentioned on page 13, only use cool background colors from the Brand Palette, i.e., Light Blue Pantone 660C, Pantone Cool Grey 1C, or Black.

Main color system

Secondary color system

Color Palette

18 19

TM

Email

Email Marketing

Email Template Branding

As of the writing of this Style Guide and going back a decade, Email Marketing remains ‘the’ main Marketing Channel in most industries— therefore of important Branding value.

Websites and landing pages are required to adhere to a few dozen screens size widths. This makes Mobile Responsive and UX Design an essential factor in all content creation and graphic Design.

Email Marketing, in comparison, makes the Mobile Responsive and UX challenges of websites and landing pages a much lesser effort. In addition to adhering to the several dozen screen width sizes, Email Marketing has to adhere in addition to several dozen email clients and versions of those clients.

For this, among other reasons, Email Marketing is limited to older HTML and CSS technologies that do not adhere to modern tech rules or WC3 validation as are used for websites and landing pages. For this reason testing HTML Emails for Mobile Responsive and UX testing becomes an almost impossible task around so many platforms, versions, and screen sizes.

Therefore, the FMS Email Marketing template was carefully adapted from an Adobe Email template originally designed by the king of digital media—Adobe—created by experts, tested by experts.

Mobile Responsiveness

The Desktop view to the right will stack all items vertically on small screens narrower than 600 pixels.

The Master Email Template can be viewed and downloaded at: http://www.art-director-nyc.com/FlashMemorySummit/email/

The FMS Email Template This Email Marketing template was designed by selecting specific HTML/CSS components created by Adobe, chosen in the design to fit the history of FMS emails and work-flow. Additionally, the template design added standard Email Marketing components that designers and marketeers typically include for the flexibility of additional options.

This template is meant to be used each time from scratch, using the master HTML/CSS file provided, by hiding or deleting unwanted components. This is encouraged to avoid breaking the template components code with reuse.

Because of the issues mentioned with older HTML and CSS tech, and the unavailability for proper validation, the code can easily break and will create much unneeded work to correct. Please therefore adhere to always using this original Email Template code for every new email, by simply hiding or deleting unwanted components and only using the components provided rather than adding new components. There are enough components to duplicate and hide or delete in the master template.

This will ensure that the best possible Adobe ‘expert created’ and ‘expert tested’ Mobile Responsive design remains intact.

List of Components

As part of the work-flow design the 17 components are laid out in a Google Sheet for team collaboration with copywriters and Marketeers when picking components.

1. PRE-HEADER: Component #C1 – The first component does not show in the image on the opposite page, as it is a hidden feature that only appears on certain Email Clients as the summary shown before the end user/recipient opens the email. While this is optional, this is probably the main and most important of all components that requires attention from the Copywriter and Marketing teams. This statistically impacts ‘Opens, Soft Bounces, and Unsubscribes’. The word-count should be around 126 words or character count 700 characters.

2. LOGO HEADER: Component #C2 – Optional but recommend, this Vertical Logo Banner adheres to the to website continuity and saves real estate space on small screens to maximize branding across devices.

3. TOP ROTATING BANNER: Component #C3

4. VIEW AS WEB PAGE: Component #C4

5. GREETING: Component #C5

6. MAIN HERO IMAGE: Component #C6

7. HEADING 1: Component #C7

8. BULLETS: Component #C8

9. BODY PARAGRAPH: Component #C9

10. SUBMIT BUTTON CTA: Component #C10

11. ADD TO CALENDAR: Component #C11

12. BACKGROUND IMAGE CALL OUT: Component #C12

13. TWO EVEN COLUMNS: Component #C13

14. THREE EVEN COLUMNS: Component #C14

15. THUMBNAIL LEFT/TEXT RIGHT: Component #C15

16. THUMBNAIL RIGHT/TEXT LEFT: Component #C16

17. FOOTER: Component #C17

© 2019 Flash Memory Summit.

Conference ConCepts, Inc. a California corporation dba Flash Memory Summit™

dba NVMe™Developer Days, and dba MRAM Developer Day™

ConferenceConcepts Inc. is the owner of the conference and the trademark.

12463 Rancho Bernardo Road, #373San Diego, CA 92128-2143 USAinfo@ConferenceConCepts.com