The Guide Brand Guidelines - Content + Design by Mariana Aspru

THE GUIDE

Brand Guidelines Aug u s t 2 01 6 The purpose of this style guide is to explain the use of The Guide brand style and to reinforce consistent application of the visual elements in all communications, both online and offline.

Our Brand

Our Logo

Color Palette

Typography

Brand essence Brand purpose Tone of voice Mood board Logo concept Clear space Min. sizes Logo variations Prohibited use Our color palette Tints and shades Color proportion Heading typography Subheading typogr.

Body typography Typography style Written example

Graphic Elements

Backgrounds Patterns Corporate Identity

Photography

Photography style

Contact

Contact details

Our Brand.

Brand Essence

Our mission’s brand is to make the world connect and expend faster it’s knowledge. Through our online platform we help people to connect, learn, explore and share their knowledge and what maters most to them. This way we are maximizing and straighten people’s ability to build and improve their knowledge which gives them the chance to contribute for the growth of other people lives.

Ou r p er so na lity Informed, tech-savvy, future oriented, open, honest, innovative, exploratory, energetic, responsible, fun, approachable, open and brave.

Brand Purpose

To bring to the world a lifestyle of exploratory learning thorough fun and intelligent online learning.

Ou r va lues •

learning from each other

•

sharing and connecting

•

innovation and technology

•

openness and integrity

Tone of Voice

The Guide tone of voice through verbal and

Our communication, external and internal rep-

written communication represents the way we

resents how we should behave with our custom-

are recognized and distinguished in the market.

ers and with our employees.

Off line cha nnels

O u r co mm u n ica t ion

Through offline channels like print collaterals,

•

show your expertise and be helpful

signages, client interactions, and online chan-

•

do not use jargons

nels like websites, online ads, emails, presenta-

•

avoid gambling references

tions, etc our tone of voice is:

•

empower and encourage

•

promote The Guide in a positive light

•

smart and confident

•

be specific, use facts to support claims

•

engaging and honest

•

share information and ideas

•

human and sincere

•

be polite and respectful

•

fun and energetic

•

be open and show genuine interest

What is our look and feel?

W ha t is a Moo d B o ard?

The mood board is a fun way of establishing the aesthetic and visual feel of our brand which has given us the inspiration of creating our brand look and feel.

The board is basically a loose of visual interpretation that the brand identity should take, but please note that this doesn’t mean that the brand is meant to be taken literally and automatically like in our collage.

Mood Board

Our Logo.

Logo Concept

In an abstract way, through a customized “g” as

O u r “g ” s ta n d s for

a person inside of an enclosed circle the logo is representing the people integrated into the

•

giving - to people the best tool to help

community. By having the “g” intersected with

connect and share their knowledge

the circle we show that we are approachable,

•

gaming - using the game theory to moti-

open and we connect with the community.

vate people

•

guidance - guide people to learn, share

and connect

•

generate - outstanding long life results

•

genuine - everything in a genuine way

Logo concept

+

P u r pl e s ta n d s for

=

In psychology, purple is a humanitarian, selfless and unlimited color being recognized as the C OM M UN I T Y

P EO P LE

T H E G U ID E

color of good judgement.

Clear Space Clear space is separating the logo from other elements such as headlines, text, imagery and the outside edge of printed materials. The x equals to the hight/wight of the logo.

Brochure design LOREM IPSUM

x

x

x

x

m i n . c l e ar s pace

x

x

x

x

T H E GU I DE I S AN O NLI NE PLAT FO R M FO R EX PLO R ATO RY LEAR NI NG

Min. Size

O N SCRE E N 55px

The minimum size described includes the clear space. The minimum sizes are applicable for displays of 72DPI. If the display screens have

5 5 px

55px

higher DPI/retina, minimum size should be adapted proportionally.

55px

On sc reen

IN PRIN T

The minimum logo width for web pages and ap-

13mm

plications is 55x55px.

In p r int

13m m

13mm

The minimum logo width for print is 13mm. The optimal width for A4 print is 49mm.

13mm

Logo variations

Primary recommended use of logo on a dark background (i.e. purple)

Logo variations

Secondary recommended use of logo on a light background (i.e. white)

Logo variations

The logo can be published only in the primary color palette on light backgrounds. This is recommended on cases of service distinction.

To better visualize and connect the brand with a specific service, it is recommended to keep a color system. For instance:

A.

B.

Do’s A.

The Guide for e-learning

B.

The Guide for gaming

C.

The Guide for business

C.

Prohibited use

It is important to not get the logo mixed up and loose the visibility. The following list contains some examples of prohibited use of the logo in order to maintain a coehensive look over the online and offline chanells.

A.

B.

C.

D.

E.

F.

Don t’s A.

Don’t recolor the logo

B.

Don’t reverse the logo

C.

Don’t skew the logo

D.

Don’t apply any effects

E.

Don’t place the logo in any color on col-

ored backgrounds

F.

Don’t place the logo in color on complex

backgrounds or photography.

Color Palette.

Our color palette #4C 3E D7 R G B 7 6/62/215 CMYK 7 9 /7 7/0/0

# D35 2BF P R IM ARY C O LO RS

R G B 211/8 2/19 1 CMYK 24/78 /0/0

# 6 6 329 8 R G B 102/5 0/15 2 CMYK 74/9 6/0/0

# FFC C 33 R G B 25 5 /204/5 1 CMYK 0/19 /8 9 /0

#FB ED 93 RGB 251/ 237/ 147 CMYK 3/ 2/ 53/ 0

#D 5FCEB RGB 213/ 252/ 235 CMYK 14/ 0/ 11/ 0

#CA D 4 FD RGB 202/ 212/ 253 CMYK 16/ 13/ 0/ 0

#6 6 6 CE8 RGB 102/ 108/ 232 CMYK 69/ 62/ 0/ 0

S EC ONDA RY C O LO R S

# 33C C C C R G B 5 1/204/204 CMYK 64/0/26/0

# FFFFFF NEUT R AL C O LO RS

R G B 25 5 /25 5 /25 5 CMYK 0/0/0/0

#312 C 4 8 RGB 49/44/ 72 CMYK 83/82/44/44

#5B 596 D RGB 92/89/ 110 CMYK 67/ 62/40/ 18

Tints and shades

TIN TS

10%

Re comm end ed var i at i o n s

2 0% 3 0%

Tints are the mixture of the brand colors with

40%

white, which increases lightness. Shades are the mixture of the brand colors with black, which

5 0%

reduces lightness. A tone is produced either

60%

by the mixture of a color with gray, or by both tinting and shading. Please note that tints and

7 0%

shades are different than color opacity.

SHA DES

Color proportion

This graphic is made to give you an idea of how you can balance the colors in The Guide branded materials.

Do’s •

use the core colors for a constant plat-

form that allows introduction of other

design elements

•

case by case, color proportion depends

on the individual application

•

from time to time please check out the

graphic to make sure you are balancing

the colors correctly.

MAIN CO LO RS

ACCE N T CO LO RS

Typography.

Heading typography The Guide primary typeface for heading on printed and online materials is Sofia Pro Condensed. The alternative for web safe usage is Questrial/Century Gothic/Arial typeface.To be used to increase contrast.

The font can be found on https://typekit.com/ fonts/sofia-pro-condensed

S ofia Pro C o n d e n s e d ABCDEFGHIJKLMNOPQRSTUVXYZ abcdefghijklmnopqrstuvxyz 0123456789&?$!

ABCDEFGHIJKLMNOPQRSTUVXYZ abcdefghijklmnopqrstuvxyz 0123456789&?$!

ABCDEFGHIJKLMNOPQRSTUVXYZ abcdefghijklmnopqrstuvxyz 0123456789&?$!

Aa

Subheading typography The Guide primary typeface for titles and subheading on printed and online materials is Sofia Pro. The alternative for web safe usage is Questrial/Century Gothic/Arial typeface.

The font can be found on https://typekit.com/ fonts/sofia-pro

S ofi a Pro ABCDEFGHIJKLMNOPQRSTUVXYZ abcdefghijklmnopqrstuvxyz 0123456789&?$!

ABCDEFGHIJKLMNOPQRSTUVXYZ abcdefghijklmnopqrstuvxyz 0123456789&?$!

ABCDEFGHIJKLMNOPQRSTUVXYZ abcdefghijklmnopqrstuvxyz 0123456789&?$!

Aa

Body typography The Guide primary typeface for body copy on printed and online materials is Sofia Pro Light.

The typeface is to use on all documents. Typical applications include letters, presentations, websites and documents. The alternative for web safe usage is Questrial/Century Gothic/Arial typeface.

Sofia Pro L ig ht ABCDEFGHIJKLMNOPQRSTUVXYZ abcdefghijklmnopqrstuvxyz 0123456789&?$!

ABCDEFGHIJKLMNOPQRSTUVXYZ abcdefghijklmnopqrstuvxyz 0123456789&?$!

ABCDEFGHIJKLMNOPQRSTUVXYZ abcdefghijklmnopqrstuvxyz 0123456789&?$!

Aa

Typography style

Boxing wizards jump Maecenas sed diam eget risus varius blandit sit amet non magna. Curabitur blandit tempus portitor.

Donec ullamcorper nulla non metus auctor.

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Curabitur blandit tempus porttitor. Etiam

H EA D I N G S SO F IA PRO ME DIUM/ Q UESTRIA L BO LD/CE N THURY GOTHIC BO LD

I N T R O D UCT I O N SO F IA PRO REGULA R/ Q UESTRIA L REGULA R

S UB H EA D I N G S SO F IA PRO S E MIBO LD/ Q UESTRIA L BO LD/CE N THURY GOTHIC BO LD

B O DY

Fringilla Ligula Ridiculus Dolor

SO F IA PRO LIGHT/ Q UESTRIA L LIGHT

• Etiam Parturient Commodo Elit Mattis Tellus Aenean Solli

B UL L ET ST Y L E

• Sem Nibh Ornare Parturient Venenatis Cras Ferment hfarn

SO F IA PRO LIGHT/ Q UESTRIA L LIGHT

• Nullam Sit Pellentesque Cursus Elit Ipsum Tortor Solkrime

Donec sed odio dui. Curabitur blandit tempus porttitor.

Vivamus sagittis lacus vel augue laoreet rutrum

B UL L ET ST Y L E SO F IA PRO E X TRA LIGHT ITA LIC/ A RIA L ITA LIC

Written communication

TH E GUI D E I S A N ON L IN E PLATFOR M FO R E XPLOR ATO RY LE A RN I N G

Nibh Cras Ullamcorper Mattis Ultricies Donec id elit non mi porta gravida at eget metus. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nulla vitae elit libero, a pharetra augue. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec id elit non mi porta gravida at eget metus.

Graphic Style.

Backgrounds

A.

B.

C.

D.

E.

F.

Recommendations You can use both solid and gradient backgrounds. It is recommended to use only the colors from the primary color palette including the tints and shades of it.

How are we using the gradients?

Gradient b a ckg ro u n ds Gradient backgrounds can be used in combination with other graphic elements or with photography. It is recommended to be used for achieving contrast and not be used excessively. Some examples can be seen on the next page.

Patterns

A.

B.

C.

D.

E.

F.

Recommendations The patterns are to be used to give the brand a particular style. It is recommended to not be used excessive and always be combined with light elements.

Corporate identity

Rebacca Ringdahl r.r@theguide.com +882-90320-067 theguide.com

The Guide is an online platform for people looking to learn exploratory

The Guide Streetname 8700 Seattle, USA

Magna Tristique Sollicitudin Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum id ligula porta felis euismod semper. Donec sed odio dui. Maecenas faucibus mollis The Guide Streetname 8700 Seattle, Usa

interdum. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

Maecenas faucibus mollis interdum. Curabitur blandit tempus porttitor. Maecenas sed diam eget risus varius blandit sit amet non magna. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit. Sed posuere consectetur est at lobortis. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

D apibu s Pellen tes qu e

Ridiculus Egestas Condimentum Donec id elit non mi porta gravida at eget metus. Cras justo odio, dapibus ac facilisis in, egestas eget quam.

The guide i s an on li n e p l a tfor m for ex plorator y learning

Photography.

Photography style

The Guide uses photography to communicate the brand with the audience. Hence, both inhouse and purchased stock imagery must comply with the following:

Do’s •

proper ownership of artwork copyright

•

photos used must be of high quality

•

imagery types: lifestyle, hobby, mood

•

students: learning, sharing, guiding

•

people: happy, fun, excited, active

•

people using tech products, business

Students Learning

Students Guiding

People Sharing

Fun

People

Passionate People

People &

Technology

Contact.

Do you want to reach us?

Ou r contact details Megadodo Interactive, LLC 2624 Western Ave, #202 Seattle WA 98121 United States For Design: Mariana Aspru mariana.aspru@gmail.com www.marianaaspru.com

ŠMegadodo Interactive, LLC. All rights reserved Design and content by Mariana Aspru