#2 Typography

Small

How now, brown couch?

Base

Eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim. Quinta decima eodem modo typi qui nunc nobis videntur parum, clari fiant sollemnes. Nam liber tempor cum soluta nobis assum typi. Nulla facilisis at vero eros et accumsan et iusto odio dignissim qui. Eum iriure dolor in hendrerit in vulputate velit esse. Etiam processus dynamicus qui sequitur mutationem consuetudium lectorum mirum est. Claritatem Investigationes demonstraverunt lectores legere me lius, quod ii legunt.

Medium

How now, brown couch?

Large

How now, brown couch?

XLarge

How now, brown couch?

Huge

How now, brown couch?

Primary - Large

Brand Identity

01 Our Logo

02 Logo Variations

03 Logo Color Formats

04 Logo Spacing & Positioning

05 In Writing

06 Color Palette

07 Typography

08 Do's and Don'ts

09 Visual Style

10 Our Brand Story

#2 Logo Variations

Circled Loop Symbol

Use in UI with limited space (e.g. as an app icon)

Vertical Lockup

Use in both print and digital cases where there is limited

presentation width, but ample vertical space

#3 Logo Color Formats

Reverse Logo & Promo Logo

Used on darker and photographic backgrounds

Reverse Circled Loop Symbol and Vertical Lockup

Used on darker and photographic backgrounds

#4 Logo Spacing & Positioning

Logo and Promo Logo

Keep at least a "lying down c" worth of spacing between the Logo or Promo Logo and other elements.

• For the Logo, this translates into roughly 11% extra width on each side, and 24% extra height at top and bottom.

• The Promo Logo is generally designed to be flush left in a layout – when that is not possible, it should be centered. The Promo Logo should have about 8% extra width on the side(s) and 22% extra height at top and bottom.

Circled Loop Symbol and Vertical Lockup

Leave about 30% whitespace between the Vertical Lockup or Circled Loop Symbol and other elements.

#5 In Writing

Couchsurfing

couchsurfers

Our Name

Always capitalize the "C" in Couchsurfing

Our Members

Our community is made up of couchsurfers (lowercase).

#6 Color Palette

CS Black


#2F2F2F

White


#FFFFFF

CS Orange


#D4490B


PMS 173


CMYK
10,75,80,0

Beige


#EFEDE2

Navy


#34495E

Dark Grey


#7F8C8D

Medium Grey


#BDC3C7

Light Grey


#ECF0F1

Blue


#2980B9

Green


#27AE60

Red



#C0392B

#7 Typography

Words don’t just hold meaning; they communicate by their very form. We primarily use the Lato font family: human and casual, but clear and welcoming. Putting well-designed words in our product enhances the user experience. 

Lato Bold

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

a b c d e f g h i j k l m n o p q r s t u v w x y z

0 1 2 3 4 5 6 7 8 9 ! @ # $ % ^ & * (

Lato Regular

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

a b c d e f g h i j k l m n o p q r s t u v w x y z

0 1 2 3 4 5 6 7 8 9 ! @ # $ % ^ & * (

Lato Light

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

a b c d e f g h i j k l m n o p q r s t u v w x y z

0 1 2 3 4 5 6 7 8 9 ! @ # $ % ^ & * (