HUGS Visual Guideline

V i s ua l G ui d el i n e

Visual Guidelines

HUGS

ABOUT

This book is a short overview of our guidelines, illustrating how to apply the visual components of HUGS. It includes directions on how to use our signatures, colors, and typefaces.

HUGS

Tabl e o f Contents

Visual Guidelines

HUGS 01 B ra n d O v e r v i e w 02 Ide n t i t y E xpl o rat i o n 03 Lo g o An at o m y 04 Lo g o Cl e a r S pa ce s 05 Alt e rn at i v e Ve rsi o n s o f t h e L o g o 06 Lo g o Do n ’t 07 Typo g ra ph y 08 Co l o r Pa l e t t e 09 Gra ph i c E l e m e n t s 10 HUGS APP 11 E xa m pl e Appl i cat i o n s

Table of Contents

HUGS FAMILY & EDUCATOR 01 02 03 04 05 06 07 08 09

B rand Ov e r v i e w Log o Anat o m y Log o C le a r S pa ce Alternati v e Ve rsi o n s o f t h e Lo g o Log o Don ’t C olor Pal e t t e Graphic E l e m e n t s Poster De si g n E x ample Appl i cat i o n s

5

HUGS

2

3

HUGS

Contents

4

01 Bra n d Ove r vie w 02 Id e n tity Exp l oration 03 L og o An atom y 04 L og o Cl e a r S p a ce 05 Alte rn ative Ve rs ions of the Logo 06 L og o D on ’ t 07 Typ og ra p h y 08 C ol or P a l e tte 09 Gra p h ic El e me nts 10 HU GS AP P 11 Exa mp l e Ap p l ic ations

5

HUGS

01 Visual Guidelines

Brand Overview

6

HUGS is a project to help teenage girls dealing with cyberbullying. According to the Cyberbully Research Center, approximately 20% of students in the US report experiencing cyberbullying in their lifetimes, and adolescent girls are specifically likely to be victims.

Hugs’ goal is to teach teenage girls how to face bullying and deal with harassment from strangers. It wants to show them how to protect themselves and friends.

Also, Hugs helps to establish a stronger connection and relationship between teenage girls and their parents.

Brand Overview

Voice

Supportive Positive Young

7

HUGS

02 Visual Guidelines

Identity Exploration

8

The wordmark is created by a combination of hugging arms and capital letters from Museo rounded type.

The rounded typeface gives the feeling of friendliness and inclusivity. The arc-shaped lines of the logo represent two arms holding together.

Identity Exploration

9

HUGS

03 Visual Guidelines

Logo Anatomy

10

Logo Anatomy

11

HUGS

04 Visual Guidelines

Logo Clear Space

12

It is necessary to designate clear space around the logo to ensure that there is sufficient padding when used in applications. The minimum clear space surrounding the signature is measured by a unit (x) equal to the x-height of the logotype.

Logo Clear Spaces

13

HUGS

05 Visual Guidelines

Alternative Versions of the Logo

14

15

HUGS

06 Visual Guidelines

Logo Don’t

The logo should not be distorted or modified in any situation. Breaking the guideline could cause the legibility issue and misunderstanding of the brand to viewers. The following are examples of alternations that must be avoided.

01 // Do not rotate logo 02 // Do not remove elements from logo 03 // Do not overlap logo 04 // Do not compress logo 05 // Do not stretch logo 06 // Do not change the color of logo 07 // Do not outline logo 08 // Do not create the drop shadow

16

Logo Don’t

01

02

HUGS 03

04

05

06

07

08

17

HUGS

07 Visual Guidelines

Typography

18

Museo

FONT FAMILY

Museo designed by Dutch graphic designer Jos Buivenga. This OpenType font family comes in five weights, and each weight comes with support for CE languages, even Esperanto. Besides ligatures, contextual alternatives, stylistic alternates, fractions and proportional/tabular figures, Museo has a ‘case’ feature for case-sensitive forms.

Typography

Museo Sans Rounded 500

Aa Bb ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789

Museo Sans Rounded 700

Aa Bb ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789

19

HUGS

Museo Sans 300

Aa Bb Visual Guidelines

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789

20

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789

Museo Sans 500

Aa Bb ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789

Museo Sans 700

Aa Bb ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789

21

HUGS

Museo 300

Aa Bb Visual Guidelines

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789

22

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789

Typography

Museo 500

Aa Bb ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789

Museo 700

Aa Bb ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789

23

HUGS

Museo Sans Display Light

Aa Bb Visual Guidelines

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789

24

Typography

Museo Sans Display Black

Aa Bb ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789

25

HUGS

PMS 541C C=90% M=5% Y=58% K=0% R=0 G=168 B=140 PMS 197C C=0% M=48% Y=15% K=0% R=238 G=155 B=172

#00a88d

Visual Guidelines

#ee9bac

PMS 137C C=0% M=40% Y=100% K=0% R=255 G=163 B=0 #ffa200

PMS 541C C=100% M=78% Y=32% K=20% R=0 G=60 B=113 #003b71

26

Color Palette

08 Color Palette Primary Color

27

HUGS

#e6e7e8

#bbbdbf

#6c6e70

Visual Guidelines

#000000

Color Palette Secondary Color

#ccd1ea

#7c8ec6 28

#5bb5a0 #add3c9 #d3e8e0

#ffe8cc

#ffd6a0 #f9b24c

#efadba

#f7d3d8

#f9e8e8

#2d60aa 29

HUGS

09 Graphic Elements

Visual Guidelines

Organic Shapes

30

Graphic Elements

Organic shapes have a lot of flexibility when it comes to combining them. The goal is to create configurations that are young, friendly, and convey a sense of movement and energy.

31

HUGS

10 Visual Guidelines

HUGS APP

32

HUGS App is a role play game about cyberbullying between teenage girls and their challenge. Players go through different stories to know more about cyberbullying itself. Also, the app provides basic cyberbullying information.

33

HUGS

34

35

HUGS

11 Visual Guidelines

Example Applications

36

37

HUGS

11 Example Applications

38

39

HUGS

40

41

HUGS

Contents

42

01 02 03 04 05 06 07 08 09

Bra n d Ove r vie w L og o An atomy L og o Cl e a r S p a ce Alte rn ative Ve rs ions of the Logo L og o D on ’ t Col or P a l e tte Gra p h ic El e me nts P oste r D e sig n Exa mp l e Ap p l ic ations

43

HUGS

FAMILY

Brand Overview

Visual Guidelines

HUGS FOR FAMILY is a sub-brand of HUGS. HUGS FOR FAMILY aims to improve the communication between teenage girls and parents, especially cyberbullying related topics.

For parents, talking with teenagers about sex as well as drugs, alcohol, bullying is a problem. HUGS FOR FAMILY helps parents who have teenage girls find out and handle cyberbullying problems with their children. On the other hand, teens are more familiar with the internet ecology and social media. Children can be teachers of their parents to show what they are doing online. Taking an interest in children’s online world is not only to have other aspects of their lives but also knows different ways to communicate with their children.

01 44

Brand Overview

Voice

Supportive Positive Confidence

45

HUGS

FAMILY

Logo Anatomy

HUGS FOR FAMILY logo extends from the original HUGS logo. In order to show the difference from HUGS logo. The typeface of work mark of “FOR FAMILY” is Museo 700.

Visual Guidelines

Here is an overview of how full signature is constructed and proportioned. A 0.45 x space should be left on two sides of the middle line all the time. None of the proportioned show here should be messed with. This lock-up should always be used in this way and no other.

02 46

Logo Anatomy

FOR FAMILY

47

HUGS

FAMILY

Logo Clear Space

Visual Guidelines

It is necessary to designate clear space around the logo to ensure that there is sufficient padding when used in applications. The minimum clear space surrounding the signature is measured by a unit (x) equal to the x-height of the logotype.

03 48

Logo Clear Space

FOR FAMILY

49

HUGS

Visual Guidelines

Alternative Versions of the Logo

04 50

FAMILY

Logo Clear Space

51

HUGS

FAMILY

Logo Don’t

Visual Guidelines

The logo should not be distorted or modified in any situation. Breaking the guideline could cause the legibility issue and misunderstanding of the brand to viewers. The following are examples of alternations that must be avoided.

01 // Do not rotate logo 02 // Do not remove elements from logo 03 // Do not overlap logo 04 // Do not compress logo 05 // Do not stretch logo 06 // Do not change the color of logo 07 // Do not outline the logo

05 52

Logo Don’t

01

02

03

04

05

06

07

53

Visual Guidelines

HUGS

FAMILY

Color Palette Primary Color

06

PMS 7455C C=85% M=70% Y=0% K=0% R=60 G=92 B=173 #3a5cac

54

Color Palette

PMS 541C C=100% M=78% Y=32% K=20% R=0 G=60 B=113 #003b71

PMS 541C Brand C=100% M=78% Y=32% K=20% R=0 G=60 B=113

Overviews

#003b71

PMS 197C C=0% M=48% Y=15% K=0% R=238 G=155 B=172 #ee9bac

55

HUGS

Color Palette

Visual Guidelines

Secondary Color

06 56

FAMILY

Color Palette

C=0% M=0% Y=0% K=0% #ffffff

C=0% M=0% Y=0% K=100% #000000

57

HUGS

Graphic Elements

Visual Guidelines

Dots and Island Shapes

07 58

FAMILY

Graphic Elements

59

HUGS

FAMILY

Poster Design

Visual Guidelines

HUGS FOR FAMILY poster series aims to help parents who have teenage girls find out and handle cyberbullying problems with their children. On the other hand, teens are more familiar with the internet ecology and social media. Children can be teachers of their parents to show what they are doing online.

08 60

Poster Design

61

Visual Guidelines

HUGS

62

63

HUGS

FAMILY

Visual Guidelines

Example Applications

09 64

65

Visual Guidelines

HUGS

66

67

HUGS

FOR EDUCATOR

68

69

HUGS

Contents

70

01 02 03 04 05 06 07 08 09

Bra n d Ove r vie w L og o An atom y L og o C l e a r S p a ce Alte rn ative Ve rsions of the Logo L og o D on ’ t C ol or P a l e tte Gra p h ic El e m e n ts P oste r D e sig n Exa m p l e Ap p l ic ations

71

HUGS

EDUCATOR

Brand Overview

Visual Guidelines

HUGS FOR EDUCATOR is a sub-brand of HUGS. HUGS FOR EDUCATOR focuses on raising the awareness of cyberbullying to school teachers, non-profit organization mentors, and all sort of educators.

Nowadays, information spreads quickly online, and this is how cyberbullying becomes more serious.

According to the article from Nobullying.com, teachers are also on the receiving end of cyberbullying, especially when it comes to disgruntled students. To recognize cyberbullying is not only protect educators themselves but also knows how to teach and help students dealing with cyberbullying.

01 72

Brand Overview

Voice

Supportive Positive Professional

73

HUGS

EDUCATOR

Logo Anatomy

HUGS FOR EDUCATOR logo extends from the original HUGS logo. In order to show the difference from HUGS logo. The typeface of work mark of “FOR EDUCATOR” is Museo 700.

Visual Guidelines

Here is an overview of how full signature is constructed and proportioned. A 0.45 x space should be left on two sides of the middle line all the time. None of the proportioned show here should be messed with. This lock-up should always be used in this way and no other.

02 74

Logo Anatomy

75

HUGS

EDUCATOR

Logo Clear Space

Visual Guidelines

It is necessary to designate clear space around the logo to ensure that there is sufficient padding when used in applications. The minimum clear space surrounding the signature is measured by a unit (x) equal to the x-height of the logotype.

03 76

Logo Clear Space

FOR

77

HUGS

EDUCATOR

Alternative Versions of the Logo

Visual Guidelines

FOR EDUCATOR

04 78

EDUCATOR

FOR EDUCATOR

79

HUGS

EDUCATOR

Alternative Versions of the Logo

Visual Guidelines

FOR EDUCATOR

FOR EDUCATOR

80

Alternative Versions of the Logo

FOR EDUCATOR

FOR EDUCATOR

81

HUGS

EDUCATOR

Logo Don’t

Visual Guidelines

The logo should not be distorted or modified in any situation. Breaking the guideline could cause the legibility issue and misunderstanding of the brand to viewers. The following are examples of alternations that must be avoided.

01 // Do not rotate logo 02 // Do not remove elements from logo 03 // Do not overlap logo 04 // Do not compress logo 05 // Do not stretch logo 06 // Do not change the color of logo 07 // Do not outline the logo

05 82

Logo Don’t

01

02

FO R ED UC ATO

03

FOR EDUCATOR R

04

FOR EDUCATOR

FOR EDUCATOR

05

06

FOR EDUCATOR

07

83

HUGS

EDUCATOR

Color Palette Primary Color

Visual Guidelines

PMS 541C C=100% M=78% Y=32% K=20% R=0 G=60 B=113 #003b71

06 84

PMS 3255C C=65% M=33% Y=0% K=0% R=30 G=210 B=195 #22d3c5

PMS Orange 021C C=0% M=82% Y=100% K=0% R=255 G=80 B=0 #22d3c5 PMS 541C C=90% M=5% Y=58% K=0% R=0 G=168 B=140 #00a88d

85

HUGS

EDUCATOR

Color Palette

Visual Guidelines

Secondary Color

C=0% M=0% Y=0% K=100% #000000

C=0% M=0% Y=0% K=10% #e6e7e8

86

Color Palette

C=0% M=0% Y=0% K=30% #bbbdc0

C=0% M=0% Y=0% K=70% #6d6e70

87

HUGS

Graphic Elements

Visual Guidelines

Geometric Shapes

07 88

EDUCATOR

Graphic Elements

89

HUGS

EDUCATOR

Poster Design

Visual Guidelines

HUGS FOR Educator poster series aims to assist educators to recognize cyberbullying is not only protect educators themselves but also knows how to teach and help students dealing with cyberbullying.

08 90

Poster Design

91

HUGS

92

93

HUGS

EDUCATOR

Visual Guidelines

Example Applications

09 94

95

HUGS

96

EDUCATOR

97

HUGS

Visual Guidelines

Type Museo Family Visual Guidelines Designer Selina Ping-Hsuan Wu Contact +1 510 480 9276 pwu17@art.edu

Š 2017 by HUGS All rights reserved. No part of this publication may be reproduced in any manner without permission.