Design brand guidelines

Design

GUIDELINES LOGO & IDENTITY FOR BETH ERIKSON created on June 2018

DESIGN STUDIO IMAGEAREA 125 Herold Avenue, Anywhere 5624 Winterland

WWW.DESIGN-STUDIO.COM

DESIGN GUIDELINES

FOR BETH ERIKSON

Design guidelines

CONTENTS

INTRODUCTION About this brand

04 OUR BRAND 3

01 THE LOGO

The letterhead

26

The envelope

27

The business cards

28

Merchandising products

29

The usage of the logo

6

The logo clearspace

8

Color variations

9

05 GRID SYSTEMS

Incorrect use and correct use

8

Mobile web design

32

Sizes and using the artwork

9

Web grid systems

34

Print grid system

35

Place text on photo

36

02 THE COLOR Logo color palette

14

Secondary color palette

15

03 TYPOGRAPHY The primary & secondary typefaces

18

The typography

22

06 ADDITIONAL Image / Design moodboard

40

Corporate icons

44

The checklist

45

Frequently asked questions

46

You never get a second chance to make a first impression.

(Andrew Grant, Even)

2

DESIGN GUIDELINES

About this brand This identity guideline is a tool designed to project the image, values, and aspirations behind the brand.

It is the cornerstone of all communication efforts and must be followed carefully to ensure a consistent style and quality of presentation. Every participating institution is responsible for representing or coordinating the use of the brand along with an individual institution’s brand.

Jocelyn Valentine Creative Director

3

DESIGN GUIDELINES

FOR BETH ERIKSON

01.

4

DESIGN GUIDELINES

THE LOGO Our logo is the touchstone of our brand and one of the most valuable assets. We must ensure its proper usage.

5

DESIGN GUIDELINES

FOR BETH ERIKSON

The usage of

THE LOGO

THE BETH ERIKSON LOGO COMBINES 3 ELEMENTS: The 2 initials B & E in the center,the tagline and the grunge circle behind it. These elements should never be changed. Position, size and color, along with the spatial and proportional relationships of the Beth Erikson logo elements, are predetermined and should not be altered. Used consistently, they will reinforce public awareness of the company.

Different versions of the logo

Blush Rose with 70% color

6

Blush Rose 50% color

Logo without background

DESIGN GUIDELINES

The 3 elements of the logo

The logo background

The logo initals

The logo wordmark

THE VISUAL IDENTITY STANDARDS ARE BASED ON THESE PRINCIPALS Logo consistency

Consistency of application

Consistency of quality

Maintaining logo elements typeface, color, proportion, clear space and size guidelines.

Maintaining logo placement and prominence across all communications.

Ensuring that all uses communicate a consistant message of quality and excellence.

7

DESIGN GUIDELINES

FOR BETH ERIKSON

The logo

CLEAR SPACE The BETH ERIKSON logo requires serparation from the other elements around it. The space required on all sides is roughly eqivalent to the initial letters of the logo type. It never should be less than that. The logo must always fit into the clearspace area and can not be intervened by other graphical elements which could hinder legibility of the brand.

Please note that text or pictorial figures, which have strong impact or impression, should not be placed near the logo, even though you keep the isolation area blank.

Whenever you use the logo, it must be surrounded with clearspace to ensure its visibility.

8

DESIGN GUIDELINES

The logo

COLOR VARIATION

Reverse logo color

Black and white logo version

Black without background

Sometimes, often due to production costs, you need another color or only one color of ink is available and so the Logo must be reproduced using only one color. In this scenario, the logo must be used following the convention of using a light color type on a dark background or in a dark color type on a light background. You must honor the BETH ERIKSON color palette when possible, using black o rgray if necessary.

9

DESIGN GUIDELINES

FOR BETH ERIKSON

Incorrect and

CORRECT USE Please note: The logo cannot be changed!

Although creativity is appreciated please do not alter the logo in anyway!

Don’ts

DON’T use stroke shadows

DON’T use non-approved colors

NEVER change the proportions

Do’s

You CAN rotate the logo, but not more then 7°

10

You CAN use the logo without the background

You CAN use it on a solid background

DESIGN GUIDELINES

Minimum sizes of the logo There are no predeterminded sizes for the logo. Scale and proportion should be determined by the available space, function and visibility. In print the minimum size is 35 mm width, for the logo without background it is 30 mm width.

With background: 35 mm witdh

Without background: 30 mm witdh

Using the artwork This page explains the file naming system for the artwork of the various versions of the logotype. The filename contains all key information to identify the appropriate logo version for each application. The logotype is supplied in EPS and PNG file formats.

For printed documents use always the EPS files. PNG files should only be used for the web applications or if you are using Mircosoft Word or Powerpoint. Please make sure that the correct artwork for each application is used.

BETH-ERIKSON_ LOGO_FIRSTCHOICE_CMYK.EPS Logotype version - first choice - second choice

Colorspace File format - CMYK - RGB - grayscale - black

- EPS - PNG -JPG

11

DESIGN GUIDELINES

FOR BETH ERIKSON

02.

12

DESIGN GUIDELINES

THE COLOR With 93% of customers influenced by colors and visual appearance, make sure you pick the right colors for your company.

13

DESIGN GUIDELINES

FOR BETH ERIKSON

Logo

COLOR PALETTE USE OF COLOR FOR THE PRINTED & DIGITAL LOGO. The following palette has been selected for use in BETH ERIKSON communcations. Lighter tints of these colors are also allowed, but the Logotype may only be used with a 100% tint. The primary colors include a blush rose tone, that embodies the feminine site of the company. The additional color is a dark brown wich harmonized perfectly to the rose and gives the whole a warm and gently touch.

14

Color 1

Color 2

BLUSH ROSE

BURNT SIENNA

COLOR CODES

COLOR CODES

CMYK

CMYK

0 / 15 / 6 / 0

58 / 60 / 44 / 44

RGB

RGB

252 / 222 / 222

80 / 70 / 80

HEX

HEX

#fcddde

#50454f

Pantone

Pantone

698 C

439 C

DESIGN GUIDELINES

Secondary

COLORS The palette allows the addition of secondary colors to enrich the BETH ERIKSON visual identity as a whole. Lighter tints of these colors are also allowed. These colors are complementary to our official colors, but are not recognizable identifiers for our company. Use the all colors sparingly, except the fawn color.

FAWN

SOFT PLUM

CMYK 58 / 60 / 44 / 44 RGB 80 / 70 / 80 HEX #50454f

CMYK 58 / 60 / 44 / 44 RGB 80 / 70 / 80 HEX #50454f

ASH ROSE

DARK GRAY

CMYK 58 / 60 / 44 / 44 RGB 80 / 70 / 80 HEX #50454f

CMYK 58 / 60 / 44 / 44 RGB 80 / 70 / 80 HEX #50454f

15

DESIGN GUIDELINES

FOR BETH ERIKSON

03.

16

DESIGN GUIDELINES

TYPOGRAPHY Typography is 95% of design – it’s a driving force in all forms of communication art and it is very important

17

DESIGN GUIDELINES

FOR BETH ERIKSON

The primary

TYPEFACE DESIGNER by mistifonts.com (for personal use)

DATE CREATED / RELEASED 13 January 2015

Font Autumn in November

18

Aa 123

DESIGN GUIDELINES

ABCDEFGH IJKLMNOP QRSTUVWX YZ abcdefghijklmnopqrstuvwxyz 1234567890 Autumn in November regular

DOWNLOAD THE FONT

https://www.dafont.com/de/autumn-in-november.font

http://www.fontspace.com/mistis-fonts

19

DESIGN GUIDELINES

FOR BETH ERIKSON

The secondary

TYPEFACE DESIGNER

by Julieta Ulanovsky (Principal design)

DATE CREATED / RELEASED Updated November 2017

Font Montserrat

Aa 123 20

DESIGN GUIDELINES

ABCDEFGHIJKL MOPQRSTUVWX YZ ABCDEFGHIJKLMNOPQRSTUVWXYZ 1234567890 Montserrat light Montserrat regular Montserrat black

DOWNLOAD THE FONT

https://www.fontsquirrel.com/fonts/montserrat

https://fonts.google.com/specimen/Montserrat

21

DESIGN GUIDELINES

FOR BETH ERIKSON

The

TYPOGRAPHY HEADING TYPOGRAPHY The primary typeface for heading on printed materials is Autumn in November. The alternative for web safe usage is the secondary font Montserrat. For the web the font Autumn in November will only be used as graphic files.

The quick brown fox Autumn in November regular, 44 pt

SUBHEADING TYPOGRAPHY The primary typeface for subheading on printed and online materials is the font Montserrat. With 3 levels of typography, the font size generally starts out largest on top (level one; your most important information) and decreases in size as you move down the page.

THE QUICK BROWN FOX Montserrat light, 30 pt, uppercase

THE QUICK BROWN FOX Montserrat black, 20 pt, uppercase

THE QUICK BROWN FOX Montserrat regular, 14 pt, uppercase, spacing 200

22

DESIGN GUIDELINES

Body typography The primary typeface for body copy on printed materials is the font Roboto condensed. The typeface is to use on all documents. Typical applications include letters, presentations, websites and documents.

Roboto condensed Roboto condensed regular

Roboto condensed italic

Roboto condensed bold

ABCDEFGHIJKLMOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890

ABCDEFGHIJKLMOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890

ABCDEFGHIJKLMOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890

RULES This serif font is available in 4 weights. We use 3 of them. The regular, italic and bold versions.

23

DESIGN GUIDELINES

FOR BETH ERIKSON

04.

24

DESIGN GUIDELINES

THE STATIONARY When it comes to developing the stationery, consistency is the key for all layouts and designs

25

DESIGN GUIDELINES

FOR BETH ERIKSON

The

LETTERHEAD

Clean and simple, we designed our stationary to align with our visual system. The letterhead features the logo in the middle of the top with the business contact information on the opposite site.

26

DESIGN GUIDELINES

The

ENVELOPE

The envelope will be used for all official contact and communication of our company. These are the approved layouts.

Other formats are also allowed.

27

DESIGN GUIDELINES

FOR BETH ERIKSON

The

BUSINESS CARD Beth Erikson GRAPHIC DESIGNER 123 Street Name, City 45 +49 123.456.234.56 contact@beth-erikson.com w w w. b e t h - e r i k s o n . c o m

The business card will be used for all official contact and communication of our company. These are the approved layouts.

The cards will always be double sided.

28

DESIGN GUIDELINES

Merchandising

PRODUCTS

These are the apporoved layouts for a paper bag, pencil and price tags.

29

DESIGN GUIDELINES

FOR BETH ERIKSON

05.

30

DESIGN GUIDELINES

GRID SYSTEMS Using a grid system is one way to achieve a level of consistency that would be otherwise extremely difficult to master

31

DESIGN GUIDELINES

FOR BETH ERIKSON

Mobile

WEB DESIGN

LOGO PLACEMENT To place the BETH ERIKSON logo please use the approved grid system. It always should be on the top and center.

32

DESIGN GUIDELINES

LOGO PLACEMENT To place the BETH ERIKSON logo please use the approved grid system. It always should be on the top and center.

33

DESIGN GUIDELINES

FOR BETH ERIKSON

Web

GRID SYSTEM Use on different devises.

Grid systems are used for creating page layouts through a series of rows and columns that house your content. Here are some examples. The Bootstrap 3 grid system has four tiers of classes: xs (phones), sm (tablets), md (desktops), and lg (larger desktops). Please follow the rules, to have a consistant visual appearance.

The layout is based on a 12 columns bootstrap grid system.

34

DESIGN GUIDELINES

Print

GRID SYSTEM Use on DIN A4 and letter format. The grid is used as a guide for how to place text, photos and advertisements on the page. The font size that you use should be proportionate to the grid. Using a font that is too large will cause odd hyphenation and breaks, which can be difficult to read and using a typeface that is too small can cause strain on a reader trying to get from the start of a line to the end. The 12 column grid is always the basic. For special prints, a 6 column grid is also allowed.

Use 2, 3, 4, 6, 8, 10 or 12 columns for the layout

35

DESIGN GUIDELINES

FOR BETH ERIKSON

Place text

ON PHOTO

36

DESIGN GUIDELINES

Place text on images according to the examples on these pages. It is important to place the text on solid color parts of the background. It is not allowed to use text on complex backgrounds, because it will reduce the readability. Colors for the text are Dark Gray and Burnt Sienna. Other colors are not allowed. Use the background color of the logo like in the examples.

37

DESIGN GUIDELINES

FOR BETH ERIKSON

06.

38

DESIGN GUIDELINES

ADDITIONAL An organization, no matter how well designed, is only as good as the people who live and work in it.

39

DESIGN GUIDELINES

FOR BETH ERIKSON

Image

MOODBOARD

Examples and rules Requirements: Use desaturated colors with a scandinavian feel For photos with people use only single persons (max. 2 persons if required.

All photos should be light and minimal. Use pastel and gray colors.

Use the optimal image detail, so that it looks like zoomed into the picture.

Also allowed are grayscale images for print and web Use of imagery that demonstrates creativity, nature or persons.

Use CMYK (RGB for web) modus, when the background is white or the colorscheme fits with the colors of BETH ERIKSON Use grayscale images, when the colorscheme doesn’t fit with the background.

Use grayscale images with color overlay, when you want to write some text on it.

40

DESIGN GUIDELINES

BOTTOM: These are the 3 color modes, that are allowed. CMYK (or RGB for web), grayscale and Blush Rose color overlay.

41

DESIGN GUIDELINES

FOR BETH ERIKSON

Design

MOODBOARD GLITTER AND FOIL Palette of Blush Rose glitter, foil and marble textures

BACKGROUND TEXTURES Different blush textures usable as backgrounds

42

DESIGN GUIDELINES

Suitable colorshemes

01 Blush pink

02 Fawn

03 Ash rose

o4 Soft plum

05 Burnt Sienna

06 Dark brown

43

DESIGN GUIDELINES

FOR BETH ERIKSON

Corporate

ICONS The icons are pictograms displayed on the screen or print layout in order to help to navigate through the content. The icon itself is a comprehensible symbol of a software tool, function, or a data file, accessible on the system and is more like a traffic sign than a detailed illustration of the actual entity it represents. The icons are used with the square background or without any background in print and web. They are available in 2 different color combinations.

ICON SIZES

100%

125%

150%

200%

ICONS WITHOUT BACKGROUND

ICONS WITH A SOLID BACKGROUND

44

DESIGN GUIDELINES

The

CHECKLIST Best to have a checklist. Then you know you’ve done everything perfectly!

01 The logo Only use approved versions of the logo. Please check that you have respected the minimum size and exclusion zone requirements. The logo should not appear on color backgrounds without being reversed out.

02 Color Please make sure that only your approved primary and secondary colors are used.

03 Typography Use the font Montserrar for all top headings. For body text and smaller headings use font Roboto. Both fonts are also available for web. Only for Print use the font Autumn in November for the main heading.

04 Imagery Use desatured photos with vintage color, grayscale photos or photos with color overlay. Please follow the rules.

05 Print materials Please use the provided grids and approved layouts for all printed products and the stationery.

To provide feedback, share informations or seek answers to questions you may have about this brand, please contact: Jane Whitemore

Eugene Bundy

Brand development manager 125 Herold Avenue, Anywhere 5624 Winterland United States

Brand communication manager 125 Herold Avenue, Anywhere 5624 Winterland United States

Phone Fax E-Mail

Phone Fax E-Mail

+22 (0) 44 34 5678 68 +22 (0) 44 34 5678 70 whitemore@your-company.com

+22 (0) 44 34 5678 69 +22 (0) 44 34 5678 70 bundy@your-company.com

45

DESIGN GUIDELINES

FOR BETH ERIKSON

Frequently asked

QUESTIONS 01 Asked Question Otatiure ribearior solorru mquaerunt et inus sum eic te volutem sequo tem dem harchil ilias moloribus moluptaspit expero endis ma verchil enempel loribusapel min re consequam quam estia cone molorum et lab in plandiatio eum nonsequ untusandae que vid ma sunt.

02 Asked Question Sam dolore est, officaborat expedi ullianis eat re consequi bea nim quis cus as pra provid quas et ex et, quia qui rem est, cusam et volectorum iment alique de ducia sae doluptur, ipsaper speroreium ute cum quas aliquassi tem quatus quasima nit.

03 Asked Question Occusandus abor aniati volorio voluptat apid ut arundis aut acea cori ut erum consed mollicim quae venis estores evel inctior porerem porepud aernatius et am aut escidenisqui odistiorum esequi des eaqui nam venisitio is essusapedit, soluptae experita vid quia inciam que sequi de et as de vit officipsa volupit, cusdaer ibusam quas pro doluptius cusdam lia nemquam fugitionet ate prehent, occus.

04 Asked Question Perum exped modis demolore, es delesti atempor epedis siti cuptatur same estrum quaesci voluptatus minctur audae sitiamet facescient digenda am eos sim re non preperi bercidem sed unt dolorum as in num eum volo ide commolorro ma venim explitatis culleni molesequid quisqui occabo. Occusandus abor aniati volorio voluptat apid ut arundis aut acea cori ut erum consed mollicim quae venis est.

05 Asked Question Am acerest empore es as deria volupta tibero exceate poribus daepudit destiasi nimus volut in perum faccum, te perum exped modis demolore, es delesti atempor epedis siti cuptatur same estrum quaesci voluptatus minctur audae sitiamet facescient digenda am eos sim re non preperi bercidem sed unt dolorum as in num eum .

If you need more help, just contact the support: help@design-studio.com

46

DESIGN GUIDELINES

Work hard in silence.

Let success make the noise.

Beth Erikson (graphic designer)

47

WWW.DESIGN-STUDIO.COM