Brand Guidelines

Table Of Content

Logo Stationary Kit Glossary

Brand guide defination Business Card RGB Lossless AI
Master Logo Envelop CMYK Lossy PDF
Logo Variation Letterhead Vector Jpeg/jpg EPS
Logo 3d Mockup Folder Raster Png
Logo Usage
Logo Clearspace

Brand Color Application Designer Contact

Primary Color Mobile Mockup Contact Details
Secondary Color Laptop
Color Usage

Brand Fonts Brand Icon Brand Book

Primary Font Fav Icon
Secondary Font App Icon
Font Usage Logo Do’s & Don’ts
Brand guide book.

This document contains the rules for our visual communication system.
Fo l l o w t h e s e r u l e s s t r i c t l y t o m a i n t a i n b r a n d c o n s i s t e n c y. T h i s i n c l u d e s a l l o f t h e l e m e n t s
you
m a y n e e d - l o g o, t y p e f a c e, c o l o r s , I c o n o g r a p h y, a n d m o r e. We i n v i t e y o u t o a b s o r b t h i s
information
a n d r e f e r e n c e i t o f t e n t o b e c o m e a n i n f o r m e d ke e p e r o f t h e b r a n d .
Master Logo
Logo Variations
Logo 3D mockup
Logo Usage
When you place our logo in a design, please make sure you give it room to breathe; we call this

“c l e a r s p a c e.” A l w a y s l e a v e a c l e a r s p a c e a r e a e q u a l t o t h e c a p h e i g h t o f t h e l o g o t y p e “ LO G O.” Lo g o

a r t w o r k c o m e s w i t h t h e c l e a r s p a c e d i m e n s i o n s i n c l u d e d i n t h e a r t b o a r d s i z e.
Logo Clearspace

W h e n e v e r y o u u s e t h e l o g o, i t s h o u l d b e s u r r o u n d e d b y c l e a r s p a c e t o e n s u r e

i t s v i s i b i l i t y a n d i m p a c t . N o g r a p h i c e l e m e n t s o f a n y k i n d s h o u l d i n v a d e t h i s z o n e.

W h e n u s i n g t h e l o g o, m a i n t a i n a m i n i m u m c l e a r s p a c e o f 5 0 % a l l t h e w a y a r o u n d .

X i s e q u a l t o h a l f p a r t o f y o u r l o g o.

FULL LOGO 50% CLEAR SPACE

X = Half part
of logo
Brand Color
C o l o r p l a y s a n i m p o r t a n t r o l e i n t h e b r a n d i d e n t i t y. T h e c o l o r s b e l o w a r e

recommendations for various media. A palette of primary colors has been developed,

w h i c h c o m p r i s e t h e c o l o r s c h e m e.

Primary Color

60% 80% 60% 80% 60% 80%

100% 100% 100%

40% 20% 40% 20% 40% 20%

#FFCE00 #000000 #E0344C

R:255 C:1% R:0 C:75% R:224 C:6%
G:206 M:18% G:0 M:68% G:52 M:94%
B:0 Y:100% B:0 Y:67% B:76 Y:68%
K:0% K:90% K:0%
Secondary Color

60% 80% 60% 80% 60% 80%

100% 100% 100%

40% 20% 40% 20% 40% 20%

#FFCC0E #E84134 #FCBA04

R:58 C:69% R:232 C:3% R:252 C:1%
G:58 M:62% G:65 M:90% G:186 M:29%
B:58 Y:61% B:52 Y:88% B:4 Y:100%
K:52% K:0% K:0%
Color Usage
Following are the colour usage on fonts.
i.e. Headers Subheader and body text.

Headers, Sub-Headers & Body Text

The Primary Color colour should

be used on dark coloured backgrounds.

The white colour should be used

on dark coloured backgrounds.

Secondary Colour Usage

Secondary colors must be used where

primary colours are not
representing best.

No other secondary colors used

anywhere to represent the brand.
Brand Font

Primary Font
Ty p o g r a p h y i s t h e a r t a n d t e c h n i q u e o f a r r a n g i n g t y p e t o m a k e w r i t t e n l a n g u a g e l e g i b l e, r e a d a b l e a n d a p p e a l i n g w h e n d i s -

p l a y e d . . . . T h e t e r m t y p o g r a p h y i s a l s o a p p l i e d t o t h e s t y l e, a r r a n g e m e n t , a n d a p p e a r a n c e o f t h e l e t t e r s , n u m b e r s , a n d s y m -

bols created by the process.

Font Name
Secondary Font

Font Name
Font Usage
Following are font usage in documentation.

Header
Use uppercase capitalisation whenever possible.
Make text left - aligned whenever possible.
The recommended size is 16.

Sub-Headers
Use uppercase capitalisation.
Make text left - aligned whenever possible.
The recommended size is 12.

Body text
Use sentence case.
Make text left - aligned whenever possible.
The recommended size is 10.
iconography
Stationary Kit
Application
 Brand Icon
FAVICON APPICON

It needs to scale from massive screens right An app icon is a visual anchor for your product.

down to an icon that can be as small as 16 x 16 Yo u c a n t h i n k o f i t a s a t i n y p i e c e o f b r a n d i n g

p i xe l s , k n o w n a s a f a v i c o n . A g r e a t e x a m p l e o f that not only needs to look attractive and stand

f a v i c o n d e s i g n i s t h e G o o g l e l o g o. . . . T h e f a v i - out, but ideally also communicate the core es-

con can also be seen as a shortcut icon, a tab sence of your application.Icon design and logo

icon or a bookmark icon, so it needs to look the design are not the same thing.

part.
Logo Do's And Don'ts

Logo should always be given some breathing room. DON’T stretch the logo
Preferably placement is on white or neutral backgrounds.

Placement on dark backgrounds DON’T rotate the logo

DON’T place the logo on a color DO NOT add unnecessary embellishments like drop
without sufficient contract shadows, gradients, embossing etc. to the logo
 Glossary
RGB Vector
VECTOR IMAGES ARE MADE UP OF POINTS, LINES, AND
(RED, GREEN, BLUE) COLOR MODE IS FOR ANYTHING THAT IS
CURVES THAT CAN BE INFINITELY SCALED WITHOUT ANY LOSS
COMPUTER-BASED DESIGN. THIS INCLUDES WEBSITES,
IN IMAGE QUALITY.
APPS, BANNER AD AND ANY OTHER DESIGN CREATED FOR
ELECTRONIC USE.

CMYK Lossless
(CYAN, MAGENTA, YELLOW, BLACK) COLOR MODE IS USED LOSSLESS IMAGE FORMATS CAPTURE ALL OF THE DATA OF
FOR PRINT DESIGN. THIS INCLUDES LOGOS, BUSINESS CARDS, YOUR ORIGINAL FILE. NOTHING FROM THE ORIGINAL FILE, PHOTO,
STATIONARY, ILLUSTRATION, PACKAGING AND ANY OTHER OR PIECE OF ART IS LOST—HENCE THE TERM “LOSSLESS.” THE
DESIGNS USED FOR PRINT. FILE MAY STILL BE COMPRESSED, BUT ALL LOSSLESS FORMATS
WILL BE ABLE TO RECONSTRUCT YOUR IMAGE TO ITS ORIGINAL
STATE.

Raster Lossy
LOSSY IMAGE FORMATS APPROXIMATE WHAT YOUR ORIGINAL
RASTER IMAGES ARE MADE UP OF A SET GRID OF DOTS
IMAGE LOOKS LIKE. FOR EXAMPLE, A LOSSY IMAGE MIGHT
CALLED PIXELS, WHERE EACH PIXEL IS ASSIGNED A COLOR
REDUCE THE AMOUNT OF COLORS IN YOUR IMAGE OR ANALYZE
VALUE. UNLIKE A VECTOR IMAGE, RASTER IMAGES ARE
THE IMAGE FOR ANY UNNECESSARY DATA. THESE CLEVER
RESOLUTION DEPENDENT. WHEN YOU CHANGE THE SIZE OF
TECHNICAL TRICKS WILL TYPICALLY REDUCE THE FILE SIZE,
A RASTER IMAGE, YOU SHRINK OR STRETCH THE PIXELS
THOUGH THEY MAY REDUCE THE QUALITY OF YOUR IMAGE.
THEMSELVES, WHICH CAN RESULT IN A SIGNIFICANT LOSS OF
CLARITY AND PRODUCE VERY BLURRY IMAGES..
JPEG/JPG PDF
JPEG IS A LOSSY RASTER FORMAT THAT STANDS FOR JOINT PDF STANDS FOR PORTABLE DOCUMENT FORMAT AND IS AN
PHOTOGRAPHIC EXPERTS GROUP, THE TECHNICAL TEAM THAT IMAGE FORMAT USED TO DISPLAY DOCUMENTS AND GRAPHICS
DEVELOPED IT. THIS IS ONE OF THE MOST WIDELY USED CORRECTLY, NO MATTER THE DEVICE, APPLICATION, OPERATING
FORMATS ONLINE, TYPICALLY FOR PHOTOS, EMAIL GRAPHICS SYSTEM OR WEB BROWSER. AT ITS CORE, PDF FILES HAVE A
AND LARGE WEB IMAGES LIKE BANNER ADS. JPEG IMAGES POWERFUL VECTOR GRAPHICS FOUNDATION, BUT CAN ALSO DISPLAY
HAVE A SLIDING SCALE OF COMPRESSION THAT DECREASES EVERYTHING FROM RASTER GRAPHICS TO FORM FIELDS TO
FILE SIZE TREMENDOUSLY, BUT INCREASES ARTIFACTS OR SPREADSHEETS. BECAUSE IT IS A NEAR UNIVERSAL STANDARD,
PIXELATION THE MORE THE IMAGE IS COMPRESSED PDF FILES ARE OFTEN THE FILE FORMAT REQUESTED BY PRINTERS TO
SEND A FINAL DESIGN INTO PRODUCTION. BOTH ADOBE PHOTOSHOP
AND ILLUSTRATOR CAN EXPORT STRAIGHT TO PDF, MAKING IT EASY TO
START YOUR DESIGN AND GET IT READY FOR PRINTING.

PNG EPS
EPS IS AN IMAGE FORMAT THAT STANDS FOR ENCAPSULATED
PNG IS A LOSSLESS RASTER FORMATE THAT STANDS FOR
POSTSCRIPT. ALTHOUGH IT IS USED PRIMARILY AS A VECTOR
PORTABLE NETWORK GRAPHICS. THINK OF PNGS AS THE
FORMAT, AN EPS FILE CAN INCLUDE BOTH VECTOR AND RASTER
NEXT GENERATION GIF. THIS FORMAT HAS BUIT IN TRANSPARENCY,
IMAGE DATA. TYPICALLY, AN EPS FILE INCLUDES A SINGLE
BUT CAN ALSO DISPLAY HIGHER COLOR DEPTHS, WHICH TRANSLATES
DESIGN ELEMENT THAT CAN BE USED IN A LARGER DESIGN.
AND ARE QUICKLY BECOMING ONE OF THE MOST COMMON IMAGE
FORMATS USED ONLINE.

AI TIFF/TIF
AI IS A PROPRIETARY VECTOR IMAGE FORMAT THAT STANDS FOR
ADOBE ILLUSTRATOR. THE FORMAT IS BASED ON BOTH THE
TIFF IS A LOSSLESS RASTER FORMAT THAT STANDS FOR TAGGED
EPS AND PDF STANDARDS DEVELOPED BY ADOBE. LIKE
IMAGE FILE FORMAT. BECAUSE OF ITS EXTREMELY HIGH
THOSE FORMATS, AI FILES ARE PRIMARILY A VECTOR-BASED
QUALITY, THE FORMAT IS PRIMARILY USED IN PHOTOGRAPHY
FORMAT, THOUGH THEY CAN ALSO INCLUDE EMBEDDED OR
AND DESKTOP PUBLISHING. YOU’LL LIKELY ENCOUNTER TIFF
LINKED RASTER IMAGES. AI FILES CAN BE EXPORTED TO BOTH
FILES WHEN YOU SCAN A DOCUMENT OR TAKE A PHOTO WITH A
PDF AND EPS FILES (FOR EASY REVIEWING AND PRINTING),
PROFESSIONAL DIGITAL CAMERA. DO NOTE THAT TIFF FILES
AND ALSO JPEG, PNG, GIF, TIFF AND PSD (FOR WEB
CAN ALSO BE USED AS A “CONTAINER” FOR JPEG IMAGES.
USE AND FURTHER EDITING).
THESE FILES WILL BE MUCH SMALLER THAN TRADITIONAL TIFF
FILES, WHICH ARE TYPICALLY VERY LARGE.
 Thanks For
T R U ST I N G U S