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.