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 a consistent brand message across all traditional and digital channels; keeping the user experience impactful and instantly understandable
03
01 BEYONDSOFT INTRO Brand Mission
BRAND GUIDELINES
OUR MISSION
At 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 VISION
We 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. .
04
01 BEYONDSOFT INTRO Brand Tone
MODERN
We are always ahead of the curve; always staying ahead of the market. Our history gives us modern day skills to rapidly innovate.
INTELLIGENT
We are hungry, nimble and agile; we understand the needs of business today.
BALANCED
We 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.
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 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.
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, typpography, 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. The lightest grey shade should only be used for special use cases such small devices, and print material.
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 for the web. The “CORP BLUE NEW” is our new adjustment to the web color for our official Corporate Blue Color.
BCI - CORP BLUE NEW HEX: #0047BA Spot Color PANTONE 2728 C
BCI - SKY BLUE HEX: #2F7DE1 Spot Color PANTONE 2727 C
BCI - TECH GREEN HEX: #D9EB0F Spot Color PANTONE 2297 C
Choosing the best set of colors for presentations, web design or print 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 ORIGINAL HEX: #003F98 Spot Color PANTONE 2728 C
BCI - DEEP NAVY HEX: #105981 Spot Color PANTONE 2161 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 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
17
04 COLOR PALETTE Symbol Space
BRAND GUIDELINES
x
x BCI - CORP BLUE NEW HEX: #0047BA Spot Color PANTONE 2728 C
Using The Symbol 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. 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 used when 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 symbo and color
x
x
BCI - CORP BLUE NEW HEX: #0047BA Spot Color PANTONE 2728 C
17 16
05
TYPOGRAPHY STYLES
01 BEYONDSOFT INTRO Brand Mission
BRAND BRAND GUIDELINES GUIDELINES
12
18
05 TRYPOGRAPHY STYLES Secondary Colors
BRAND GUIDELINES
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
19
Use Case Marketing Material Signage Official Documents External Facing
Primary
SEGOE UI ABCEDGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz
Internal Facing Power Point Documents Email
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 ICON SPACING Primary Colors
BRAND GUIDELINES
30px
When applying our icons to web interfaces or even print material, it is vital to use appropiate clear 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 composting material with the isometric boxes, but do not disrupt the clarity of the icons.
3pt stroke
1pt stroke
23
06 ICON DESIGN
BRAND GUIDELINES
? Icons
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. R 0 G71 B186 Hex #0047BA R 0 G71 B186 Hex #0047BA R 0 G71 B186 Hex #0047BA
30px
30px
30px
30px 30px
22
06 ICON COLOR Primary Colors
BRAND GUIDELINES
R 0 G71 B186 Hex #0047BA R 0 G71 B186 Hex #0047BA R 0 G71 B186 Hex #0047BA
24