⇤ 300 px ⇥

12 Column Grid

Margins 20px  ↴ 

Gutters 20px ↴ 

⇤ 940 px ⇥

60px

⇤ 140 px ⇥

⇤ 220 px ⇥

⇤ 300 px ⇥

⇤ 460 px ⇥

Spacers

Some Spacer Guidelines

+ Any element must be at least 20px from header

+ 40px space before section title text and any element

+ 40px between sections

+ 40px between sections and footer

10px 

 

20px 

 

40px 

 

50px 

 

60px 

 ↕ ↔

20px 

 

10px 

 

Text

Header 1: 40px

Header 2: 36px

Header 3: 28px

Header 4: 24px

Header 5: 20px

Header 6: 18px

Paragraph 1: 16px

Paragraph 2: 14px

Paragraph 3: 14px

+ Typeface: Open Sans and Open Sans Condensed

+ Character Spacing: 0.00-0.03

+ Line Spacing: 2

+ Text Links: underlined w/space and right arrow and the end →

Some Text Guidelines

+ Avoid ALL-CAPS in titles

+ Use bold sparingly

+ Only use underline for links

Colors

White, background

Black, only for paragraph and small text

Red, error; 100% border; 30% fill

Buttons and Other Elements

Container border: 1px ↴ 

+ Button Height: 60px

+ Sharp Corners (not rounded)

+ Style: solid or outline

      - border weight can be 1px, 2px or 4px

+ Hover: reverse of regular style

+ A space and a rightward arrow in the text [  →]

⇣ Border: 2px

Border: 4px 

Shadow;

Distance: 2px

Color: 60% black

 ⇡Radius: 6px