Page 1

Surfers Village Brand Style Guide September 18, 2013


Table of Contents

Introduction � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � 3 Surfers Village Signature � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � 4 Surfers Village Logo � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � 5 Clear Space Requirements� � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � 6 Corporate Colors� � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � 7 Signature Usage: White Background� � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � 8 Signature Usage: Solid Backgrounds � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � 9 Signature Usage: Color Backgrounds � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � 10 Incorrect Use of Surfers Village Signature � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � 11 Typography � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � 12 Website: Layout

� � � � � � � � � � � � � � � � � � � � � � � � � � � �� � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � �

13

Website: CSS Styles  � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � 14 Website: Patterns  � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � 16 File Format Usage � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � 17 Color Format Usage � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � 18 For Surfers Village Partners � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � 19

Surfers village Brand Style Guide // September 18, 2013

2


Introduction

Surfers Village is a leader in its field with respect to the information supplied, design and interaction with the surf and marine weather industry and public. The Surfers Village creed, and guiding business principal, is to be of service, to the surfers, the industry and surf culture. Surfers Village operates as a news service agency specializing in surfing, publishing surfing news globally. We created this Surfers Village Brand Style Guide to provide clear standards and guidelines for communicating the Surfers Village brand. Our goal is consistent representation of our brand identity, no matter where in the world we reach or what media we use to communicate. Let’s work together to uphold these standards, and keep the Surfers Village brand strong.

Surfers village Brand Style Guide // September 18, 2013

3


Surfers Village Signature

Signature

Logo

The Surfers Village Signature must include the Surfers Village Logo, the Logotype, and associated Sport Type. We use this valued corporate asset to identify our company to the world. Consistent application of the Signature reinforces brand recognition and trust.

Sport Type

For these reasons we always display the Signature as specified in this document, without modification. Use of the Surfers Village Signature as part of any other logo is prohibited. The Signature must not be combined with any other graphic element, e.g. text, illustration, or logotype. It may not be used in headlines or embedded in text. Logotype

Use of the Signature by any entity outside of Surfers Village must be requested. Usage violations should be reported immediately to Surfers Village.

Surfers village Brand Style Guide // September 18, 2013

4


Surfers Village Logo

Logo

The Surfers Village Logo may be used independently when necessary, but should in itself not be altered in anyway. The Sport Type may be used in conjunction with the Logo and has been relocated (from the Signature) to provide a more uniform mark. The size, color, font, and position of the Sport Type should not be altered.

Surfers village Brand Style Guide // September 18, 2013

5


Clear Space Requirements

X X

X

X

X

Surfers village Brand Style Guide // September 18, 2013

Please observe clear space around the Surfers Village Signature to optimize its visual impact and to reinforce brand separation. No other elements can be present in the clear space as specified in these guidelines. Clear space requirements apply to text, graphics, photos or any other elements. Any exceptions must be approved by Surfers Village.

6


Corporate Colors Surfers Village corporate colors help convey our brand personality, which is dynamic, strong, yet approachable. Consistent use of these colors is vital to our corporate identity. Please use the color palette and the color formulas and percentages as specified in this document when displaying the Surfers Village logo and designing other visual elements for Surfers Village communications materials in print and digital media.

Primary Colors

PMS CMYK RGB HEX

---------0 87 78 0 240 73 64 #F04940

---------0 0 0 0 255 255 255 #FFFFFF

---------70 63.9 62.9 62.7 46 46 46 #2E2E2E

----------79.75 20.8 27.3 .12 0 155 176 #009BB0

---------1.4 13.1 84 0 253 215 69 #FDD745

Secondary Colors

PMS CMYK RGB HEX

---------65.4 58 56.9 36.65 77 77 77 #4D4D4D

Surfers village Brand Style Guide // September 18, 2013

7


Signature Usage: White Background

The “red” full-color Signature is the preferred version, to be used on White ONLY. The “gray-scale” versions should be used when color printing is not supported.

Surfers village Brand Style Guide // September 18, 2013

8


Signature Usage: Solid Backgrounds

The “white” Signature on “red” background is the preferred use of the Surfers Village Signature. Try to avoid placing the Surfers Village Signature on a dark background. When necessary, the “white” version of the Signature should be used. These signature arrangements are acceptable for solid and dark backgrounds.

Surfers village Brand Style Guide // September 18, 2013

9


Signature Usage: Color Backgrounds

If necessary, the Surfers Village Signature can be placed on one of the Primary or Secondary colors. NEVER place the Signature over a gradient. The default version is the “red” background. Again, the use of a colored background, except for “red”, should be limited.

Surfers village Brand Style Guide // September 18, 2013

10


Incorrect Use of Surfers Village Signature To protect the value of the Surfers Village corporate identity, it is important to use the Surfers Village Signature as it is presented in these guidelines without modification and in full compliance with the following:

VILLAGE 1.  Do not delete any portion of it.

2.  Do not use non-approved or altered colors.

3.  Do not reposition or rotate the artwork.

4.  Do not use non-approved typefaces.

5.  Do not distort the signature in any way.

6.  Do not use the signatures meant for white backgrounds on dark or colored backgrounds.

7.  Do not place it on pattered or textured backgrounds or use it as a screen or tint. See the Web section for an exception.

8.  Use caution when placing over photography to not cause the Signature to be illegible or difficult to identify.

9.  Do not obscure it with any overprint.

10.  Do not use it as a repeated pattern or decorative device.

11.  Do not place any other elements in the designated clear space

Surfers village Brand Style Guide // September 18, 2013

11


Typography

LOVELO BLACK ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789 !@#$%^&*() Gotham Book, Medium, Bold, Black, Condensed Medium, Condensed Bold abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789 !@#$%^&*() Merriweather Regular, Bold, Heavy abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789 !@#$%^&*() Arial Regular, Bold abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ

Typography is a key element of the Surfers Village brand’s communication in print, web, mobile and video environments. As with graphical elements, our typography reflects the dynamic yet professional personality of the Surfers Village brand. Lovelo should be used for high prominent elements. It should be used sparingly, never used with lengthy amounts of text, or small print. Gotham font family is a versatile font that can be displayed normally or condensed. It should be used for headers, medium lengths of text, and as a supporting text to Lovelo. When combined with Lovelo it should always be smaller in size. Merriweather should be used for setting body text. This typeface is used with lengthy amounts text and for small text. Arial can be used for small text and/or small label, meta data, and lengthy amounts of text.

0123456789 !@#$%^&*()

Surfers village Brand Style Guide // September 18, 2013

12


Website: Layout 20px

300px

35px

300px

35px

300px

20px

The Surfers Village website is a fluid and responsive design that starts with a 3-column, 300px grid. The structure smoothly transitions to multiple resolutions to accommodate the growing number of Internet enabled devices – including desktops, laptops, tablets, and smartphones. The site has been optimized to integrate common and standard adverts. Due to the quantity and richness of the site’s content plenty of horizontal white-space has been given to distinguish between elements and sections of the site.

Surfers village Brand Style Guide // September 18, 2013

13


Website: CSS Styles

Surfers village Brand Style Guide // September 18, 2013

14


Surfers village Brand Style Guide // September 18, 2013

15


Website: Patterns

Three checkered patterns are used on the Surfers Village website. Patterned backgrounds add depth and texture to the site while also helping to separate key elements. These patterns should be used sparingly and should not distract from the site’s main content. The “red” pattern is the only exception where the Surfers Village Signature can be placed over a patterned background.

Surfers village Brand Style Guide // September 18, 2013

16


File Format Usage PDF This is the preferred file format for reproducing the Surfers Village Signature in all use cases. PDF files are scalable and resolution-independent, making them ideally suited for reproduction in Pantone (Spot), Process (CMYK), and on screen (RGB) environments.

JPG Use JPG images for photographs and other images that have millions of colors. It is called a “lossy� compression because some of the image information is lost when the image is compressed. The JPG format is not suited to images with text, large blocks of solid color, and simple shapes with crisp edges.

AI (Adobe Illustrator) Source This is the source file for the Surfers Village Signature. It contains all variations of the Signature including layered information and separated artwork.

PNG PNG graphics have a better compression rate than GIF images which result in smaller file size. PNG files offer alpha transparency. PNG images are also not well supported on older cell phones.

NOTE: Please do not edit any of the AI or PDF files.

GIF GIF stands for (Graphics Interchange Format). GIF files are RGB only, resolution-dependent @ 72 ppi, and limited to a 256-color maximum color palette. These files may be scaled down, but not up. Use GIF ONLY for electronic media and NEVER for print.

Surfers village Brand Style Guide // September 18, 2013

17


Color Format Usage RGB RGB (Red, Green, Blue) files should only be used when creating artwork for viewing on screen. This can be for use within raster programs like Adobe Photoshop when creating graphics for the web. Or for placement into page layout programs such as Adobe InDesign or QuarkXPress for creation of PDFs to be viewed on screen, or into PowerPoint for presentation decks.

HEX HTML colors are defined using a hexadecimal notation (HEX) for the combination of Red, Green, and Blue color values (RGB). A hex triplet is a six-digit, three-byte hexadecimal number used in HTML, CSS, SVG, and other computing applications, to represent colors.

Spot Color Used exclusively for print, these files are to be placed into page layout programs for output to lithographic printing using specific spot ink colors. CMYK Used exclusively for print, the colors within CMYK files have been separated into Cyan, Magenta, Yellow and Black. These files are to be placed into page layout programs such as Adobe InDesign or QuarkXPress for output to process lithography or digital printing. Do not use these files for the creation of artwork that will be viewed on screen.

Surfers village Brand Style Guide // September 18, 2013

18


For Surfers Village Partners Surfers Village offers its materials through a growing network of partners worldwide. These partners are required to follow all of the guidelines described in this document. Active partners in good standing are entitled to make use of certain images and/or marketing materials provided by Surfers Village to support their marketing. Note: Surfers Village retains sole ownership of all images and materials. Images and materials may not be used by partners to promote or sell any product or technology not available from Surfers Village.

Images Images may not be altered. They may not be used without prior permission, and must be identified with a title or caption identifying the Surfers Village products or solutions pictured.

specifications. This may be done by resizing artwork in its entirety, and proportionally, without distortion; or •

add a Surfers Village partner approved identification if and where space is provided (see below).

Surfers Village may specify, for certain marketing materials, that Partners may incorporate one or several of the following elements. •

Partner logo

Partner’s contact information (address, phone, email, web)

Note: Partner logos placed on Surfers Village marketing materials must not alter or replace the Surfers Village Signature and may not be combined with the Signature.

Internet Domains Marketing Materials Marketing materials may include but are not limited to collateral, emails, ads, web pages or videos created by Surfers Village and made available for use by partners. These materials may not be altered in whole or in part, for any reason except to: •

translate textual content from English to the partner’s native language without modifying or altering the facts and meaning of the content;

resize materials when necessary due to physical

Surfers village Brand Style Guide // September 18, 2013

Partners may not use the Surfers Village name or any Surfers Village names in any domain names. Web Pages Surfers Village partners must include the Surfers Village Signature on any web page that is promoting Surfers Village (the company, products, solutions, services or other information about Surfers Village).

19

Surfersvillage.com  

Style guide for the rebranding project, carried out in 2012.

Surfersvillage.com  

Style guide for the rebranding project, carried out in 2012.

Advertisement