OWN by Chantal van Barneveld

13 January 2015

BRAND guidelines

Ideals are a creation of a dream. Itâ&#x20AC;&#x2122;s a conception of something in its absolute perfection.

Table of Contents 3

CONTENTS

Introduction chapter 1

Logo chapter 2

Color Scheme chapter 3

Photography chapter 5

Style Elements chapter 6

Applying the Brand chapter 7

Typography chapter 4

Introduction 4

Introduction Our corporate identity is the face and personality presented to the global community. The guidelines set in this document are not meant to inhibit, but to improve the creative process. The purpose of these guidelines is to explain the use of the brand style and to reinforce consistent application of the visual elements in all communications.

Logo 5

Logo Create your own ideals is what OWN stands for. The logo is minimal, clean and fresh. Because the o (dot) is in front of the WN it signifies in oneâ&#x20AC;&#x2122;s own way. People can have their interpretation of the logo. In order to be most effective make sure the logo is always legible and visible. The logo is an universal mark across all OWN communications.

Logo 6

Logo anatomy

Construction Here you see how the logo is build. The angle that you see is 45 ยบ. An angle of 45 ยบ shows a mutal conncetion of the components.

Distance 5mm Angle 45 ยบ

The distance between the W and N is the same as the o (dot) and de W. When the distances are the same everywhere you will create a consistency in the logo. Because of this , you create a calm and clean design what is pleasant to see for the eye.

Distance 5mm

Logo 7

Logo execution

Variation

Distance 5mm

Here you see a variantion of the logo. This variation will only be used on imge backgrounds. The logo will have a transparency of 95%. The construction of the logo is the same as the standard one. The distance between the W and the N is the same as the outer corner of the circle and the outer corners of the W and N. Here also applies when the distances are the same everywhere you will create a consistency in the logo. Because of this , you create a calm and clean design what is pleasant to see for the eye.

Distance 5mm

Logo 8

Logo slogan

Slogan The slogan of OWN is: create your own ideals. The slogan can be placed on two ways.

Only the slogan The o in the word own is solid. The color of the text depends on the color of the background. Source Sans Pro Light

Under the logo The clear space betwoon the slogan and logo is 4mm. The color of the text depends on the color of the background. Source Sans Pro Light

Right side of the logo The clear space betwoon the slogan and logo is 4mm. The color of the text depends on the color of the background. Source Sans Pro Light

Create your own ideals

Distance 4mm

Create your own ideals

Create your own ideals Distance 4mm

Logo 9

Logo specifications

Logo specifications If you want to use the logo for other purposes than screen (print, paint, stickers, merchandise) use the color scheme to apply the correct color. The brand graphics package contains multiple file formats (EPS, PDF, PNG, EMF). Use the correct fileformat for the right purpose. Development use For printwork like banners, flyers and brochures we use the files: EPS (CMYK) and PDF (CMYK). Fonts are not outlined and can be manipulated. Offset printing (CMYK) For printwork like banners, flyers and brochures use the files: EPS (CMYK) and PDF (CMYK). Fonts are outlined and cannot be manipulated. Digital use (RGB) For websites, web applications and other software use the files: EPS (RGB), PNG (RGB) and EMF (RGB). Fonts are outlined and cannot be manipulated.

Logo 10

Logo minimum

Minimum clear space The minimum clear space around the logo is equal to triple the distance between the o (dot) and the W of the logo. To create the greatest impact, allow even more space around the logo. Do not allow photos, typography, or other graphic elements to enter the minimum clear space area. This clear space also applies on the variable logo.

Minimum size The minimum logo size should be used only when layout space is extremely limited. Use the logo at a larger size whenever possible. Both variations of the logo have different minimum sizes in order to be legible and retain clarity. Follow these sizes in order to keep the integrity of the logo.

Distance x = 5mm

Width = 15mm Width = 19mm

Distance x = 5mm

Logo 11

Logo background

Different backgrounds Examples Here are examples of how the primary logo deals with the alternative color backgrounds from the suggested scheme. The only ‘rules’ are that the colors do not clash and that there is a level of contrast (or difference) between logo, typography and it‘s specified backdrop.

This also applies to the logo’s placement over a photographic background, pattern, visual graphics or other media. Suggested options for usage of colors and color combinations:

On a white background

On a dark image background

In greyscale

On a light image background

On a dark background

In greyscale

Logo 12

Logo abuse

Don’t abuse the logo These are the ways not to use the logos. The overal look of the logo should not be compromised by stretching, pulling or squashing. Don’t stretch or distort

Don’t change the element size

Don’t change the color

Don’t apply eﬀects onto the logo such as drop shadows

Color Scheme 13

Color Scheme Color is an important part of brand recognition and consistency. The main color is a special green . We pair it with neutral grays that complement this green. The green color should only be used as an accent color, in addition to the colors within the assigned scheme.

Color Scheme 14

Color Scheme colors

Color scheme

Primary color Logo - accent - highlighting CMYK 72 0 50 0 RGB 50 178 152

Pantone HEX

3255 C #32B297

Secondary color Text CMYK 0 0 0 90 RGB 60 60 59

Pantone HEX

Black 6 C #3C3C3B

Third color Feature text CMYK 0 0 0 50 RGB 157 156 156

Pantone Cool Gray 9 C HEX #9D9C9C

Color Scheme 15

Color Scheme colors

Color specifications If you want to use the colors for different purposes use the color palette to apply the correct color. Variation Variations in color may occur, but try to match the OWN color scheme as closely as possible. For 4-color printing, use the CMYK values as a beginning reference. Print vendors may have their own values and formulas for matching PANTONE (PMS) colors in 4-color process, but the goal should always be to match the PANTONE standard of the OWN color scheme. Color variations may also occur on-screen as a result of different screen calibrations and/or software application being used. Offset printing (CMYK) For printwork like banners, flyers and brochures use CMYK. Digital use (RGB) For websites, web applications and other software use RGB. Other use (PMS) For other items that are printed on different materials than paper use the PMS colors. The prefered PMS is uncoated otherwise use the coated version.

Typography 16

Typography Sansation Source Sans Pro Tahoma

Typography 17

Typography history

Sansation

Tahoma

Bernd Montag

Matthew Carter

Sansation is a slightly squared sans serif typeface designed by Bernd Montag. Sansation was designed in 2008 to create a sans serif typeface with a moden feeling but also to make the font look unique in some way. This is the reason why some of the lettershapes are unsual, such as the lowercase).

Tahoma is a humanist sans-serif typeface designed by Matthew Carter for Microsoft Corporation. It consists of two Windows TrueType fonts (regular and bold), and was created to address the challenges of onscreen display, particularly at small sizes in dialog boxes and menus. The bold weight was based upon a double pixel width, rendering it closer to a heavy or black weight. It has a distinct advantage over such fonts as Arial for use with technical material in that uppercase “I” (eye) is distinguished from lowercase “l” (ell).

Source Sans Pro Paul D. Hunt Source sans pro is a serif font. It’s Adobe’s first open source font family, primarily intended as a font for user interfaces designed by Paul D. Hunt. The font is supported by Google webfonts and is therefore suitable for the web. The interesting thing about this font is that it’s modern and sleek. The font is simplified to make it easy and clear to read. Therefore this font is good to use for both plain text as headings. Its wide range of weights, ranging from extra light, light, regular, italic, semibold, bold, to black and extended provide the versatility and flexibility necessary for diverse design needs.

The Tahoma typeface family was named after the Native American name for the stratovolcano Mount Rainier (Mount Tahoma) which is a prominent feature of the southern landscape around the Seattle metropolitan area

Typography 18

Typography

Commercial desktop use, @font-face embedding, Ebooks and PDFs, Applications

primary typeface

Sansation (Headings)

abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ 1234567890 ! @ # $ % ^ & * _ - + ¡ € : ; { } [ ] ( ) µ ¿ ? / \ ‘ ` ~ © ® TM àáâãäåæçèéêëìíîïñòóöõôøœùúü ÀÁÂÃÄÅÆÇÈÉÊËÌÍÎÏÑÒÓÖÕÔØŒÙÚÜß

LIGHT ITALIC REGULAR BOLD BOLD ITALIC

Typography 19

Typography

Commercial desktop use, @font-face embedding, Ebooks and PDFs, Applications

secondary typeface

Source Sans Pro (Print, web)

EXTRA LIGHT EXTRA LIGHT ITALIC LIGHT LIGHT ITALIC REGULAR ITALIC SEMIBOLD SEMIBOLD ITALIC BOLD BOLD ITALIC BLACK BLACK ITALIC

Typography 20

Typography

Commercial desktop use, @font-face embedding, Ebooks and PDFs, Applications

third typeface

Tahoma (Print, web)

REGULAR BOLD

Typography 21

Typography

Sample type specimen

usage Chapter title Sansation Bold CMYK 0 0 0 90

Feature text Source Sans Pro Light CMYK 0 0 0 50

Heading Sansation Bold CMYK 72 0 50 0 Subheader Source Sans Pro Light Italic CMYK 0 0 0 90 Body text Source Sans Pro Light CMYK 0 0 0 90

Size 26 pt. Leading 32 pt.

BIG, BOLD HEADLINES Fusce vestibulum fermentum ipsum eu varius. In vel turpis lobortis ex finibus facilisis et non odio. Donec pharetra dolor ut hendrerit aliquam.

Size 10 pt. Leading 15 pt.

Bold concise headings Size 13 pt. Leading 17 pt Italic concise subheadings 10 pt. Leading 15 pt.

Size 10 pt. Leading 15 pt.

Vivamus faucibus ullamcorper ipsum, nec fringilla metus pellentesque id. Praesent facilisis ultrices scelerisque. Fusce tempus ex vitae molestie consequat. Fusce interdum sem at nulla dictum semper. Aliquam dignissim at nulla vel gravida.

Photography 22

Photography On the next page are a set of photos with indicates the style of the photography that will be used. The style is defined as mysterious and fantastical, if possible light photoâ&#x20AC;&#x2122;s. It has to arouse some curiosity. People can have there own ideas of what the photo could mean. In most of the photoâ&#x20AC;&#x2122;s there will be a part of the object shown.

Photography 23

phoTography set photos

Style Elements 24

Style Elements Graphic identity is more than just a logo, typeface and colors. An important part of the graphic look and feel are the use of style elements. These are circles and straight lines used for different purposes. Using this in the right way it provides a subtle but clean look throughout all our communications.

Style Elements 25

STyLe eLemenTS usage

Sample style element use

Circle solid Placed before a chaptertitle or number. Or used over an image with text. CMYK 72 0 50 0 RGB 50 178 152

Circle transparent Used over an image Circle is centered over the image and contains text. CMYK 72 0 50 0 RGB 50 178 152 Transparancy = 90% Text is always white Source Sans Pro Light Minimal size 6pt.

Leading 8pt.

Chapter title (except for the chapter title on the main chapter page!) 1

Ideals are a creation of a dream. Itâ&#x20AC;&#x2122;s a conception of something in its absolute perfection.

Style Elements 26

Style Elements usage

Sample style element use

Button Regtangle or a circle, depends on the significance of the button. Text is outlined in the circle button when itâ&#x20AC;&#x2122;s over an image. Solid filled with the green color with white text. CMYK 72 0 50 0 RGB 50 178 152

Button regtangle Regtangle with rounded corners of 2px. Solid filled with the green color with white text.

Button circle Text is outlined in the circle button when itâ&#x20AC;&#x2122;s over an image. Solid filled with the green color or in grayscale depends on the significane. With a character/icon with an action like download The meaning of the button will be placed on the right side of to the circle or under the cirle. The clear distance is 4mm. The color of the text will be gray. CMYK 0 0 0 90 RGB 60 60 59

Button

Distance 4mm

Download

Distance 4mm

Style Elements 27

Style Elements usage

Sample style element use Chapter Title Lines The line will be solid color or used in greyscale and 0,25px thick Color CMYK 72 0 50 0 Gray CMYK 0 0 0 50

RGB 50 178 152

RGB 157 156 156

The line will be used as a divider and the chapter titles will be in the middle of the line. The distance between the line and text is 8mm.

Distance 8mm

Chapter Title Distance 8mm

Applying the Brand 28

Applying the Brand The logo should stand out in every situation. The next pages shows the usage of our brand in various situations.

Applying the Brand 29

appLyIng The BranD stationary

Stationary Here you will see how the stationary will look like. This style will be used at all times.

Applying the Brand 30

appLyIng The BranD website design

Website Here you see how the website has to look like. What kind of atmosphere it must radiate.

Link https://www.own.avec-design.nl

Applying the Brand 31

appLyIng The BranD social media

Facebook Here you will see how the facebook page has to look like. The header image can be changed, but the style of the photography has to be kept.

Link https://www.facebook.com/pages/OWN/1013537635328100

Applying the Brand 32

appLyIng The BranD social media

Behance Here you will see how the behance page has to look like. You can add projects, but every project has as beginning image a logo. Every image in the project file is a mockup. If you keep this style it will always look neat.

Link http://on.be.net/1KzfPVv

Applying the Brand 33

appLyIng The BranD social media

ISSuu In ISSUU you will see the brandbook. Because it is in ISSUU you have the brandbook at all times on your side. It also allows other persons to see into the brandbook for inspiration.

Link http://issuu.com/chantalvanbarneveld/docs/brandbook_own/0

Applying the Brand 34

appLyIng The BranD photo poster

poster Here is an example of how a photo poster will look like with just the branding applied to it.

A FINAL NOTE Now that you went through this document we hope that you have a clear idea of what the OWN brand is. We think this is a flexible system that allows you to be creative. So start creating!