⇤ 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