6. chapter 13 Kotak Manual

Kotak Digital 

13.01 Kotak Elements in the Digital World 1 

13.02 Powerpoint 1 

13.03 Wall Paper 1 

13.04 Emailer 1 

13.05 Call-to-Action Buttons 1 

13.06 Web Banner Advertisement 1 

13.07 Web Banner Advertisement, Vertical SIzes 1 

13.08 Web Banner Advertisement, Squarish SIzes 1 

13.09 Web Banner Advertisement, Horizontal SIzes 1 

13.10 Web Banner Advertisement, Products, Vertical SIzes 1 

13.11 Web Banner Advertisement, Products, Horizontal SIzes 1 

13.12 Web Banner Advertisement, Products, Squarish Sizes 1 

13.13 Mobile 1 

13.14 Tablet 1 

13.15 Social Media 1 

CHAPTER13 

DIGITAL 

13.16 Websites and Microsites 1

13.01 


Kotak Elements in the Digital World 

The digital world has changed how consumers 

engage with brands. It is transforming the economics 

of marketing and making obsolete many traditional 

strategies and structures. 

Today, consumers are connecting with myriad 

brands—through new media channels. After a 

purchase consumers may remain aggressively 

engaged, publicly promoting or assailing the 

products they’ve bought, collaborating in the brands’ 

development. 

across digital applications, the colour and size of 

fonts and the way the call to action buttons behave 

can go a long way in acheiving this consistency. The 

consistent use of Kotak (business) logo and branding 

guides in social media applications is also critical in 

building this ‘One Kotak’ experience. 

Digital Identity elements 

1. The Kotak Infinity Symbol and Kotak business logos. 

(For more details refer to the chapter on Kotak logos). 

Through this ever changing scenario consumers still 

want a clear brand promise and offerings they value. 

What has changed is when – at what touch points – 

they are most open to influence, and how one can 

interact with them at those points. Customer touch 

points have changed in both number and nature, 

requiring a major adjustment in the way we design 

and standardise the way they experience them. The 

digital world is moving from ‘static’ to one which is 

extremely fluid. Consistency in a fluid world is key. 

This chapter on digital ear marks the key experience 

buidling elements in the digital world for Kotak. A 

set of simple guides streamlines the Kotak digital 

experience. Standardising the Kotak top red band 

The Kotak Brand Book 218



Kotak Elements in the Digital World 

2. Favicon 

3. Kotak Digital Colour Pallete 

5. The Kotak Red Band device 

Kotak Red 

Web FF0000 

Kotak Black 

Web 000000 

Kotak Blue 

Web 003366 

Kotak Grey 1 

Web 999999 


Web cccccc 

Background colour 

should be used to 

divide content on 

websites or apps. 


Web ebebec 

6. Kotak Link details 

Refer to the colour section for Kotak secondary 

set of colours 

Rest State 

Read More > 

4. Kotak Typeface 

Active State 

Read More > 

Aa Bb Cc 

Aa Bb Cc 

House style: 

Frutiger 

Default style: 

Arial 

Always refer to the core guidelines for consistency 

with other applications. Find a full catalogue 

of logo variants, Kotak typefaces and imagery 

for various applications here. 




PowerPoint Presentation 

PowerPoint presentations are the most ubiquitous 

items in the list of customer touch points and yet it 

finds itself in the list of the often neglected. Follow the 

guides given below and use the templates so that all 

Kotak presentations have the same look and feel. 

made by the Kotak Mahindra team and will not be 

viewed on another machine, only the Frutiger font 

family must be used in the weights and sizes specified. 

If a presentation is to be sent to other viewers who are 

not part of Kotak Mahindra, Arial must be used. 

Presentation slides are typically of two types: The Title 

slide and the Content slide. If a presentation is to be 

17mm 

Title Slide 

10mm 

20mm 

Line separator, 1pt thickness, 

Kotak Red 3 (C0, M80, Y100, K0) 

37mm from the top 

Kotak Red background 

190mm 

Presentation Title 

Title text: 

Frutiger Light / Arial Roman 

Size 30pts 

Background graphics 

The Kotak Brand Book 220 

255mm 

Date 

Date: 

Frutiger Light / Arial Roman 

Size 16pts




17mm 

Content 

Slide 

Title of slide 

7mm 

15mm 

7mm 

• Heading 1 

190mm 

– Level 2 text content 

• Level 3 text content comes here 

– Small text and other content comes here 

Presentation Title 

Date Footer Slide Number 

255mm 

Slide title text: Arial Roman, Size 30pts 

Heading 1: Arial, Size 28pts 

Level 2: Arial, Size 24pts 

Level 3: Arial, Size 20pts 

Small text: Arial, Size 18pts 





PowerPoint presentations across all Kotak business 

must follow the same guidelines. Given below are 

sample title slides for various businesses. 




Wall Paper 

Wall paper: Infinity 

Wall paper: Cool 

Wall paper: Corporate 

Wall paper: Vibrant 




Emailer 

The best possible response for e-mailers can be 

achieved if certain layout considerations, images and 

content rules are adhered to while creating Kotak 

emailers. 

5. Web users skip over unimportant information and 

follow an ‘F’ reading pattern. Relevant logos, words 

and images on the left side of the screen tend to get 

more attention than things on the right. 

Layout and format considerations 

1. Keep everything within 700px wide. Numerous eyetracking 

studies have discerned that the average Web 

user’s reading habits skew more towards scanning 

rather than word-for-word reading. This means that 

stuff on the left gets more attention than stuff on the 

right. 

6. Repeat the Calls-to-Action if mail content is long. 

The next page shows a sample emailer for one of the 

businesses showing the prominent position of the 

Business logo. Partner logo position is also shown (if 

required). Other businesses are advised to follow a 

similar template. 

2. Keep Calls-to-Action high up on the mail, clear 

and clickable. Now that mobile email consumption 

surpasses that of desktop use – it’s a great time 

to make sure those buttons are big enough for 

touchscreen use. 

3. Very often images are blocked by subscribers. 

Headlines and body copy play crucial roles in keeping 

the reader engaged, so back-up all text that is 

embedded in images with alt-tags which display even 

with images turned off. 

4. Keep only a single or double column layout, always. 

Overly complex layouts, long copy paragraphs and 

superfluous design elements should be avoided. 




Emailer 

Maximum height 36 pxl 

Image area 200pxls after 

the red band 

Headline 

Frutiger Roman 24pt 

Line spacing 32pts 

Drop shadow to enhance 

readability 

Body text 

Frutiger light 12pts 

line spacing 14pts 

Feature highlight text 

Frutiger Bold12pts 

line spacing 14pts 

Kotak Red 

and we will call you back. 

Calls to action to be 

placed with 400pxls from 

the top so it can be seen 

within the first screen size 

Other mandatory text 

Frutiger Light 9pts 

Line spacing 13pts 




Call-to-Action Buttons 

Call-to-Action buttons should be Kotak Red in colour. 

The font used for describing the button should always 

be Frutiger Roman, size 16pts. 

All buttons should be 27px height 

Buttons should be white when placed on Kotak Red 

Small 50px 

Medium 100px 

Medium 110px 

Long 200px 

Buttons should have 5px corner radius. 

Shadow effect should be minimal. 

Rest state 

Active state 




Web Banner Advertisement 

Web banners come in myriad sizes and shapes. Kotak 

branding must remain consistent through these 

sizes. In the following pages are details of size and 

placement of the Kotak logo on each of these formats. 




Web Banner Advertisement, Vertical Sizes 

Details of placement of logo and size given below for 

vertical sizes. 

The banners are all shown in Kotak Red colour. 

However, it is not a mandatory that they should be 

only this colour. If any of the Kotak Neutral colours or 

an image is used the appropriate logo version should 

be used. 




Web Banner Advertisement, Squarish Sizes 


squarish sizes. 




Web Banner Advertisement, Horizontal Sizes 


horizontal sizes. 




Web Banner Advertisement, Products, Vertical Sizes 

For product logos in vertical banners, separate the 

product name from the Kotak business name since the 

width of these sizes are limited and will not allow for 

legibility. 

Only in the Half Page and Vertical Rectangle size, the 

product logos can go with the business names. 




Web Banner Advertisement, Products, Horizontal Sizes 

Details of placement of (Business + Product) logo and 

size given below for horizontal sizes. 




Web Banner Advertisement, Products, Squarish SIzes 

Details of placement of (Business + Product) logo and 

size given below for squarish sizes. 


13.13 


Mobile 

Mobiles are often used whilst commuting, watching 

television, or speaking with other people and it is 

important to bear this in mind when designing for this 

platform. It’s best to arrange the page 

content so that it is in direct ‘read order’, 

starting with the most relevant or featured 

content at the top. 

Kotak mobile design must have flexible page layouts 

to make it mobile friendly. Make sure that the content 

is in the right order and the page can adapt to various 

screen types and widths. This is important especially 

for devices that can be used both in landscape or 

portrait modes. 

Allowing users to input information by making simple 

selections instead of entering text is preferable. 

A touchscreen is an electronic visual display that can 

detect the presence and location of a touch (with 

finger or hand) within the display area. 

• Elements should be positioned on either side of the 

screen, to accommodate for users and how they hold 

their devices. 

• It is recommended that a 44px safe area around 

elements 

should be applied to allow a user to easily select 

content. 

• As a general rule, gestures should not to be used 

for aspects of core navigation. If employed without 

due consideration, gestures can cause problems with 

standard functions like scrolling. 

When designing for Kotak Mobile platforms a 

minimum of 480px and 320px width resolutions is 

recommended. Since screen sizes and resolutions can 

vary across mobile devices so when designing 

a consistent look and feel across a variety of 

devices, design assets need to be scalable. Ensure that 

designs adapt to the user’s preference, 

portrait or landscape. 

For smartphones, in landscape orientation the design 

can either scale to fit the page, or redraw to show 

additional content. Orientation should be used to 

affect the scale and format of what is being displayed, 

not to navigate between pages. 




Mobile 

Most mobile applications follow a 320x480pixel layout 

that is divided vertically into 3 clear zones: 

1. Masthead on the top - area for branding and 

primary navigation 

2. Content in the middle 

3. Footer at the bottom 

The global masthead contains a menu with 

global navigation links, log in and search 

functionality. The masthead is always 

Kotak Red on all Kotak mobile sites. 

The local masthead should be devoted to 

product level branding. 

Collapsible navigation bar 

Kotak business logo, height of the ellipse is always 

27pixels. Always ensure the isolation zone for the 

logo is maintained. 

Masthead should always be 42 pixels in height. 

Login 

Content space 

Footer 




Mobile 

Given below is how the product logo comes along 

with the business logo. 

Kotak product + business logo, 

height of the ellipse is always 

27pixels. 

Login 




Mobile 

Branding can be applied across the site 

banner and the local navigation. A consistent 

brand colour (Kotak Red/Kotak Neutrals/Kotak 

Stylized product colours) can also be applied to the 

background of the local navigation links. Additionaly 

Kotak colours may be used within text links in the 

content area to strengthen branding. 

Y 

2Y 

Height 

of ellipse =27px 

2Y 

Login 

42px 

Y 

2Y 

Height 

of ellipse =27px 

2Y 

Login 

42px 




Mobile 

Kotak uses bold typography to create stronger 

hierarchies across the mobile site. Frutiger is the house 

style and Arial is default web font for both headers 

and body copy. 

Font sizes are relative on mobile devices, 

which means that point sizes are not 

used. Fonts are defined as X-large, large, 

medium, small and X-small. These are the 

recommended type sizes. 

Arial Bold 24pt X-large 

Arial Bold 20pt Large 

Arial Bold 16pt Medium 

Arial Bold 13pt Small 

Arial Bold 11pt X-small 

Frutiger Bold 24pt X-large 

Frutiger Bold 20pt Large 

Frutiger Bold 16pt Medium 

Frutiger Bold 13pt Small 

Frutiger Bold 11pt X-small 




Mobile 

There should be consistent use of font sizes 

across all Kotak mobile sites. Headers should be 

24pt and body copy should be 16pt. On changing 

orientation of the device, text should be responsive 

and scalable. 

Smartphone (Portrait) 320px 

Header 24pt 

Lorem ipsum dolor sit amet, consectetur 

adipiscing elit, sed do eiusmod tempor 

incididunt ut labore et dolore magna 

aliqua.16pt 

Link 16pt 

Smartphone (Landscape) 480px 

Header 24pt 

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do 

eiusmod tempor incididunt ut labore et dolore magna aliqua. 

16pt 

Link 16pt 




Mobile 

8px 

There should be consistent spacing around 

headers and body copy. Either 8px or 16px 

above and to the left of content. 

8px 

16px 

16px 

8px 

Header 

Body Copy: Lorem ipsum dolor sit amet, 

consectetur adipiscing elit, sed do 

eiusmod tempor incididunt ut labore et 

dolore magna aliqua. 

Link 

320px page width 

480px page width 

304x171 304x171 108x61 

Images should have an aspect ratio of 16:9 or 

should be square images. Recommended image 

sizes are as follows, 304x171, 144x81, 

108x61and 70x70 pixels. The resolution of the 

screen determines which image sizes should be 

used per grid. 

144x81 

70x70 

70x70 




Tablet 

Tablets are some of the first digital screens to be used 

at a variety of distances. These variations in contextual 

user behaviour can be broken into three main reading 

categories: 

Close distance reading - using a device whilst lying in 

bed 

Medium distance reading - using a device whilst sitting 

on a train 

Far distance reading - using a device propped on a 

table while eating 

to the device on which they are being displayed. 

While Arial 13pt on 16pt leading is suitable for 

desktop reading, it feels too small for most tablets. As 

a result, the smallest font size that is recommended 

recommends for tablet devices is 15pt on 20pt for 

body text. 

A landscape or portrait orientation change of 

a device can also affect the layout of a service, 

so text should be responsive and scalable. 

The pixels per inch of a tablet screen varies across 

devices. This means, that font sizes are relative 

8px 

8px 

16px 

16px 

8px 

Header 

Body Copy: Lorem ipsum dolor sit amet, 

consectetur adipiscing elit, sed do 

eiusmod tempor incididunt ut labore et 

dolore magna aliqua. 

Link 

As with mobile, with tablets too there 

should be consistent spacing around 

headers and body copy. Either 8pt or 

16pt above and to the left. 




Tablet 

As with mobile, in tablets too establish clear heirarchy 

between headline levels and body copy as per the 

following reference in Arial and Frutiger fonts. 

Arial Bold 48pt, 48pt Leading 







Body Copy 

Arial Regular 15pt, 20pt Leading 




Tablet 

Frutiger Bold 48pt, 48pt Leading 







Body Copy 

Frutiger Regular 15pt, 20pt Leading 




Social Media 

Whether a ‘share’, tweet, like or post, it’s vital our 

brand is presented consistently across all social 

media platforms. 

on the Kotak Red background (refer to Logo Chapter). 

Background images should be used across social 

media to communicate the Kotak personality. 

Our Kotak Infinity symbol should be used as the profile 

picture for all social media platforms. It should be used 

Profile Picture 

NEVER USE KOTAK RED BAND 

DEVICE IN PROFILE PICTURES 

NOT PREFERRED 

PREFERRED 




Social Media 

Facebook 

On the timeline, the cover photo should carry an 

element of Kotak red integrated into the composition. 

If it is an illustration, use red as the main colour. Try 

and include the current campaign creative alongside 

the profile picture. To support the cover photo, a 

single copy line should be used. The profile picture 

should be the Square Logo Version. Here the Kotak 

Mahindra Bank Facebook page is shown, other Kotak 

businesses follow the same guides. 




Social Media 

Youtube 

The main image should carry a Kotak Red thread 

integrated into the composition. Try and include 

the current campaign creative alongside the profile 

picture. Follow the TVC rules from theTVC guidelines 

chapter for videos on YouTube. Here the Kotak 

Mahindra Bank Youtube page is shown, other Kotak 





Social Media 

Twitter 




picture. The icon for the profile image should be the 

logo in the square version. Here the Kotak Mahindra 

Bank Twitter page is shown, other Kotak businesses 

follow the same guides. 




Social Media 

Google+ 




picture. The profile picture in Google+ is circular. 

The image shhould have the logo as shown below. 

The infinity symbol alone will not work here since the 

ellipse clashes with the circle. Here the Kotak Mahindra 

Bank Google+ page is shown, other Kotak businesses 

follow the same guides. 




Social Media 

Linkedin 




picture. The space provided for profile picture in 

Linkedin is rectangular so it is recommeded that the 

Logo Block version of the logo is used. Here the Kotak 

Mahindra Bank Linkedin page is shown, other Kotak 





Microsite and Website 

Companies with multiple businesses and myriad 

products that have large websites face this qyuestion 

all the time: should you keep the website as a unified 

whole or allow it to be broken down into a series of 

micro sites? 

Mega sites have the disadvantage of not being able 

to speak to specific and smaller target audiences. 

The challenge with microsites is to be able to tie the 

individual branding together with the mother brand 

look. 

Kotak micro sites should have different design styles 

aimed at different target audiences. However, there 

should be a definite uniformity across each site in 

terms of navigational positioning, typography, grid 

system and Kotak logo usage. 

websites and Microsites of Kotak are tied in together. 

However, it still provides enough flexibility for 

individual divisions to stamp their own brand on a 

site and cater for the specific needs of their audience. 

Best of all this approach does not undermine the user 

experience across the sites because of a consistent 

approach to navigation, layout and functional 

elements. 

The folloowing are suggested to build this consistency: 

1. Universal Grid 

2. Columns 

3. The Masthead 

4. Horizontal Navigation 

5. The Local Masthead 

A consistent design language is built so that all 





Universal Grid 

A consistent grid should be created for all Kotak sites 

(web and micro) which should be divided 

into 61 x 16px vertical units. This has been 

created to align with existing image 

ratios and advertising requirements. 

The grid allows for a standard split across 

three columns with 16px gutters, creating a 

feature of the slightly wider column on the right 

that accommodates ‘fixed panel’ advertisements. 

16px 

976px 

304px 304px 336px 





Columns 

Columns can be further divided. The grid allows 

for a huge range of experimental layouts and 

templates. 





Global Masthead 

The global masthead includes the Kotak logo (business 

/product +business). The logo can be on white, Kotak 

Neutral Greys or on Kotak Red only. The logo should 

always be on the top left corner. The height of the 

ellipse in the logo should always be 48 pixels. 

Two lines of horizontal navigation with tabs and 

a crumbtrail solution for deeper hierarchies is 

recommended. 

16px 

48px 

16px 

48px 

16px 

16px 





Creating Typographic Heirachy 

Large bold type should be used to establish 

a clear information hierarchy. These are the 

recommended type sizes. 








Arial Regular 14pt, 18pt Leading 

Arial Regular 13pt, 18pt Leading 












Frutiger Regular 14pt, 18pt Leading 

Frutiger Regular 13pt, 18pt Leading 





Creating Typographic Heirachy 

Given below is an example of how typographic 

heirarchies can be created in websites and microsites. 

There should be consistent spacing around headers and 

body copy. Either 8px or 16px above and to the left 

Super Header 36px 

Header 32px 

Subheader 20px 

TIME STAMPS 11PT CAPITALS 

Copy 13px Arial Bold on 16px leading Lorem ipsum dolor sit amet, consectetur 

adipiscing elit. Fusce sed leo. Maecenas ultrices lorem sit amet 

diam. Aliquam sollicitudin tristique nulla. Duis libero diam, condimentum et, 

condimentum in, congue eu, tellus. Phasellus eu elit at nisi ultricies lobortis. 

Suspendisse porta commodo leo. 

Copy 13px Arial Roman on 16px leading Lorem ipsum dolor sit amet, 

consectetur adipiscing elit. Fusce sed leo. Maecenas ultrices lorem sit amet 

diam. Aliquam sollicitudin tristique nulla. Duis libero diam, condimentum et, 

condimentum in, congue eu, tellus. Phasellus eu elit at nisi ultricies lobortis. 

Suspendisse porta commodo leo. Sed tincidunt tincidunt massa.

6. chapter 13 Kotak Manual

Create successful ePaper yourself

Delete template?

Save as template?