Brand Cô Thắm

BLUESEA DESIGN

|

Ve r s i o n 2 . 0

|

Sep 2020

Brand Guidelines LO GO & I DENT I TY FO R CO T HA M SAI GON

BLUE SEA AGENCY 11/74 An Trạch, Đống Đa, Hà Nội Phone + 84 79 6300 655 | E-Mail Blueseadesign96@gmail.com | Web blueseagency.vn

CLIENT: CO THAM SAI GON

BLUESEA AGENCY

BRAND GUIDELINES

Good design is obvious Great design is transparent.

(Andrew Grant, Even)

2

CO THAM SAI GON

TABLE OF CONTENTS

01.

INTROD UCTION

4

02 . THE LOGO

6

03. THE TYPOGRAPHY

12

04 . COLOR SYSTEM

16

05. PRINTED

20

06 . W EB D ESIGN

28

07. THE IMAGERY

32

08 . AD DITIONAL

36

3

ABOUT THIS BRAND

4 BLUESEA AGENCY

Information about this brand

01. INTRODUCTION

CLIENT: CO THAM SAI GON

BRAND GUIDELINES

CO THAM SAI GON

About this brand A unified and consistent use of these guidelines is one of the key ways by which we will visibly distinguish and strengthen the equity and hence the value of our brand over the medium and long-term.

These guidelines are designed to help everybody involved in the production of our communications and they also play an important role in building our brand. Please take time to read and understand them: The design principles have been carefully considered and developed to ensure that our visual identity is consistent all around the world. They will continue to evolve as our requirements grow to become a fully comprehensive guide for all identity applications.

Bluesea Design Graphic designer

5

7

BLACK & GRAYSCALE

8

CONSTRUCTION & CLEARSPACE

6

INCORRECT USES

10

MINIMUM SIZES

11

USING THE ARTWORK

11

9

Our logo is the touchstone of our brand and one of the most valuable assets.

LOGO & USAGE

02. THE LOGO

CLIENT: CO THAM SAI GON

BLUESEA AGENCY

BRAND GUIDELINES

CO THAM SAI GON

Logo & usage Co Tham Sai Gon logo combines three elements: Co Tham lettering, the tagline and the logo icon. These elements should never be changed. Position, size, and color, along with the spatial and proportional relationships of the creative minds logo elements, are predetermined and should not be altered.

The primary color option for our logo is anthrazit . It is intended to be used on lighter backgrounds and images in order to maintain legibility.

Another acceptable color option is to reverse the logo out to Light Yellow darker backgrounds and images.

7

BRAND GUIDELINES

Black & grayscale

You must honor the CREATIVE MINDS Logo palette when possible, using black or white if necessary.

CLIENT: CO THAM SAI GON

BLUESEA AGENCY

Sometimes, often due to production costs, 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. The logotype and the symbol must be clearly distinguishable from the background color.

100% black color

8

70% black color

100% white color

CO THAM SAI GON

Construction & clearspace Co Tham Sai Gon logo requires serperation from the other elements around it. The space required on all sides is roughly eqivalent to the letter width of the logo type.

1/2 x

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.

1/2 x

9

BRAND GUIDELINES

Incorrect uses Please note:

CLIENT: CO THAM SAI GON

BLUESEA AGENCY

The logo cannot be changed! Although creativity is appreciated please do not alter the logo in anyway!

DON’T use stroke shadows

10

DON’T use non-approved colors

NEVER change the proportions

DON’T use outlines

CO THAM SAI GON

Minimum sizes

Using the artwork CoTham_ logo_firstchoice_CMYK.eps Logotype version

Colorspace File format

- first choice

- CMYK

- EPS

- second choice

- RGB

- PNG

- grayscale -JPG - black The Logo: Ă˜ 25 mm

The sympol: Width12 mm

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 Ă˜ 25 mm, for the symbol it is width 12 mm

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.

11

12 THE PRIMARY TYPEFACE 13

THE SECONDARY TYPEFACE 14

TYPOGRAPHY & HIERACHY 15

BLUESEA AGENCY

Typography is 95% of design – it’s a driving force in all forms of communication art.

03. TYPOGRAPHY

CLIENT: CO THAM SAI GON

BRAND GUIDELINES

CO THAM SAI GON

The primary typeface iCielBC Portico ABOUT THE FONT

Portico is a display typeface with a ton of styles. It includes uppercase multilingual letters, numbers and punctuation. It is suitable for a lot of different designs and layouts. In addi-

tion, you may use the font for posters, leaflets, flyers and much more.

amazing for bold large titles seen on billboards or posters.

The font includes so many features. Furthermore, the display font is

ABCDEFGH IJKLM NOPQRSTUVWX YZ abcdefghijklmnopqrstuvwxyz 1234567890 !�$%&/()=?+*#

Aa 13

BRAND GUIDELINES

The secondary typeface I C I E L BC Q U O T E S SC R I P T AL T

CLIENT: CO THAM SAI GON

BLUESEA AGENCY

ABOUT THE FONT

14

A new trio font with script and sans font. This font is perfect for people looking for vintage aesthetic or handdrawn logo. Introducing Quotes Font. It’s designed and shared by

Arendxstudio. QUOTES consists of 3 font files & 3 different type styles. This is perfect for Logotypes & Type pieces. There needs to be consistency in style, texture, weight, etc.style, texture, weight, etc.

ABCDEFGH IJKLM NOPQRS T UV W X YZ abcdefghijklmnopqrstuvwxyz 1234567890 !Ӥ$%&/()=?+*#

Aa

CO THAM SAI GON

Tpography & hierachy Heading 1 / iCielBC Portico , 36 pt bold

The quick brown fox Heading 2 / iCielBC Portico, 24 pt bold

The quick brown fox Heading 3 / iCielBC Portico, 18 pt bold

The quick brown fox Heading 4 / iCielBC Portico, 12 pt bold uppercase, spacing 100

T h e q ui c k br o w n f o x Heading 5 / Lato, 9 pt bold uppercase, spacing 200

The quick brown fox Body Montserrat (8 pt regular) The quick brown fox

RULES Size is the simplest way to create contrast between different typographic elements in your design. With 5 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.

Layout, for both print and screen, is one of the most important aspects of graphic design.

This fonts should be used in all creative minds communications to project a consistent visual identity. This includes promotional materials, advertising, digital assets, and printed materials.

Body Copy Montserrat (10 pt regular) The quick brown fox

15

16 LOGO COLOR PALETTE 17

SECONDARY COLORS 18

USE OF COLORS 19

BLUESEA AGENCY

With 93% of customers influenced by colors and visual appearance.

04. Color system

CLIENT: CO THAM SAI GON

BRAND GUIDELINES

CO THAM SAI GON

Logo color palette The primary colors include a nthrazit color and apastel blue, that embodies the creativity and dynamic of the company. The additional colors are gray and white to underline the seriousity of your business. Lighter tints of these colors are also allowed, but the Logotype + background may only be used with a 100% tint.

Yellow

White

COLOR CODES

COLOR CODES

CMKY - 20 / 0 / 0 / 82

CMKY - 16 / 4 / 0 / 0

RGB - 68 / 76 / 80

RGB - 21 / 235 / 249

HEX - #444c50

HEX - #ddebf9

Pantone - 433 C

Pantone - 656 C

HKS Process - 97 N

HKS Process - 39 N (40ww%)

17

BRAND GUIDELINES

Secondary colors 02

BLUESEA AGENCY

01

CLIENT: CO THAM SAI GON

01 RED COLOR CODES

COLOR CODES

CMKY - 21 / 20 / 25 / 0

CMKY - 16 / 8 / 0 / 0

RGB - 211 / 201 / 191

RGB - 220 / 228 / 245

HEX - #d3c9bf

HEX - #dce4f5

Pantone - 433 C

Pantone - 433 C

HKS Process - 97 N

HKS Process - 97 N

03

03 GREEN COLOR CODES CMKY - 4 / 16 / 10 / 0 RGB - 244 / 223 / 222 HEX - #f4dfde Pantone - 433 C

18

HKS Process - 97 N

02 ORANGE

CO THAM SAI GON

Color wheel US E OF COLORS CMYK - use primarily to produce print applications with images.

Example - brochure, flyer, poster etc.

RGB/HEX - REG is used for all screen based applications.

Example - websites, apps Pantone / HKS- use for print with only a few colors and no images.

Example - business card, envelope etc.

19

20 BLUESEA AGENCY

05. PATTERN

CLIENT: CO THAM SAI GON

BRAND GUIDELINES

CO THAM SAI GON

21

21

BUSINESS CARDS

22

THE ENVELOPE

23

PRINT GRID SYSTEM

24

PLACE TEXT ON PHOTO

25

MERCHANDISING 26

22

Consistency is the key for all layouts and designs

THE LETTERHEAD

06. Printed

CLIENT: CO THAM SAI GON

BLUESEA AGENCY

BRAND GUIDELINES

CO THAM SAI GON

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.

Parameter DIMENSIONS: DIN A4 / 210 x 297 mm WEIGHT: 100 g/m² PAPER: Offset white PRINT: HKS or Pantone

23

BRAND GUIDELINES

Business card

CLIENT: CO THAM SAI GON

BLUESEA AGENCY

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.

Parameter DIMENSIONS: DIN A4 / 210 x 297

24

mm

WEIGHT:

100 g/m² PAPER: Offset white PRINT: HKS or Pantone

CO THAM SAI GON

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

Other formats are also allowed.

25

CLIENT: CO THAM SAI GON

BLUESEA AGENCY

BRAND GUIDELINES

Flyer

26

CO THAM SAI GON

Place text on photo 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 Anthrazit and Pastel Blue. Other colors are not allowed. Use the background color of the logo like in the examples.

Banh Mi NGON

27

CLIENT: CO THAM SAI GON

BLUESEA AGENCY

BRAND GUIDELINES

Sample Menu

28

CO THAM SAI GON

Coffee cup

29

CLIENT: CO THAM SAI GON

BLUESEA AGENCY

BRAND GUIDELINES

Paper cup

30

CO THAM SAI GON

Plastic cup

Bread Package

31

BRAND GUIDELINES

Merchandising

CLIENT: CO THAM SAI GON

BLUESEA AGENCY

When used on t-shirts, aperbags etc. any of the approved logos can be used. The symbol may also be used separately from the lettering. For the background use always winter blue, pastel blue, soft rose or anthrazit.

Other colors are not allowed.

32

CO THAM SAI GON

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

33

CLIENT: CO THAM SAI GON

BLUESEA AGENCY

BRAND GUIDELINES

34

CO THAM SAI GON

35

36 GRID SYSTEM WEB 29

MOBILE WEB DESIGN 30

SOCIAL MEDIA 31

BLUESEA AGENCY

Using a grid system is one way to achieve a level of consistency

06. Web design

CLIENT: CO THAM SAI GON

BRAND GUIDELINES

CO THAM SAI GON

Grid system web 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.

37

BRAND GUIDELINES

Mobile web design

CLIENT: CO THAM SAI GON

BLUESEA AGENCY

General

Welcome.

Branding on the web is about function as well as style. That is why consistency is essential throughout the pages of a website, with navigation bars, headers and footers, and color schemes all serving to orient the visitor.

In this way, the graphics enable the visitor to find information quickly and easily.

Fonts The fonts Monsterat can also be used on the web.

The Caslon font is always used for the big headlines, Lato for the basic text and smaller headlines.

38

Inspiring.

Modern.

Cheerful.

CO THAM SAI GON

Social media

Facebook cover Our Social media applications are an important way to tell our brand story to internal and external stakeholders. The following is a small sample of ways to execute our new brand identity in collateral.

The size of Facebook banners should always be 851 x 315 px and the size of the Instagram story should be 1080 x 1920 px.

39

40 CORPORATE ICONS 37

THE CHECKLIST 38

BLUESEA AGENCY

An organization is only as good as the people who live and work in it.

07. Addtional

CLIENT: CO THAM SAI GON

BRAND GUIDELINES

CO THAM SAI GON

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%

175%

200%

Icons without background

Icons with a solid background

41

BLUE SEA AGENCY 11/74 An Trạch, Đống Đa, Hà Nội Phone + 84 79 6300 655 | E-Mail Blueseadesign96@gmail.com | Web blueseagency.vn