Beyondsoft Brand Identity

BRAND GUIDELINES2016 V.2.7

01 BEYONDSOFT INTRO................................. 1-5 02 LOGO MARK................................................. 6- 703 LOGO CLEAR ZONES.................................. 8-1104 COLOR PALETTE......................................... 12-17 05 TYPOGRAPHY.............................................. 18-20 06 ICONS........................................................... 21-2407 ISOMETRIC.................................................. 25-29 08 STATIOARY................................................... 30-3509 OUTDOOR.................................................... 36-3810 IMAGERY...................................................... 39-40

TABLE OF CONTENTS00 01BRAND GUIDELINES

BEYONDSOFT INTRO01 02BRAND GUIDELINES

Beyondsoft

We use this style guide as a core tool to help define, develop and manage core design elements to be used throughout our business, marketing, and social channels. Our goal is to maintain a consistent brand message across all traditional and digital channels; keeping the user experience impactful and instantly understandable

03BRAND GUIDELINESBEYONDSOFT INTROPreface

01

OUR MISSIONAt Beyondsoft, we put our customers first, we invest in our people and we keep pace with the advancements in technology. Our core values are based upon these three tenants.

OUR VISIONWe are innovative; keeping a strong balance between human value and the tools of tomorrow. We are dedicated to achieving success for all the people, companies and partners within our brand ecosphere.

04BRAND GUIDELINESBEYONDSOFT INTROBrand Mission

01

05BRAND GUIDELINESBEYONDSOFT INTROBrand Tone

01

MODERNWe are always ahead of the curve; always staying ahead of the market. Our history gives us modern day skills to rapidly innovate.

INTELLIGENTWe are hungry, nimble and agile; we understand the needs of business today.

BALANCEDA brand that’s balanced; it is progressive but it is also in tune with the multifaceted dynamics that goes into a global society.

ACTIVEWe are deliverers; we are the ones that make clients’ business goals a reality. We can burn the midnight oil and come out on point and head of the competition.

LOGO MARK02 06BRAND GUIDELINES

The main form of our mark contains the logo symbol,and wordmark with a tagline. This is also refers to the brand signature in which both the name of the logo and tagline live coherently.

The Beyondsoft wordmark uses a custom typeface and should not be altered or seperated in any way.

The minimal size of the signature should neverbe smaller than 180px x 45 px on screen, and2.5in by .625in for print material.

Keep in mind For best practices and visual consistency,please use .svg files for all web graphics such asheader logos, icons and symbols.

07BRAND GUIDELINESBEYONDSOFT LOGO MARKBrand Signature

02

Wordmark

Logo Symbol

Minimal Screen: 180px x 45px Minimal for print: 2.5in x .625in

Using shades


01 LOGOCLEAR ZONES03 08BRAND GUIDELINES

09BRAND GUIDELINESLOGO CLEARZONESpacing Requirements

03

x

x

x

x

x

Logo Spacing The brand logo must maintain a minimum size of empty space called restricted zones domain. This restricted zone must be free of images, graphics, typography, and other elementsthat would render the brand logo unclear.

BEYONDSOFT font "x" corresponds to the heightof the English brand logos line height of the capital “T”which is then distributed from the edge of the logo to create our restricted zone.

In order to effectively use this method, refer to this map to add the correct margins around the brand logo for best results found here.

10BRAND GUIDELINESLOGO CLEARZONESLogo Color

03

Full-color version :four-colorC100 M80 Y0 K0Spot ColorPANTONE 2728 C

Web VersionR 0 G 71 B186Hex #0047ba

Logo Color Full-color versions of the logo are suitablefor all communication materials, including print ads , TV commercials, with products and electronic media .

Highlight version suitable for use on a dark back-ground and multimedia version for electronic media.

We use the term highlight for when to use the brand logo on a darker background for all kinds of media. This is commonly referred to as being “Reversed” out, when applying these rules with graphic design.

File Name: bci_logo_large_rbg.png

11BRAND GUIDELINESBEYONDSOFT INTRO

Web Use Print

03

R 217 G 217 B217Hex #d9d9d9

R 177 G 179 B179Hex #b1b3b3

R 99 G 102 B 196Hex #63666a

R 0 G 0 B 0Hex #000000

Full-color version : four-colorC13 M11 Y12 K0Spot ColorPANTONE COOL GREY 1 C



Full-color version : four-colorC71 M66 Y65 K72Spot ColorPANTONE NEUTRAL BLACK C

When using the brand logo in various media, you may not always have the ability to print in full color. When it comes to photo copying, newsprint, and other sales material that does not allow for color, we can default to a selection of blacks and greys.

These colors are fully optimized to be used accordingly for both print and web usage.

One rule to follow is making sure the logo is clearand crisp on devices and paper. Please ask for proofs when printing large runs. Even though theseshades have been selected in terms of contrast ratio for readability, it is always best to ask for proofs.

The lightest grey shade should only be used for specialuse cases such small devices, and print material.

Logo Shades

Using shades


01 COLORPALETTE 04 12BRAND GUIDELINES

13BRAND GUIDELINESCOLOR PALETTECorporate Colors

Using Corporate Colors

04

Our brand tone is defined by our carefully chosencolor palette used to express our brand image.The corporate color palette is the main stepping point when designing any branded material for the web.

The “CORP BLUE NEW” is our new adjustmentto the web color for our official Corporate Blue Color.

Choosing the best set of colors for presentations, web design or print material can be found starting with this selection first.

Considered as the primary palette, this set of colorsshould be used first, before moving into the secondary palette.

BCI - CORP BLUE NEWHEX: #0047BASpot ColorPANTONE 2728 C

BCI - SKY BLUEHEX: #2F7DE1Spot ColorPANTONE 2727 C

BCI - TECH GREENHEX: #D9EB0FSpot ColorPANTONE 2297 C

BCI - CORP BLUE ORIGINALHEX: #003F98Spot ColorPANTONE 2728 C

BCI - DEEP NAVYHEX: #105981Spot ColorPANTONE 2161 C

BCI - DARK NAVYHEX: #0E4A65Spot ColorPANTONE 2210 C

14BRAND GUIDELINESCOLOR PALETTESecondary Colors

04

Using Accents To ensure we have a compelling brand image,our color choices will need to be expansive in the way we share our stories, insights, and business goals.

The analogous group contains color that would tend tobe side by side on the color wheel, allowing alternateshades, and various depth of blue colors. This can alsoexpand out into cooler colors within the spectrum.

The special color group contains a column that can be referred to as complimentary colors, along withthe default greys and blacks.

The complimentary colors are to be used for events, custom presentations, sales decks, and other materials where we need to have a different voice.

Analogous Special Color

HEX: #1CCFC9Spot ColorPANTONE 3252 C

HEX: #3FD5AESpot ColorPANTONE 3385 C

HEX: #FF4338Spot ColorPANTONE WARM RED C

HEX: #D1D3D3Spot ColorPANTONE 427 C

HEX: #008AABSpot ColorPANTONE 3135 C

HEX: #0093C9Spot ColorPANTONE 639 C

HEX: #D50054Spot ColorPANTONE STRONG RED C

HEX: #5C6670Spot ColorPANTONE 431 C

HEX: #455CC7Spot ColorPANTONE 2726 C

HEX: #00259ASpot ColorPANTONE DARK BLUE C

HEX: #FCE444Spot ColorPANTONE 106 C

HEX: #1E252BSpot ColorPANTONE 433 C

15BRAND GUIDELINESCOLOR PALETTELogo Colors

04

R 0 G71 B186Hex #0047BA

R 0 G 163 B152Hex #003F98

R0 G 118 B 163Hex #0076A3

R14 G 74 B 114Hex #0E4A65


BCI - CORP BLUE ORIGINALHEX: #003F98Spot ColorPANTONE 2728 C

BCI - DEEP NAVYHEX: #105981Spot ColorPANTONE 2161 C

BCI - DARK NAVYHEX: #0E4A65Spot ColorPANTONE 2210 C

When designing powerpoints, mailers,posters or any white paper, it is best practiceto use a full color option.

We have a few selections you can use from thatadheres till our corporate color palette, howeverthere is flexibility in other color choices.

When there is multiple media platforms thatneed specific branding, such as working witha company with a specific brand color, we caneasily apply any color to the Beyondsoft Brand Logo.

Ensure the logo is readable, clear, and consistent.

Various Logo Colors

16BRAND GUIDELINESCOLOR PALETTESymbol Use

04

Brand Symbol Colors

Things to avoid will be using the symbol on high contrast color backgrounds, outlines, or any kind of image transformation. Avoidusing multiple colors, stick to simple and clean.

These variations should be use first before designingany new symbol variations.

Using our corporate color palette as background options, the brand image will keep its consistency and emotional appeal.

17BRAND GUIDELINESCOLOR PALETTESymbol Space

04

Using The Symbol Our brand symbol plays an important rolein the identity system and should have the ability to live on its own. We can use the symbolas a branding element to minify the use of a full signature. Always use full color if possible.

The color use should always start with the CORP BLUE NEW, but can be used as black and white.

The clear space around the logo is to be usedwhen using the symbol alone without the wordmark. Application of the brand symbol will can be used for responsive design on devices, social marketing, and whenever a design calls for the symbol only.

We can use the symbol on most presentations,and in other documentation. Our identity should be able to visually communicate our brand with just a symbol and color.



x

x

x

x

17BRAND GUIDELINES


01 TYPOGRAPHYSTYLES05 18BRAND GUIDELINES

ABCEDGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz

Acumin Extracondensed


HelveticaCorporate Use Case

Primary

Secondary


SEGOE UI

Our brand contains multiple design elementsthat makeup our image, tone, and voice. Wecan ensure our voice is heard throughout our visual identity with the proper typography.

Corporate - The corporate typography we willbe using is Helvetica. Helvetica being a strong and bold family that contains a widevariety of thin and thick styles. Mainly used for external facing material, and other officialdocuments when needed.

Primary- The primary typography will be used asour most common style. We will use Segoe UIhas part of the brands eco system and easeof access. This will be utilized in almost all material.

Secondary - This is our special typeface that can be used in specialuse cases such as specified marketing material,infographics, and other external design work.

TRYPOGRAPHY STYLESSecondary Colors

05

Typography

Marketing MaterialSignageOfficial DocumentsExternal Facing

Internal FacingPower PointDocumentsEmail

Internal FacingPower PointDocumentsEmail

19BRAND GUIDELINES

TYPOGRAPHY STYLES Hiearchy

On A Dark Background

05

LOREM IPSUM IS SIMPLY DUMMY TEXT.

LOREM IPSUM IS SIMPLY DUMMY TEXT. This is just a simple header with no real meaning to it .

Lorem ipsum dolor sit amet, consectetur adipiscing elit.Quisque aliquet maximus lacus, sed mollis mauris congue ac. Fusce tortor tellus, rutrum nec malesuada et, luctus eget eros. Morbi id laoreet libero, id bibendum metus. Suspendisse consequataugue ac quam dictum, in malesuada turpis tincidunt. Maecenas semperfelis et turpis auctor pellentesque. Curabitur mattis luctus gravida. at. Etiam lobortis pharetra efficitur..

This is just a simple header with no real meaning to it .

Lorem ipsum dolor sit amet, consectetur adipiscing elit.Quisque aliquet maximus lacus, sed mollis mauris congue ac. Fusce tortor tellus, rutrum nec malesuada et, luctus eget eros. Morbi id laoreet libero, id bibendum metus. Suspendisse consequataugue ac quam dictum, in malesuada turpis tincidunt. Maecenas semperfelis et turpis auctor pellentesque. Curabitur mattis luctus gravida. at. Etiam lobortis pharetra efficitur..

.

Header

.

Sub Head

.Body

Follow this typography setup, and hiearchy to keep a consistent and well balanced message throughout all material both on the web and in print..Header - Helvetica Bold / Regular: 42 - 48pt Sub Header - Helvetica Regular : 21 - 28pt Body - Helvetica Regular : 16 - 18pt

On A White Background

20BRAND GUIDELINES

21BRAND GUIDELINESCOLOR PALETTEPrimary Colors

03 12BRAND GUIDELINESBEYONDSOFT INTROBrand Mission

01 ICONDESIGN06 21BRAND GUIDELINES

22BRAND GUIDELINESICON DESIGN06

30px 30px 30px 30px 30px

?

Getting StartedThe Beyondsoft brand tells its storythrough a rich and engaging visual language.

Our language consist of typography, color, images, icons,symbols, and other graphic elements.

We use icons and symbols to visually communicateour ideas, thoughts, actions, and stories.

Our icons have a few styles we would like make surestay consistent when designing new assets.

23BRAND GUIDELINESICON SPACINGClear Zones

06

30px

300px

240px

3pt stroke 1pt stroke

Clear SpaceWhen applying our icons to web interfacesor even print material, it is vital to use appropriateclear space on all design assets.

We have created a 30px spacing rule around the icon that should not contain any other graphics, typography or images when using them.

You are able to use the icons when compositing material with the isometric boxes, but do not disrupt the clarity, warp, or distort any of the icons.

Corner radius: 3pxStroke Weight : 2 - 3pt

24BRAND GUIDELINESICON COLORPrimary Colors

06

Using Corporate Colors The icons contain a specific stroke width and usagewhen designing new icons. We also can apply a variousfill colors to have a more detailed version.

We use simple grey shades to create depth to our iconsets. We always use full color designs, and keep our 3pt strokes.

The color pallette for these below:

R 0 G71 B186Hex #0047BA

R 0 G71 B186Hex #0047BA

R 0 G71 B186Hex #0047BA

HEX: #D9EB0FSpot ColorPANTONE 2297 C


06 21BRAND GUIDELINESCOLOR PALETTEPrimary Colors


01 ISOMETRICDESIGN07 25BRAND GUIDELINES

BRAND GUIDELINESISOMETRIC DESIGNBrand Extension

07

Beyond Expectations We have created a unique set of design elements thatwill help the Beyondsoft brand scale and evolve over time.We believe in capturing the imagination of our audiences throughout the world, and tell a captivating a story from a business perspective.

Using a custom isometric 3d model design, gives our brand depth, perspective, and movement.

This is an extension of our visual language, and can be used interchangeably throughout our marketing material, social media, custom presentation, print material, and web design.

The cube design can be used on a white background (preferred), however can be reversed to use on a solid background as well.

26

BRAND GUIDELINESISOMETRIC DESIGNBeyond Work

07 27

Cube Design We have created various rooms that visualize our work ethic, code of conduct, and concept of how things operate behind the scenes.

Our concept is, depending on how you look at it, we are able to evolve based on perspective.

BRAND GUIDELINESISOMETRIC DESIGNCompositing

07

Compositing Images We are able to combine all of our design elements to create unique one of a kind brand materials. Usingour guidelines, we can create assets and salesmaterial with the combination of typography, color, icons, and 3d asset designs.

This is an example of how we design effective and engaging sales material about our service desk solutions.

The next page will describe how to use grid systemsand document setup to create this work.

28

BRAND GUIDELINESISOMETRIC DESIGNBrochure Guides

07

Using Columns Our collateral design requires specific grid systemsto ensure clarity, and consistency. We use InDesign to then create a paper documents and various print materials.

Document Setup:

Color Mode: CYMK

11 x 8.5in

12 Column Grid

.167in Gutter

.125in Bleed

29


06








01 STATIONARYDESIGN08 30BRAND GUIDELINES

31BRAND GUIDELINESSTATIONARY DESIGNBusiness Cards

08

Our CardsThe business card design contains various elements from our visual identity. Including our brand logo, color, typography, and iconography.

We are able to identify each person's role, by team with an icon that communicates that message.

Each icon will represent a persons specific role on different teams throughout the organization. This will maintainour brand essence and overall visual language.

The icon is to be used in full color, never on a color background on the front. Flood color on the back.

12pt 7pt

1408 4th Ave., Suite 400 Seattle, WA 98101

Mobile: 206.218.8861E-mail: [email protected]: www.beyondsoft.com

Sean ClemmonsStrategic Accounts Business Group

7pt

5pt

.5in

32BRAND GUIDELINESSTATIONARY DESIGNBusiness Card Icons

06

Business Card Icons Each icon represents a team organization, lettingour infrastructure tell a visual story about who we are.

These icons represent the following, from top to bottom.

1. Sales & Account Managers2. Marketing3. Executive Level4. CEO5. Analytics6. Dev/Ops7. UX / Creative8. PMO9. Operations/Finance/ HR10. Cloud

The icons should not be any smaller than .5in or 50pxwhen applying to business cards.

Patrick PorterSales & Account Manger

Robert NewmanExecutive

Andy Carpenter PMO

Peter HuangCLOUD

Ben WangCEO

Justin RushSenior Engineer DevOps

Jen Doyle Marketing

Karlen Rothenbueler Analyst

Charles DuvalUser Experience Designer

Rachel SydneyOperations/Finance/HR

BRAND GUIDELINESSTATIONARY DESIGNExample

06 33

34BRAND GUIDELINESSTATIONARY DESIGNLetterhead

08

The Design Our letterhead design has a slightly cleaner approachthan our sales material. We use the power of white spaceand clear message through our brand logo and typography.

Modern, and Balanced

We have a quadrant concept to balance our contact info,location, and website address.

2in

9pt

35BRAND GUIDELINESSTATIONARY DESIGNLetterhead Dimensions

08

Creating the DocumentDocument Setup:

Color Mode: RGB

Logo Size: 2in x .5 in

12 Column Grid

.167in Gutter Spacing

9pt typography


06








01 OUTDOORSIGNAGE09 36BRAND GUIDELINES

37BRAND GUIDELINESOUTDOOR SIGNAGEVisibility Far

09

Our brand speaks volumes, so should ourmessage to the world. We can speak loud and clear with a proper approach to advertising,signage, and various outdoor application.

When using the logo on a full color background,we need to think about clarity.

With higher buildings, and signage location. readability is our biggest challenge.

The farther away our message is, the more vibrant our sign will be. This example shows us how to applya strong voice with a larger billboard design.

Outdoor Usage

BRAND GUIDELINES


06 38BRAND GUIDELINESOUTDOOR SIGNAGEVisibility Near

06

Here is an example of when to use a light background with our full color logo and poster design.

This shows all of our design elements working togetherto form a unique and innovative visual identity.

When we have signage close to the viewer, we can then use more detail to tell a more comprehensive story. Use this is as inspiration.

Outdoor Usage


06








01 IMAGERYUSAGE10 39BRAND GUIDELINES


06 BRAND GUIDELINES06

We use full photo backgrounds for web and presentation usage. When using full photobackgrounds make the photography choice is high resolution and contains space for body copy.

Make sure typography is legible and darker on lighterbackgrounds such as this example. We can usedarker typography for clairty on color backgrounds.

We can also use transparent overlay colors,when applying color overlays onto photos, make sureyou set the transparency to 80%.

Background Usage

Beyondsoft Brand Identity

Design

Transcript of Beyondsoft Brand Identity