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