Primary - Large

Style Guide

01 Grid

02 Typography

03 Colors

04 Buttons

05 Links

06 Icons

07 Member Presence

08 Typographic Utilities

09 Page Headers

10 Lists

11 Forms

12 Content Modules

13 Modals

14 Navigation

15 Alerts

16 Graphical elements

#1 Grid

The layout is 940px wide, with 12 columns. Each column is 60px with 20px gutters in between.

The main content column is 8 columns wide, or 620px total including 7 gutters.

The side content area is 4 columns wide, or 300px total including 3 gutters.

All content areas have at least 20px of internal padding all around.

All containers should be vertically separted from each other by 30px.

#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?

#3 Colors

CS Black

White

CS Orange

Beige

Navy

Dark Grey

Medium Grey

Light Grey

Blue

Green

Red

#4 Buttons

#6 Icons Download Icon Font

icon-VerifiedBadge

icon-Add

icon-Alerts1

icon-Alerts2

icon-AvatarPlaceholder

icon-Close

icon-Couch

icon-DrillDown

icon-DropDown

icon-Edit

icon-Education

icon-Error

icon-ExternalLink

icon-Facebook

icon-Filter

icon-GooglePlus

icon-Inbox

icon-AmbassadorFlag

icon-DateCalendar

icon-PhotoPlaceholder

icon-ProfileOverview

icon-Info

icon-Instagram

icon-Languages

icon-Left

icon-LocalAdviceGroups

icon-Location

icon-MoreActions

icon-Occupation

icon-Orientation

icon-People

icon-Person

icon-CSExperience

icon-CurrentLocation

icon-Facebook

icon-Filter

icon-PublicVisit

icon-Reference

icon-Relationship

icon-Report

icon-Right

icon-SaveProfile

icon-Search

icon-Selected

icon-Settings

icon-Share

icon-SideMenu

icon-StarEmpty

icon-StarFilled

icon-Time

icon-ToDos

icon-Tumblr

icon-Twitter

icon-UpcomingGuests

icon-YouTube

icon-ViewFullSize

icon-UpcomingTravel

icon-Delete

icon-Send

icon-Apple

icon-Android

icon-Secure

icon-Leftmost

icon-Rightmost


#7 Member Presence

Member Name

City, Country

Member Profile Header

Member Name

Member Name

Members in Dashboard (80x80)

Members in Search Results (120x120)

Member Name

Member Name

{Secondary Text}

{Secondary Text}

Member Name

Members in lists and side modules

#8 Typographic Utilities

Module Heading – Large

Module Heading - Small

Bullet Separator:After

Bullet Separator:Before

Icon Strings – Veritical

Icon Strings – Veritical

Icon Strings – Horizontal

Icon Strings – Horizontal

1

Small Badge

99

Large Badge

{Timestamps}

UNREAD

#9 Page Headers

ACCEPTING GUESTS

90% response rate • last activity 4d ago

### Hosts Found

near City, Country

sorted by 

Dropdown Link

Inbox

Actions

San Francisco, California, United States

Hannah Hoster

#10 Lists

Host/Member Result

City, Country

12 References
Speaks Language

ACCEPTING GUESTS

90% response rate
Last activity 4d ago

Traveler Result

City, Country

12 References
Speaks Language

Offer to Host Him

Jun 15 – 20 (4 nights)

2 Travelers

“Bonjour people of San Francisco! I will be visiting your lovely village and would love to be hosted by a smart, kind, important person ...

Read More

Event Search Result

Event Search Result

Module Heading – Large

DASHBOARD MODULE SECTION

Dashboard Item

ANOTHER DASHBOARD MODULE SECTION

Dashboard Item

Dashboard Item

Member Name

You requested to stay with her

May 10

Eleifend option congue nihil imperdiet doming id quod mazim placerat...

Member Name

UNREAD

Eleifend option congue nihil imperdiet doming id quod mazim placerat...

Member Name

REPLIED "MAYBE" TO YOUR REQUEST

May 10

Eleifend option congue nihil imperdiet doming id quod mazim placerat...

#11 Forms

#12 Content Modules

Member Name

City, Country

AUG 2014

Positive – Member Stayed With Host

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. 

Member Name

City, Country

AUG 2014

Negative – Member Hosted Guest

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. 

Member's Reply: 

AUG 2014

Neutral – Guest Stayed with Member

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. 

Reference Formats

Member Name 

Aug 7, 2014 • 8:00am

Hi this is a message in a message thread.

Member Name 

Aug 7, 2014 • 8:01am

This is another message in the message thread.

Message Thread

MODULE TITLE

Icon Strings – Veritical

Icon Strings – Veritical

Sidebar Module

Steven Surfer

San Francisco, United States

ACCEPTING GUESTS

User Module (Dashboard)

#13 Modals

Modal Title

{Modal Contents}

Create a Public Trip

Let locals in {City Name} know you're visiting so they can learn about your trip and potential host or hang out with you.

Arriving on

Leaving on

Travelers

Trip Description

I need a host
I want to hang out with locals and travelers

Edit

{Caption goes here}

#15 Alerts

Missing Form Field(s)

{Validation error text}

#16 Graphical Elements