Punchin Trudy - Brand Manual

Page 1

BRAND

MANUAL


NEX


04 The brand main logotype simplified version

08 The typography logotype text

14 The colours brand application on backgrounds

18 The correct usage 26 Credits


BRAN

THE


This is the main version of the logo and it should always

be used if possible with a light clean background. This composition is indivisible, it should always be used as it appears above. Altough there are some exceptions that we will see as we follow along the manual.

5


The main logo

There is no max size for the main logo.

100px wide / 35mm wide. Min size of the main logotype.

The main version of the logo should never be used in smaller sizes than 100px wide or 35mm wide.

6


The simplified version

100px wide / 35mm wide. Max size of the simplified logo.

50px wide / 10mm wide. Min size of the simplified logo.

The simplified version of the logo should never be used in a bigger size than 100px wide or 35mm.

And it should never be reproduced smaller that it appears here, 50px wide (or 10mm wide).

There is a simplified version for smaller sizes, when the logo needs to be used in a smaller size than 100px wide in the screen or it needs to be printed out smaller than 35mm wide, we need to use this simplified version.

7


graph

typo

THE


PUNCHIN TRUDY

The words ‘PUNCHIN TRUDY‘ written in TREND SANS ONE font.

The original main logotype.

TREND SANS ONE is the font that was used to develop

PUNCHIN TRUDY’S logotype. The TREND FONT FAMILY is a key element in the identity of this brand. It should be used in the headings in any kind of digital or printed publication of this brand.

9


TREND SANS ONE ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789()!?#$&”’+-=/.:;<>{}[]*

TREND SANS FOUR ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789()!?#$&”’+-=/.:;<>{}[]*

TREND SANS FIVE ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789()!?#$&”’+-=/.:;<>{}[]* 10


TREND SLAB ONE ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789()!?#$&”’+-=/.:;<>{}[]*

TREND SLAB FOUR ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789()!?#$&”’+-=/.:;<>{}[]*

TREND SLAB FIVE ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789()!?#$&”’+-=/.:;<>{}[]* 11


MAKE SURE TO USE TREND IN HEADINGS And Sansation in the body text for any digital or printed publication of PUNCHIN TRUDY’s brand. Don’t use any other font as a general rule. Why does it matter? It is really important to develop a clear, strong and consistent brand. Over the time it should follow the same rules and principles, and typography is a fundamental element.

But what about the web? None of this fonts are web safe fonts. Yeah, you’re right. But fortunately nowadays there is no problem to safely use any font you like in the web. With the rule @font-face in CSS3 we can import and display any font in our web and the user will see it with no problem.

SANSATION font for body text. Sansation is the comple-

mentary font of this brand. Together with Trend font family, Sansation is the font in which the content of the publications should be set. As an example, the body text of this manual is using Sansation font.

12


SANSATION REGULAR ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789()!?#$&”’+-=/.:;<>{}[]*

SANSATION BOLD ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789()!?#$&”’+-=/.:;<>{}[]*

SANSATION ITALIC ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789()!?#$&”’+-=/.:;<>{}[]* 13


OUr

COL

THE


PMS 802 CMYK (56, 0, 66, 13) RGB (171, 255, 0)

White CMYK (0, 0, 0, 0) RGB (255, 255, 255)

Black CMYK (0, 0, 0, 100) RGB (0, 0, 0)

Green, white and black are the colour components of this

brand. The logo can never bee used in any different combination of colours. There are different variants of the logo whose aim is to achieve the highest effectivity possible when being used in different conditions.

15


Light background logo versions

The three available variants of the main logo when it is used against light backgrounds. *Note that you can’t exchange this variants with the ones on the right page as some outlines or shapes will be missing.

The two available variants of the simplified logo when appearing on a light background. Reproduced here at their maximum size (100px wide). There is no color version of the simplified logo.

16


Dark background logo versions

The three available variants of the main logo when it is used against dark backgrounds.

The two available variants of the simplified logo when appearing on a dark background.

17


usag

THE correc


What is the most appropriate option?

You should always pay attention to the background in

which you are going to use the logo. You should ask yourself: Is it dark enough to use the negative version of the logo? Your decision may not only depend in the concret background but in the rest of the elements of your design as well, as a whole. You should also be careful when reproducing the logo in small sizes, there are some rules about when to use the simplified version and when the original one.

19


The main version of the logo doesn’t have a maximum size.

20

100px / 35mm

The minimum size in which the main logo can be used.

100px / 35mm

The maximum size in which the simplified logo can be used.

50px / 10mm

The minimum size in which the simplified logo can be used.


The logotype, composed with TREND SANS ONE font.

The symbol, a graphical representation of a “punch“, with the shape of a star composed by two triangles.

The logotype and the symbol can only be used indepen-

dently from each other as an exception. Most of the times (if not always), the logo will be used as the composition of both of them, in one only possible way, the way it appears several times along this manual. To understand it better, in the next pages there are some examples of how the logo should be used and how it can’t be used.

21


The correct usage

Make sure to leave enough margin around the logo. The optimal margin size is 1/10 of the width of the logo. In this example, we’ve represented the margin in green. When the logo width is 75mm we set a margin of 7.5mm around the logo.

75mm

7.5 mm

Be sure that you’re chosing the appropiate version of the logo when you need to place it in a given background. Try to achieve the maximum possible contrast between the colors of the logo and the background. Any of the versions above could be used in a neutral gray background.

22


You should never...

Rotate the logo in any direction.

Reflect the logo in any direction.

Scale the logotype disproportionately.

23


You should never ever...

Apply a drop shadow or any other kind of effect. The logo should always be used as it is.

Use the simplified logo in a bigger size than 35mm/100px wide. Remember: this version has been designed only for very tiny sizes.

PUNCHIN TRUDY

Literally write “PUNCHIN TRUDY“ using TREND or in any other font and use that composition instead of the logotype.

24

Convert the logo into “grayscale” or print it out in black and white. Use the ready logo versions in black and white for this purpose


You really shouldn’t...

Create a different composition with the logotype and the symbol. If as an exception you need to use one of this two elements, do it separately, use only one of them: the logotype or the symbol.

Change the colors of the logo in any way. You should always use the existing variations of the logo with no color alteration on it.

Use the colored logo in a background with a similar green.

25


The brand PUNCHIN TRUDY punchintrudy.com trudy@punchintrudy.com

The designer Pisto Casero pistocasero.com contact@pistocasero.com

Trend font family Daniel Hernåndez Paula Nazal Selaive Latinotype – latinotype.com

Sansation font family Bernd Montag dafont.com/bernd-montag.d1610 berndmontag@gmx.de

26


credit

THE



Turn static files into dynamic content formats.

Create a flipbook
Issuu converts static files into: digital portfolios, online yearbooks, online catalogs, digital photo albums and more. Sign up and create your flipbook.