Page 1

Brand Guidelines


Table of Contents

Foursquare Identity Guideline

The Brand

05

Identity

09

Typography

20

Secondary Graphics

23

Design Applications

28


The Brand

Introduction Mission Statement


Introduction

Foursquare Identity Guideline

Foursquare, stylized as foursquare, is a location-based social networking website for mobile devices, such as smartphones. The service was created in 2009 by Dennis Crowley and Naveen Selvadurai. Crowley had previously founded the similar project Dodgeball as his graduate thesis project in the Interactive Telecommunications Program (ITP) at New York University. Google bought Dodgeball in 2005 and shut it down in 2009, replacing it with Google Latitude. Foursquare is the second iteration of the same idea, that people can use mobile devices to interact with their environment. As of April 2012, the company reported it had 20 million registered users. Male and female users are equally represented and also 50 percent of users are outside the US. In June, Foursquare released a new version of its mobile app available on iPhone and Android. It supports 10 other languages than English.


Identity

Overview Logo Variations Clear Space Sizing Color Palette Improper Usage


Overview

10

Foursquare Identity Guideline

Primary Logo The Foursquare logo is comprised of the visual mark, which is the “4� symbol, plus the geometric outline coupled with the wordmark, which is a customized typeface. The entired Foursquare logo results when the two elements are strategically locked up or organized together like the stacked lock up shown here.

x

Horizontal Logo This is the secondary choice for the logo format. It should be used when there is not enough vertical space to properly read the stacked logo.

x


Logo Variations

Sometimes production constraints will force the logo to be displayed in different ways. To the right are the only acceptable variations of the logo that ensure brand consistency.

Foursquare Identity Guideline

11

Grayscale Logo

White Logo on Black

This version should be used only when there are production limits such as using standard black and white copier.

This version should be used only when the logo is placed on a dark background with production limitations.

Full Color Logo

White Logo on Blue

This version should be used in all cases when being placed over a light background

This version should be used in compositions highlighting the primary color blue.


Clear Space (Veritcal Logo)

Foursquare Identity Guideline

12

x

Vertical

x

To help ensure that the logo always looks its best and does not get cluttered, please use the spacing guideline provided here for both vertical and horizontal communication. x x x x = the height of the letter x in the words

x

The Difference in Clear Space There is less clear space in the online format than in the print format of the logo. This is due to certain circumstances where the online format will have layout constraints due to programming needs. However, more clear space is generally preferred.

x

x x x


Sizing (Vertical Logo)

Foursquare Identity Guideline

Standard Size

Minimum Size Print If you need to make the logo smaller than the minimum size requirements shown here, please contact the Foursquare brand team before you proceed.

Minimum Size Online

1 in .474 in

72 px 34 px

13


Clear Space (Horizontal Logo)

14

Foursquare Identity Guideline

x

Horizontal To help ensure that the logo always looks its best and does not get cluttered, please use the spacing guideline provided here for both vertical and horizontal communication.

.5x

x .5x x x = the height of the letter x in the words

.5x .5x

The Difference in Clear Space There is less clear space in the online format than in the print format of the logo. This is due to certain circumstances where the online format will have layout constraints due to programming needs. However, more clear space is generally preferred.

x .5x .5x


Sizing (Horizontal Logo)

Foursquare Identity Guideline

Standard Size

Minimum Size Print If you need to make the logo smaller than the minimum size requirements shown here, please contact the Foursquare brand team before you proceed.

Minimum Size Online

1 in .38 in

72 px 27 px

15


Alternative Logos

Logotype Usage (without symbol) For use in email marketing and stationery

Horizontal Logo Quia vitia volorporit labo. Dolorat emquae. Igenimod quae numqui dolum, sequaecum quam dem et volorehendi temquae volupta eperspe cullabo repersp elique pore quam

Foursquare Identity Guideline

16


Color Specifications

Foursquare Identity Guideline

17

Color Palette The Foursquare color palette is bold and expressive with a deep, engaging texture. To ensure immediate recognition and overall differentiation for the Foursquare brand, it is important to note the full saturation of colors. There are no screen values. As such, the color palette, with its bright blue tones and expressive grays, is flexible enought for any medium.

Supportive Colors The Foursquare color palette is bold and expressive with a deep, engaging texture. To ensure immediate recognition and overall differentiation for the Foursquare brand, it is important to note the full saturation of colors. There are no screen values. As such, the color palette, with its bright blue tones and expressive grays, is flexible enought for any medium.

C= 0 M= 0 Y= 0 K= 35

C= 0 M= 0 Y= 0 K= 45

C= 1 M= 10 Y= 84 K= 0


Improper Usage

Foursquare Identity Guideline

18

Don’ts

Distortions of any forms

Not Right

The treatments and layouts shown here are examples of techniques that should never be applied to the visual mark under any circumstances.

Do not change the scaling of the logo eihter vertically or horizontally.

Do not rotate the logo.

Not Outstanding

Not Cool

Do not add embellishments like drop shadows embossings etc. to the symbol.

Do not use this logo on a busy background or in an area of image that does not provide enought contrast for the logo.


Improper Usage

Foursquare Identity Guideline

Don’ts

Outline

Outline

The treatments and layouts shown here are examples of techniques that should never be applied to the visual mark under any circumstances.

Do not place the logo in any containing shapes

Do not outline the logo.

19

Not Cool Glowing is distracting Avoid adding an unecessary hipnotic glow.

Do not use the logo on any colors that do not provide adequate contrast.


Typography

Primary Typeface Typographical Hierachy


Typography (Primary typeface)

Primary Typeface Clan OT Bold

Clan OT Bold Italic

Supporting Typeface Helvetica Neue Regular

Helvetica Neue Bold

Aa Aa Aa Aa

Foursquare Identity Guideline

22

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopurstuvwxyz 1234567890!@#$%^&*()?/:+=

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopurstuvwxyz 1234567890!@#$%^&*()?/:+=

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopurstuvwxyz 1234567890!@#$%^&*()?/:+=

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopurstuvwxyz 1234567890!@#$%^&*()?/:+=


Typography Hierachy

Display Copy While there are always exceptions and variations, the general rule for typographic hierachy is to use Helvetica Neue Bold for large headlines. Ideally headlines are about 3-4X the size of body copy.

Body Copy

Use Helvetica Neue Regular for subheads and body copy. Type is preferably set flush left and ragged right, upper and lower case. Foursquare should be in Initial caps when it is outside of the logo lockup.

Foursquare Identity Guideline

23

Display copy: Heletica Neue Bold—size 28pt, leading 33pt, tracking 20.

Foursquare help you and your friends make the most of where you are.

Body copy: Heletica Neue Regular—size10pt, leading 14pt, tracking 45.

With over 10 million members all over the world, foursquare has a hugely global community. People have checked in to every single country on the planet, so we feel the least we can do is make a first-class Foursquare experience available to everyone. That’s why we have versions of our application for all different types of phones, and why, back in February, we launched five translations of our app – in French, German, Italian, Japanese, and Spanish. Since then, our in-country use has exploded, with tons of people, local businesses, and brands hopping on.


Secondary Graphics

Overview Beyond the corporate identity, color palette and typography, the Foursquare visual brand is built on three devices, the symbol, the icon and the pattern. The primary visual asset of the brand is the symbol screen back. The supporting visual assets should be used to ass a future element of contrast.

Foursquare Identity Guideline

24


Icons

Icons Single color: C=62 M=0 Y=14 K=0

Two colors: C=62 M=0 Y=14 K=0 C=1 M=10 Y=84 K=0

Reversed

Foursquare Identity Guideline

26


Patterns

Pattern Uasge Pattern is created for background use only. All graphic elements need to be contained in an area and should not be used as stand alone item.

Foursquare Identity Guideline

27


Design Application


Design Applications Website

Foursquare Identity Guideline

30


Design Applications Street Flag

Foursquare Identity Guideline

31


Design Applications Twitter Page

Foursquare Identity Guideline

32


Design Applications Facebook Page

Foursquare Identity Guideline

33


Design Applications Bus / Bus Stop

Foursquare Identity Guideline

34


Design Applications Billboards

Foursquare Identity Guideline

35


Design Applications Taxi Advertisment

Foursquare Identity Guideline

36


Design Applications Web Banner: 90px X 728px

Foursquare Identity Guideline

37


Design Applications Web Banner: 160px X 600px

Foursquare Identity Guideline

38


Design Applications T-Shirt

Foursquare Identity Guideline

39


Design Applications CD / DVD

Foursquare Identity Guideline

40


Design Applications Mobile App

Foursquare Identity Guideline

41


Design Applications iPhone Case

Foursquare Identity Guideline

42


Design Applications iPad Interface

Foursquare Identity Guideline

43


568 Broadway, NY 10012 Make the most of where you are Save Like 1 Like

Foursquare Identity Guideline  

Foursquare Identity Guideline

Read more
Read more
Similar to
Popular now
Just for you