2

3 Brand Ethos

4 Colours5 Main6 Supporting

7 Logo8 Usage9 Usage10 Sizes11 Sizes12 Sizes

13 Illustrations14 Style15 Style16 Sizes17 Pattern

18 Print19 Posters20 Posters

21 Business Cards22 Letterheads

23 Digital24 Icons25 Interaction standards26 Layouts27 Layouts

28 Typography29 Trebuchet30 Horse Hand32 Optima

32 Motion33 Youtube34 Loading Screen35 Animation

3

Can you eat an apple? yes.Can you eat a fish? yes. Can you eat a dog? Yes, though it may be frowned upon in your country.Can you eat play dough? No.Can you eat a plane? technically, yes.

‘Can I Eat It’ is a brand that seeks to connect children with the wonder of the world. Through Exploration they are encouraged to look at the world from a different perspective, their mouths. It is so much more than an app about food though. ‘Can I Eat It’ is an experience, an adventure and a way of life. The brand seeks to bring joy and excitement to the lives of children through digital media.

To give you an idea of what the brand is trying to achieve look at the wordswe want to come to mind when the audience uses ‘Can I Eat It’

AliveAccessibleAwesomeExcitingFunJoyful

PlayfulVibrantColourfulBusyIntenseFriendly

HappyKindEnergyPlayful

4

The colours of this brand are very important, as they are one of the key elements that give it the excitement and vibrancy that makes it attractive and accessible to children and par-ents. ‘Can I Eat It’ is to be saturated in these colours so it is important that you know how and which colours to use so as to maintain the brand’s ethos and culture

5

These are the main brand colours and are to be used for the colouring of the logo and for internal media. All coloured media must use this palet at the least. If all five oranges are to be used together they must be in order of lightest to darkest to maintain the step gradient motif through out the brand. These are the foundation upon which the brand is built, for the warmth in the orange, and the youth-fulness and innocence of the blue. If you mess these up everything will look stupid, so stick to the colour codes provided.

R:255 G:242 B:127 C:1 M:0 Y:62 K:0Pantone 100u

R:253 G:218 B:122C:1 M:13 Y:62 K:0Pantone 100u 75% Pantone 157u 25%

R:250 G:195 B:122C:1 M:38 Y:64 K:0Pantone 100u 50% Pantone 157u 50%

R:249 G:171 B:106C:0 M:38 Y:64 K:0Pantone 100u 25% Pantone 157u 75%

R:249 G:149 B:98C:0 M:51 Y:65 K:0Pantone 157u

R:138 G:200 B:236C:42 M:8 Y:1 K:0Pantone 2905u

6

These are the supporting colours for the brand, used in illustration and complex scenes to introduce variety to the com-position and enrich the colour scheme. This is important because otherwise everything starts to look ridiculous. This is an app and an ethos that supports di-versity, exploration and emphasises how big the world is. If we only use blue and orange for our colour schemes we are gonna look like some overly happy bank website from 2005 and nobody wants that to happen

R:138 G:137 B:194C:53 M:47 Y:0 K:0

R:226 G:241 B:250C:14 M:1 Y:2 K:0

R:211 G:231 B:246C:20 M:4 Y:1 K:0

R:181 G:226 B:246C:31 M:4 Y:0 K:0

R:126 G:143 B:199C:57 M:42 Y:0 K:0

R:166 G:212 B:189C:40 M:0 Y:33 K:0

R:135 G:205 B:209C:50 M:0 Y:21 K:0

R:234 G:85 B:81C:0 M:78 Y:63 K:0

R:139 G:195 B:113C:52 M:0 Y:69 K:0

R:236 G:151 B:188C:4 M:53 Y:4 K:0

7

The Logo, the pride and joy of this brand. It acts to sum up the entire ethos and desire of ‘Can I Eat It’ and ‘Happy Horse Studios’ into one fan-tastic beaming Equine beast. It acts as the app when the app itself is not on display. It contrasts with the illus-trations in the app, but this is good. It is more solid, it is the line in the sand and the benchmark to which everything else aspires to (within the app).The solid lines and minimal colouring all work to differentiate and empha-sise this character from all the rest.

8

There are two versions of the Logo, colour and black and white. The colour should be used as often as possible, black and white only when required by print or going onto a coloured background.

The symbol may be used by itself when space does not allow for the logotype, but the logotype must not be used by itself.

9

Don’t put the coloured logo on colour-ed backgrounds. The Black and white one should be the only logo used on a coloured background.

If an illustrated background still has a reasonable degree of white on it then the coloured logo is good to go, other wise don’t do it.

Only use light coloured backgrounds, no dark blacks or anything (which are not included in the colour palette, for good reason ok). There will not be enough contrast for the black lines.Don’t do drugs either this is a chil-dren’s app for goodness sake

10

Best not to go below 105pt (37mm) for the logo, anything less is too il-legible. The straight symbol can go smaller, but best to be careful with that and avoid it as much as possible.

The Logo can go as big as it needs to be, just never crop it.

When paired with other logos, the horse should always be smiling to-wards the logo, not away. The Horse is a friendly horse and we must main-tain her good manners and social standing amongst other trademarks

‘Dogs who skate’ is the fictional logo used as an example to demonstrate which way to face

105pt, good

Not so good

DOGS WHO

SKATE

DOGS WHO

SKATE

Don’t turn your back on the dogs who skate, Horse

Look just never crop ever.

That’s better!

11

Allow at least a ‘can’s width of space around the logo at all times always.Space to breath is paramount, she’s a horse and horses breathe air just like you and me. Do you know how bad the brand would look if the horse died? The answer is horrifically bad so be sensible and follow the rules

12

Don’t ever distort the logo. No squashing, no stretching, no twisting or gltiching of any kind.

Don’t place the logotype anywhere except right below the logo

13

What would the colours be with nothing to apply them to?

Illustration is the most important part of this brand as it establishes the feel and style that is carried throughout the brand, and it all started with the horse in the logo. THe illustrations are fun, vi-brant, lively and friendly. Nothing scary or (dare I say) real, because lets face it real life is cool but nobody wants their child discovering they can technically eat a dog if said dog look remarkably like any dog they have ever seen in real life. I dont know where that path ends and I dont want to.

Illustration suspends belief and keeps the viewer within the brand emotions and vibes.

14

If new graphics are to be created it is important to follow the brand style.

Do not make them too angular, or geometric. Objects should be soft and lumpy as much as possible.fig 1

Eyes should always be round dots, or slightly elongated dots for ‘scary’ creatures. Other styles have a ten-dency to look creepy or disturbing.fig 2 and fig 3

fig 2 See what we mean

fig 1

fig 3

15

Nothing too realistic, objects should be abstract representational. We don’t want any kid recognising their pet or power drill and getting ideasfig 4

Legs and arms should be simple, but not always noodles. noodle legs are okay fromt ime to time, but it is important to maintain some interest amidst the chaos fig 4

Inanimate objects can have faces, but only one in every 20 should. This is just to spice it up a bit lets not go overboard - fig 5

fig 4

fig 5 See this is okay this though, no

16

It is important to maintain the correct sizing for characters. Given the brand’s aim to encourage exploration and em-phasise the diversity of content availa-ble objects must be given appropriate contrast to distinguish each thing. At the same time objects must not be too prominent because we don’t want one to stand out too much, individualism is a threat to our power. I’m kidding about that, but they mustn’t stand out too much as that disrupts the flow and we are trying to emphasise the crowd of objects. fig 6

When putting together an illustration it is better to give objects relationships and reasons to be where they are. It doesn’t have to be a good reason, just something to act as mental closure. The example to the right: why is the cat floating? What is the chair doing? The image next to it works better: The cat is on the chair, nobody is too fazed that its floating because a purpose has already been established for it fig 7

fig 6

fig 7

17

Pattern is used mostly for print and smaller pieces to provide a sense of multitude and exploration without the intensity of a full on illustration. A pat-tern is provided for use in an Adobe Il-lustrator vector format to save the time of constructing a new one each time, as well as allowing unity throughout the brand’s material

Don’t cut the pattern off sharp, always leave the pieces in their wholeness fig 8

Don’t re-colour the pattern ok. This is a serious brand don’t go messing about with these things. fig 9

Don’t use the pattern when you are too lazy to make an illustration. We have a library of images seriously it’s not hard to do

fig 8

fig 9

18

Print media does play a part in this company, the world has not yet left behind the printed word and with that comes business cards, letters and fan-tastic posters.

There is no set stock for the brand, but a matte effect on printing is al-ways desired far more than gloss.

So long as the correct colour val-ues (see the Colours section of this style guide) are used then everything should print perfectly.

Print is a very precise medium so be careful what you create, once it’s done there’s no going back

‘Happy Horse Studios’ seeks to exist across media like an amphibian exists across land and water, so make it fun and make it natural

19

Posters are a great opportunity for creative expression, and can offer a lot of freedom. It is tempting, and fashionable, to create great big mini-malist typographic posters. Don’t.

‘Can I Eat It’ is all about the busi-ness, the chaos and the excitement of crowds and choices. Compositions should follow this, including colourful and complex illustrations. The envi-ronments included should be fun and silly - it is more than okay to have a truck on a mountainside, or a giant cheese hiding amongst the trees.

Type on the poster should be legible and large, surrounded by plenty of white space. This provides a break from the saturated illustrations, and gives the type room to breathe.

This is simplistic, and boring. Best to avoid this at all costs

20

A good balance of colours is neces-sary. The image will fill up with orang-es, as the steps in the gradient make it ideal for depth and subtle variation. Throw a red in sometimes, throw a green and purple or pink or something to break the flow up a bit. Sometimes it’s okay to colour something the way it actually looks. Sometimes it’s not, all things in moderation.

Don’t align things, there should be no strong grid for the illustrations

To the right is an example of a well constructed poster with all the ele-ments mentioned before

An interactive, entertaining app for kids and parents alike.

Buy it for your kids.Buy it for yourself

Children explore this world with all of their senses. Everything they experience seems to raise more questions. From the sweet smell of flowers to the shiny body of a wriggly worm, there is a question that often goes unasked. Even when its answered the answer is all too often dull and over-protective. Snuffing out the light of inquiry and self initiated learning.It doesn’t have to be this way anymore.

21

This business card format is set to re-enforce the logo and style as much as possible. All type should be set in ‘Horse Hand’ standard, there should not be enough information on the card that legibility becomes a prob-lem.

Only give your business card to cool people. We don’t want our brand to be associated with people who are not cool.

22

Dear child

Los caballos muestran una gran variedad de colores de capa y de marcas distintivas, que dan lugar a amplio vocabulario descriptivo especializado. A menudo un caballo se clasifica antes por el color de su capa que por su raza o sexo. Los caballos del mismo color de capa se pueden distinguir por alguna marca blanca distribuida a lo largo de sus cuerpos, que junto a los patrones moteados se heredan de forma independiente de color de la capa.

Se han identificado muchos genes que dan diferentes colores a la capa de los caballos, aunque continúan las investigaciones para identificar los demás factores que dan origen a distintos rasgos. Una de las primeras relaciones genéticas que se entendieron fue la existente entre el color rojizo recesivo y el dominante negro, que está controlado por el receptor de melanocortina. Otros alelos controlan el moteado, el intercalado de pelos blancos, la supresión o dilución del color, y otros efectos que crean las docenas de posibles colores de capa de los caballos.

Las capas alazana, castaña y negra son los colores equinos básicos. Estos colores son modificados por lo menos diez genes que crean el resto de los colores, incluyendo diluciones como el palomino o los patrones de manchas como los pintos. No todos los caballos blancos tienen una capa blanca de nacimiento, a menudo los caballos blancos de mediana edad eran caballos grises al nacer. Los grises nacen con un tono más oscuro y se vuelven grises con la edad, y ambos generalmente tienen la piel negra bajo sus capas de pelo blanco (con la excepción de las pieles rosa bajo las marcas blancas). Sólo los caballos que nacen con la capa blanca tienen la piel rosada, algo que es una característica rara.

From Horse

The letter is bound to include im-portant information, so the design is kept to being quite empty so as not to overpower the type.

Set the type in ‘Optima’ 10pt with 12pt leading. This is the only situation where this typographic choice is to be used, as it is exclusively for in-compa-ny correspondence and printed type.

Return address and contact details is still to be written in ‘Horse Hand’ standard.

23

The App is the product and what everything is centred around, all the rules involved in all other media still apply here, especially illustration.

Legibility is very important, every element needs to very distinct and easy to differentiate from other. Content comes before anything else for the app. Text is large and brisk, only the essentials. While the visual style for other media is quite busy and cluttered, it is more important in the app to allow space for elements as children have imprecise hands and parents have chubby fingers. In place of detailed illustrations is col-our. Everything is colourful, no white backgrounds ever ok. Transitions are simple and fun, nothing intense or halted.

This is the lifeblood, this is the reason this style guide exists. Treat it with care, be tender yet firm. Weild it like a sword of freedom and joy

24

The icons for each device are as follows

Windows tilelarge 173pxsmall 72px

IOS IconsiPad Retina 144pxiPhone4 Retina 114px

Android icon96px hdpi72px hdpi

Windows Tiles, Actual size

IOS Icons, Actual size

Android Icons, Actual size

25

There are some simple guides to follow to ensure your interactive app deal works as it should.

Interactivity - Rounded, soft cornersNon Interactive - Square, hard corners

All titles must be set in Horse Hand, and in White or Red, White is pre-ferred.

All main body copy :Trebuchet Regular 28px 30px leading.White

All secondary (parent) body copy: Trebuchet Regular 13px 15px leadingWhite

hard corners, non-interactive

soft corners, interactive

TITLE

26

Main screen always displays only what is absolutely necessary.Top Heavy, because the text box expands when spelling is bad. We are dealing with children so their spelling is always going to be bad

The background ties in with the brand itself, and is important in distinguish-ing the main screen from the rest of the app.

The name is in red to separate it from the rest of the titles in the app which are white. Because of this, red should only be used on VERY important titles, like say the name fo the app, or obituary listings

plenty ofspacehere

balance is important

Red title

27

Object display pic is 330px by 450px

Sensitivity indicator is 210px by 450px

Object title is 90px high and as wide as required

Text should be no more than three lines

Link buttons are always 90px by 90px

Larger links and faces are 210px by 210px

This app is about fun and entertain-ment, not about accurate measures. Let the writing reflect that.

Work from the dev files provided and you should be sweet with measure-ments being already logged as var-iables. I know you are probably the graphic designer not the developer but this is the 21st century and our roles change like the wind.

330px450px

as needed90px

90px90px

210px210px

30px vertical space

28

Typography is important. We’re all graphic designers here we know this is true.Follow the instructions here and set a solid foundation for the ridiculous and lively illustrations to live on.

Communication is at the heart of what all of this is for, and for that reason all of the type is quite big. Yes we are aware that small type is pret-ty, but that comes from a time when we were charged a lot per page, and no one had the luxury of space. On screen and even in our print, this is no longer a problem. So keep to the sizes. Big type, like a Balloon or Santa Claus, is easy to see and much more enjoyable.

29

Trebuchet has been chosen as a type-face for the app and brand because it is ridiculously legible, forming very clear and readable shapes. It provides nice contrast to the titles and reaches the audience most appropriately.

Trebuchet is used for all body copy, including the body copy for this style guide. The leading is always a mul-tiple of 15, and the font height is a couple of points below the leading, this difference gets larger the larger the type. However type should never really be larger than 28pt if it is set in Trebuchet, any larger type would be set in something different

Use it in posters for body copy. Note-worthy was used once but lets not go there again

28pt 30pt leading for all childrens body copy

Rad dog is a superhero who can do sweet tricks and listens to good music. He is always polite

Bold for Paragraph titles13pt 15pt leading for all other (or ‘Parent’) body copy

Linneo clasificó a los caballos domésticos en 1758 en la especie Equus caballus. Al demostrarse que los caballos domésticos actuales y su antepasado silvestre extinto, cla-sificado como Equus ferus (caballo salvaje), pertenecían a una misma especie debía asignársele un único nombre científico. Re específico el primero en haber sido

30

‘Horse Hand’ is ‘Can I Eat It’s custom typeface, made specially for the brand and it’s products.It is to be used for titles and small pieces of important information.It is never to be used for body copy, nor is it ever to be given a stoke on the outlines.Be sure that kerning is done well, it is not as regular as an industrial type-face as needs more care to balance the whitespace.

31

Optima is only to be used in conjunc-tion with ‘Horse Hand’.It is chosen because it unifies with the stroke variation and the sans-serif style of Horse Hand while being suita-bly different and a little more profes-sional. It is only to be used in print for professional letters and correspond-ence.

10pt 12pt leading for all Body copy

Los caballos muestran una gran variedad de colores de capa y de marcas distin-tivas, que dan lugar a amplio vocabulario descriptivo especializado. A menudo un caballo se clasifica antes por el color de su capa que por su raza o sexo. Los caballos del mismo color de capa se pueden distinguir por alguna marca blanca distribuida a lo largo de sus cuerpos, que junto a los patrones moteados se here-dan de forma independiente de color de la capa.

Se han identificado muchos genes que dan diferentes colores a la capa de los caballos, aunque continúan las investigaciones para identificar los demás fac-tores que dan origen a distintos rasgos. Una de las primeras relaciones genéticas que se entendieron fue la existente entre el color rojizo recesivo y el dominante negro, que está controlado por el receptor de melanocortina. Otros alelos con-trolan el moteado, el intercalado de pelos blancos, la supresión o dilución del color, y otros efectos que crean las docenas de posibles colores de capa de los caballos.

Las capas alazana, castaña y negra son los colores equinos básicos. Estos colores son modificados por lo menos diez genes que crean el resto de los colores, incluyendo diluciones como el palomino o los patrones de manchas como los pintos. No todos los caballos blancos tienen una capa blanca de naci-miento, a menudo los caballos blancos de mediana edad eran caballos grises al nacer. Los grises nacen con un tono más oscuro y se vuelven grises con la edad, y ambos generalmente tienen la piel negra bajo sus capas de pelo blanco (con la excepción de las pieles rosa bajo las marcas blancas). Sólo los caballos que nacen con la capa blanca tienen la piel rosada, algo que es una característica rara.

32

Motion helps the animals and objects to come alive, and really sells the app to parents and children watching you-tube. The music plays an important part too, upbeat and chirpy to really reinforce the brand’s ethos.

Make it Funby Sascha GiebelLength — 72 secondsRhythm — 184 BPM

There is not enough time in 15 sec-onds to show a demonstration of the app, it is better to sell the mood and emotions related to it.

The loading screen is less intense, it is simply a lead-in tot he app itself, and as such features no brand placement or anything of that sort as the app itself is the brand.

Living things move, dead things don’t. During these sets of motion graphics be sure that everything moves, as a dead app is exactly the opposite of what we want

33

The screen changes with the beat, showing different objects as it goes

The objects reach a crecendo with everything appearing on screen, the logo then descends and the dances in

She dances while objects float in the background, the logotype disappears to reveal a call to action

34

A personified pear is slowly revealed as the app loads to indicate progress

As the pear is made whole the step gradient oranges animate in to create the main screen

35

When animating the animals and ob-jects movable joints must move in a fluid motion.They cannot move in snappy motion, must be gentle and fun. The objects must also rotate and translate as the animate, they cannot stay still in space. This gives them more life and more reality, as things do not stay static in the real world.

For eye blink animations the lids must snap open. Tween for open to closed, but no tween for closed to open. This is important, things look like they are high as balls if they blink with even motion. We do not in any way pro-mote drug use. This is a children’s app