BRAND GUIDELINES 2016 V.1.2
00
TABLE OF CONTENTS
01 BEYONDSOFT INTRO 02 LOGO MARK
03 LOGO CLEAR ZONES 04 COLOR PALETTE 05 TYPOGRAPHY
06 BEYONDSOFT SYMBOL 07 BEYONDSOFT DON’TS 08 ILLUSTRATIONS 09 ICONOGRAPHY 10 IMAGERY
11 ISOMETRIC
12 BUSINESS CARD 13 LETTERHEAD 14 TAKEAWAYS
15 ENVIRONMENT 16 EXAMPLES
BRAND GUIDELINES
01
01
BEYONDSOFT INTRO
BRAND GUIDELINES
02
01 BEYONDSOFT INTRO Preface
BRAND 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 our message across the world, keeping the user expeirence impactfuk, and memorable.
03
01 BEYONDSOFT INTRO Brand Mission
BRAND GUIDELINES
OUR MISSION
At Beyondsoft, our core values begin with innovation and trust which resonate with how we approach helping businesses see what is possbile.
OUR VISION
Keep a strong balance between human value and dedication to achieve ongoing success as a means to evolve, mature, and inspire.
04
01 BEYONDSOFT INTRO Brand Tone
MODERN
Always ahead of the curve, innovation is key, knowledge is power.
INTELLIGENT
We study night and day, long seminars and tech meetups are our jam.
MINDFUL
A brand that gets you from the start, a true friendship and partner that knows what to say and when to say it.
ACTIVE
Commonly know as dream chasers, we know how to burn the midnight oil effectively.
BRAND GUIDELINES
05
02
LOGO MARK
BRAND GUIDELINES
06
02 BEYONDSOFT LOGO MARK Brand Signature
BRAND GUIDELINES
07
Using shades The main form of our mark contains the logo symbol, and wordmark with a tagline. This also referred 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.
Wordmark
Logo Symbol
The minimal size of the signature should never be smaller than 180px x 45 px on screen, and 2.5in by .625in for print material.
Keep in mind
For best practices and visual consistency, please use .svg files for all web graphics such as header logos, icons and symbols.
Minimal Screen: 180px x 45px
Minimal for print: 2.5in x .625in
03
LOGO CLEAR ZONES
01 BEYONDSOFT INTRO Brand Mission
BRAND GUIDELINES
02 08
03 LOGO CLEARZONE Spacing Requirements
Logo Spacing
BRAND GUIDELINES
x
x x
The brand logo must maintain a minimum size of empty space called restricted zones domain. This restricted zone must be free of images, graphics, typepography, and other elements that would render the brand logo unclear. BEYONDSOFT font "x" corresponds to the height of the English brand logos line height of the capital “T� which is then distributed from the edge of the logo to create our resricred 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.
09
x
x
03 LOGO CLEARZONES Logo Color
BRAND GUIDELINES
Full-color version :four-color C100 M80 Y0 K0 Spot Color PANTONE 2728 C
Logo Color Full-color versions of the logo are suitable for all communication materials , including print ads , TV commercials , with products and electronic media . Highlight version Suitable for use at the scene of a dark background multimedia 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
Web Version R 0 G 71 B186 Hex #0047ba
10
03 BEYONDSOFT INTRO Logo Shades
BRAND GUIDELINES
Using shades 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 clear and crisp on devices and paper. Please ask for proofs when printing large runs. Even though these shades have been selected in terms of contrast ratio for readability , it is always best to ask for proofs.
Full-color version : four-color C13 M11 Y12 K0 Spot Color PANTONE COOL GREY 1 C
Web Use
R 217 G 217 B217 Hex #d9d9d9
Full-color version : four-color C13 M11 Y12 K0 Spot Color PANTONE COOL GREY 5 C
R 177 G 179 B179 Hex #b1b3b3
Full-color version : four-color C13 M11 Y12 K0 Spot Color PANTONE COOL GREY 9 C
R 99 G 102 B 196 Hex #63666a
Full-color version : four-color C71 M66 Y65 K72 Spot Color PANTONE NEUTRAL BLACK C
R0G0B0 Hex #000000
11
04
COLOR PALETTE
01 BEYONDSOFT INTRO Brand Mission
BRANDBRAND GUIDELINES GUIDELINES
12
12
04 COLOR PALETTE Corporate Colors
BRAND GUIDELINES
Using Corporate Colors Our brand tone is defined by our carefully chosen color palette used to express our brand image. The corporate color palette is the main stepping point when designing any branded material.Choosing the best set of colors for presentations, web design or orint material can be found starting with this selection first. This also considered the primary palette, these main set of colors are to be used first before moving into the secondary palette.
BCI - CORP BLUE NEW HEX: #0047BA Spot Color PANTONE 2728 C
BCI - CORP BLUE ORIGINAL HEX: #003F98 Spot Color PANTONE 2728 C
BCI - SKY BLUE HEX: #2F7DE1 Spot Color PANTONE 2727 C
BCI - DEEP NAVY HEX: #105981 Spot Color PANTONE 2161 C
BCI - TECH GREEN HEX: #D9EB0F Spot Color PANTONE 2297 C
BCI - DARK NAVY HEX: #0E4A65 Spot Color PANTONE 2210 C
13
04 COLOR PALETTE Secondary Colors
BRAND GUIDELINES
Analagous
Special Color
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, insight, and business.
HEX: #1CCFC9 Spot Color PANTONE 3252 C
HEX: #3FD5AE Spot Color PANTONE 3385 C
HEX: #FF4338 Spot Color PANTONE WARM RED C
HEX: #D1D3D3 Spot Color PANTONE 427 C
HEX: #008AAB Spot Color PANTONE 3135 C
HEX: #0093C9 Spot Color PANTONE 639 C
HEX: #D50054 Spot Color PANTONE STRONG RED C
HEX: #5C6670 Spot Color PANTONE 431 C
HEX: #455CC7 Spot Color PANTONE 2726 C
HEX: #00259A Spot Color PANTONE DARK BLUE C
HEX: #FCE444 Spot Color PANTONE 106 C
HEX: #1E252B Spot Color PANTONE 433 C
The analgous group contains color that would tend to be side by side on the color wheel, allowing alternate shades, and various depthsof blue color. This can also expand out into cooler colors within the spectrum. The special colors contains a column that can be referred to as complimentary colors, along with the default greys and blacks. The complimentary colors are to be used for events, custom ppts, sales decks, and other material where we need to have a different voice.
14
04 COLOR PALETTE Logo Colors
Various Logo Colors When designing powerpoints, mailers, posters or any white paper, it is best practice to use a full color option. We have a few selections you can use from that adheres till our corporate color palette, however there is flexibility in other color choices. When there is multiple pieces of media that will need specific branding , such as working with a company with a specific brand color, we can easily apply any color to the Beyondsoft Brand Logo. Ensure the logo is readable, clear, and cosistent.
BRAND GUIDELINES
BCI - CORP BLUE NEW HEX: #0047BA Spot Color PANTONE 2728 C
BCI - CORP BLUE ORIGINAL HEX: #003F98 Spot Color PANTONE 2728 C
R 0 G71 B186 Hex #0047BA
R 0 G 163 B152 Hex #003F98
BCI - DEEP NAVY HEX: #105981 Spot Color PANTONE 2161 C
R0 G 118 B 163 Hex #0076A3
BCI - DARK NAVY HEX: #0E4A65 Spot Color PANTONE 2210 C
R14 G 74 B 114 Hex #0E4A65
15
04 COLOR PALETTE Symbol Use
Brand Symbol Colors Our brand symbol plays an important role in the identity system and should have the ability to live on its own. We can use the symbol as a branding element to minify the use of a full signature. We can apply the symbol inside of shapes with clear space around, and keep things clear, crisp and legible. Things to avoid will be using the symbol on high contrast color backgrounds, outlines, or any kind of image transformation. Using our corporate color pallette as background options, the brand image will keep its consitency and emotional appeal.
BRAND GUIDELINES
16
04 COLOR PALETTE Symbol Space
BRAND GUIDELINES
x
x BCI - CORP BLUE NEW HEX: #0047BA Spot Color PANTONE 2728 C
Various Logo Colors When designing powerpoints, mailers, posters or any white paper, it is best practice to use a full color option. We have a few selections you can use from that adheres till our corporate color palette, however there is flexibility in other color choices.
x
x
When there is multiple pieces of media that will need specific branding , such as working with a company with a specific brand color, we can easily apply any color to the Beyondsoft Brand Logo. Ensure the logo is readable, clear, and cosistent.
BCI - CORP BLUE NEW HEX: #0047BA Spot Color PANTONE 2728 C
17
05
TYPOGRAPHY STYLES
01 BEYONDSOFT INTRO Brand Mission
BRAND BRAND GUIDELINES GUIDELINES
12
18
05 TRYPOGRAPHY STYLES Secondary Colors
BRAND GUIDELINES
19
Corporate
Helvetica Typography Other branding material such as powerpoints, print pieces, As the primary palette, these main set of colors are to be used first before moving into the secondary palette. The primary In order to effectively use this method, refer to this map to add the correct margins around the brand logo for best results.
ABCEDGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz
Marketing Material Signage Official Documents External Facing
Primary
SEGOE UI ABCEDGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz Secondary
Acumin Extracondensed
ABCEDGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz
Internal Facing Power Point Documents Email
05 TYPOGRAPHY STYLES Hiearchy
BRAND GUIDELINES
Follow this typography setup, and hiearchy to keep a conistent 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
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 consequat augue ac quam dictum, in malesuada turpis tincidunt. Maecenas semper felis et turpis auctor pellentesque. Curabitur mattis luctus gravida. at. Etiam lobortis pharetra efficitur..
On A Dark Background
.
LOREM IPSUM IS SIMPLY DUMMY TEXT.
Sub Head
This is just a simple header with no real meaning to it .
. Header
. Body
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 consequat augue ac quam dictum, in malesuada turpis tincidunt. Maecenas semper felis et turpis auctor pellentesque. Curabitur mattis luctus gravida. at. Etiam lobortis pharetra efficitur..
20
06
ILLUSTRATION STYLES
03 COLOR 01PALETTE BEYONDSOFT INTRO Primary Colors Brand Mission
BRAND BRAND GUIDELINES GUIDELINES
12
21
06 COLOR PALETTE Primary Colors
BRAND GUIDELINES
23
06 COLOR PALETTE Primary Colors
BRAND GUIDELINES
Illustrations
Making use of vibrant symbols, icons, illustrations will help enhance our visual communications across all media Making sure optimized icons are being uses across both print and devices are critical. Utilizing SVG for web will help keep our aesthetic consistent.
?
22
06 COLOR PALETTE Primary Colors
BRAND GUIDELINES
24