Brand guidelines 6 by Deepika Verma

Brand Guidelines

www.happay.in

LiveHappay

080-39510101

Content 1.Logo specifications 1.1 Clear space 1.2 Logo Application 1.3 Logo Placement

2. Colour Palette 2.1 2.2 2.3 2.4

Primary colour palette Colour application Colour values Background and complimentary colour palette

3.Typography 3.1 Primary Type 3.2 Complimetary Type 3.3 Dashboard and mobile applcation

4.Design Principles 4.1 Geometry 4.2 Flat and front facing 4.3 Colour Variations

5.Illustration Style/ Infographics/ Feature Icons

Every stateâ&#x20AC;&#x2122;s emblematic propaganda is worshiped by the consumer-citizen as a super-logo, a brand Juggernaut.â&#x20AC;? - Harman Zapf

Palatino- Adobe

Logo Specification 1.1 Clear Space 1.2 Logo Application 1.3 Logo Placement

happay Dark background

20% 100%

20%

1.1 Clear Space

happay

Dark backgound

Light background

20%

100%

20%

For Mobile UI

20% 100%

Colour Version A

happay Colour Version C

1.3 Logo Application

happay

Colour Version B

happay Colour Version D

happay

Application on background

happay size: 1.48” x 0.39” for print

Minimum logo sizes

0.625” for print

happay size: 2.85” x 0.75” for online

Full Logo

45 px for online

24px 24px

1.4 Logo Placement

3 4

Portrait Format

Square Format 2

1 3

Landscape Format

Pantone, cmyk and rgb are not the same thing. - Anonymous

Colour Palette 2.1 Primary Colour palette and Colour Application 2.2 Colour Values 2.3 Bckground Colour

Primary Colour Palette

2.1 Primary Colour Palette & Colour Application

Hex #237bfb

Hex #ff9800

Hex #f96767

RGB 35 123 251

RGB 255 153 0

RGB 249 103 103

CMYK 76 53 0 0

CMYK 0 48 100 0

CMYK 0 75 51 0

60% White

Going by the colour wheel - hues RGB, a slight usage of different tint and shades and thus arriving at the most basic palette possible signifying the aim of our product that is corporate, clean and not much complicated. Just to the point, where blue is the most prominent colour as it is perceived as trustworthy, dependable, fiscally responsible and secure. Happay deals with expenses and it management thus security becomes an integral part of the brand, thats why blue as its message of stability inspires trust. And it is here to stay.

100% White

30% White

2.2 Colour Values

Hex #237bfb

Hex #5ccf78

Hex #f44336

Hex #ff9800

Hex #bdbdbd

RGB 35 123 251

RGB 92 207 120

RGB 244 67 54

RGB 255 153 0

RGB 189 189 189

CMYK 76 53 0 0

CMYK 61 0 72 0

CMYK 0 89 84 0

CMYK 0 48 100 0

CMYK 26 21 27

Hex #54a6f7

Hex #6fd588

Hex #e57373

Hex #ff74bd

Hex #e0e0e0

RGB 84 166 247

RGB 111 213 136

RGB 229 115 115

RGB 255 183 77

RGB 224 224 224

CMYK 59 26 0 0

CMYK 54 0 64 0

CMYK 6 68 47 0

CMYK 0 32 80 0

CMYK 11 8 9 0

Hex #accff9

Hex #96e1a8

Hex #ff8a80

Hex #ffcc80

Hex #f5f5f5

RGB 171 207 249

RGB 150 225 168

RGB 255 138 128

RGB 255 204 128

RGB 245 245 245

CMYK 29 11 0 0

CMYK 40 0 45 0

CMYK 0 57 41 0

CMYK 0 21 56 0

CMYK 3 2 2 0

2.2 Background Colour Dark text on light background Primary Text Secondary Text Inactive/ Hint Text

#000000 87% #000000 54% #000000 38%

#575656

Typography is a two- dimensional architecture based on experience and imagination, and guided by rules and readability. - Harman Zapf

Palatino- Adobe

Type Family 3.1 Primary Type 3.2 Complimetary Type 3.3 Dashboard and mobile applcation

3.1 Primary Type

Based on Bauhaus design philosophy this font reflects simplicity, symmetry, angularity and consistency. Futura font is a san- serif font that avoids, any non-essential elements, making use of basic geometric proportions with no serifs or frills. Futuraâ&#x20AC;&#x2122;s crisp, clean forms reflect the appearance of efficiency and forwardness. Thus, justifying the brand that follows a very minimal and pragmatic approach towards design.

utura

Futura std Context: For headings, subheadings and body text

Futura Std Bold

Futura Std Book

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

0123456789

Futura Std Heavy

Futura Std Light

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

0123456789

Futura Std Medium ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789

3.2 Complimentary Text

Cambria is a transitional serif typeface with diagonal and vertical hairlines and serifs are relatively strong, while horizontal serifs are small and intend to emphasize stroke endings rather than stand out themselves. Designed specifically for on-screen reading, while still remaining applicable for print,â&#x20AC;? thanks to its sturdy letter construction that retains legibility even at small sizes.

ambria

Cambria

Context: Subheadings, footnotes, and body text

Cambria Bold

Cambria Italic

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

0123456789

Cambria Bold Italic ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789

Cambria Regular

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789

3.2 Dashboard and Mobile Application

Roboto is a grotesque sans-serif typeface, it renders crisply on screens and is very legible, even at smaller sizes.

oboto

Roboto Context: Dashboard and mobile application

Roboto Bold

Roboto Light

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

0123456789

Roboto Medium ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789

Roboto Regular ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789

Key principles considered fundamental to organic form and the creation of visual imagery: Contrast, Rhythm (or pattern), Balance (and symmetry), Proportion along with Unity/Harmony, Movement and Expression. - Zena Oâ&#x20AC;&#x2122;Connor

Elements and Principles of Design

Design Principles 4.1 Geometry 4.2 Flat and Front Facing 4.3 Colour Variations

4.1 Geometry Law of symmetry Law of pragnaz

We prefer things that are simple, clear and ordered. Instinctually these things are safer. They take less time for us to process and present less dangerous surprises. Following the same the design language of the icons and feature icons are such that reflect symmetry, clean and pragmatic apprach eliminating any extra elements.

Law of Pragnaz Icons that can be broken down and seen in the simplest forms possible to make it easy and flexible for audience to adapt like the icons on the right can be dissected into basic geometric shapes like triangles, circles, squares, rectangles and lines.

Flat and front facing y

4.2 Front facing and Flat design

y z x

4.3 Colour Variation+ shift in fill

Monochrome

Grey+One colour

What is it about animation, graphics, illustrations, that create meaning? And this is an important question to ask and answer because the more we understand how the brain creates meaning, the better we can communicate, and, I also think, the better we can think and collaborate together. -Tom Wujec

IIlustration Style 5.1 Corporate Illustrations 5.2 Fun or Informal Illustrations 5.3 Feature Icons

Illustration style Primary Colour Palette Informal/ fun illustrations Corporate Illustrations 5.1 Corporate and

Illusatration

fun

5.3 Feature Icons