Reva Dalal - Portfolio Website

Style Guidelines
Style Guidelines

Content
Introduction

2.Logo and its usage

2.1 Clear space and minimum size

2.2 Don’ts

2.3 Logo placement

3. Colour

3.1 Primary Colour

3.2 Secondary colour

4. Typography

4.1 Primary typeface

4.2 Secondary typeface

5 Other elements

5.1 Buttons

6 Layout and spacing

7 Iconography
Style Guidelines Introduction 3

The brand expression is a system that includes

several key elements such as colour, photography,
icons, fonts, and grids.

All of the elements combine to form a distinct,

professional appearance and feel makes the brand
instantly identifiable. In the following pages, you
will see how the brand expression comes together
through the website.
Style Guidelines 4

Logo and its usage

Style Guidelines 2. Logo 5

Hex- #0A65A1

Reverse version B&W version

Whenever logo is to be placed Whenever logo is to be placed on

on darker background use this a particular background where
version of the logo. there is restriction of colours use
this version of the logo.
Style Guidelines 2.1 Clear Space and Minimum size 6

The exclusion zone for

logo is defined with the
1/4th of D of the mark.

To avoid problems with legibility and in order to keep

the logo clearly recognisable, please don’t use the logo
smaller than 88px in height.
Style Guidelines 2.2 Dont’s 7
01 02
Avoid these things:

01 Do not stretch

02 Do not add effects

03 Do not change the

colour

04 Do not add
photographic
03 04
backgrounds that will

affect legibility

05 Do not add drop shadow

06 Do not distort

07 Do not rotate

08 Do not add other

elements
05 06

07 08
Style Guidelines 2.3 Logo Placement 8

Logo should be placed HOME ABOUT WORK CONTACT

on the bottom left corner
of the website.
Style Guidelines 9

Colour
Style Guidelines 3.1 Primary colours 10

HEX #0A65A1 HEX #A8D1F4 HEX #171A62

HEX #333333 HEX #000000 HEX #1328F1

Style Guidelines 3.2 Secondary colours 11

HEX #F6AE1D HEX #F2B1A7 HEX #E01A63

HEX #F0C336 HEX #DDBAEE HEX #FDF1D6

Style Guidelines 12

Typography
Style Guidelines 4.1 Primary typeface 13

Montserrat Bold
AbBybCcDdEeFfGgHhIiJjKkLlMmNnOoPp
QqRrSsTtUuVvWwXxYZz

Montserrat Semi Bold

AbBybCcDdEeFfGgHhIiJjKkLlMmNnOoPp
QqRrSsTtUuVvWwXxYZz

Montserrat Medium

AbBybCcDdEeFfGgHhIiJjKkLlMmNn
OoPpQqRrSsTtUuVvWwXxYZz
Montserrat Regular

AbBybCcDdEeFfGgHhIiJjKkLlMmNnOo
PpQqRrSsTtUuVvWwXxYZz
Style Guidelines 4.1 Primary typeface 14

Primary Font- MONTSERRAT

HEADING 1 - 120px
HEADING 2 - 40px
HEADING 3 - 36px
HEADING 4 - 32px

HEADING 5 - 24px

Use 16/20 pt text for the

body.
Use Montserrat for titles and Roboto for body copy.

Use minimum 16pt size for the body copy.

Use poppins for Front page.

Style Guidelines 4.2 Secondary typeface 15

Roboto Regular
AbBybCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSs
TtUuVvWwXxYZz

Roboto Semi Bold

AbBybCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRr
SsTtUuVvWwXxYZz

Roboto Medium
AbBybCcDdEeFfGgHhIiJjKkLlMmNnOoPp
QqRrSsTtUuVvWwXxYZz
Roboto Light
AbBybCcDdEeFfGgHhIiJjKkLlMmNnOoPpQq
RrSsTtUuVvWwXxYZz
Style Guidelines 4.2 Secondary typeface 16

Lorem ipsum dolor sit amet. Et inventore velit aut quae illum ad ratione
atque aut maxime voluptas et dolorem architecto sed soluta autem. Aut
sunt totam aut quos suscipit ut nisi suscipit ut harum velit est laudantium
quia et quia iste. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
Et inventore velit aut quae illum ad ratione atque aut maxime voluptas et
dolorem architecto sed soluta autem. Aut sunt totam aut quos suscipit ut
nisi suscipit ut harum velit est laudantium quia et quia iste. Lorem ipsum
dolor sit amet. Lorem ipsum dolor sit amet. Et inventore velit aut quae illum
28 px
ad ratione atque aut maxime voluptas et dolorem architecto sed soluta
autem. Aut sunt totam aut quos suscipit ut nisi suscipit ut harum velit est
laudantium quia et quia iste. Lorem ipsum dolor sit amet.

Use 16/20 pt text for the body.

If the font size is 20 then the line spacing should be
28, and if the font size is 16 the line spacing should
be 24.
Style Guidelines 17

Other Elements
Style Guidelines 5.1 Buttons 18

Size and Spacing

40 px
72 px LET’S WORK TOGETHER!! 72 px
40 px

20 px
20 Explore more> 20
20 px

20 px
16 NEXT> 16
20 px

20 px
16 <BACK 16
20 px
Style Guidelines 5.1 Buttons 19

Active

LET’S WORK TOGETHER!!

Hover

LET’S WORK TOGETHER!!

InActive

LET’S WORK TOGETHER!!

Style Guidelines 6. Layout and Spacing 20

Place the images on the WORK

alternate sides on the
home page of the
website. 72 px
All the spaces between
the letters should be in
the multiples of 4 or 8.
Branding 100 px

Branding is the process of researching and

developing an identity for your organization so
that consumers can begin to associate your
brand with your products or services.

32 px
Branding gives your business an identity beyond
its product or services. It includes logo design,
stationary design and brand applications.
32 px
Explore more>

Personal Branding
-Avani Mujumdar
Style Guidelines 6.1 Layout and Spacing 21

40 px
Place images side by side
keeping a space of 40 px or
any multiple of 8 between
them. The corners of the
image should be rounded
by 7 px

40 px
Style Guidelines 6.2 Layout and Spacing 22

keep a space of 40 px or Contact Form

any multiple of 8 between
different fields. The corners
of the box should be
rounded by 7 px [email protected]

40 px +91 72010 89182

behance.net
48 px
40 px

40 px

LET’S WORK TOGETHER!! 72 px

Style Guidelines 7. Iconography 23

Either of the two styles

can be used for the
website.
Style Guidelines 1. Iconography 24