Prosper Pattern Library
Climb Design System
This design system is called Climb.
Code Style
The beginning of our style guide for the responsive project. Still needs some polish, but closer to styles we are using for the reskinned funnel.
For HTML and CSS styles, I refered to the OOCSS documentation, Idiomatic commenting style and Foundation's documentation. I tried to camel case all class names, not use any IDs and separate structural elements like containers from skin elements like text and graphics. Styles in flight, nothing is permanent.
Grid System
We're using Foundation for the basic layout. This is a twelve column section in a row. Each of these includes a div.panel element so you can see where the columns are - it's not required at all for the grid.
Six columns
Six columns
Four columns
Four columns
Four columns
Typography
H1 Heading Helvetica Neue Bold
H2 Heading Helvetica Neue Regular
H3 Heading Helvetica Neue Regular
Paragraph Helvetica Neue Regular
Colors
$primaryColor and $primaryTextColor #414042
$secondaryColor #a7C9b5
$borrowerColor #ffe5b9
$investorColor #e8997f
$secondaryTextColor #979797
$fieldColor #f7f7f7
$successColor #6ac20a
$errorColor #d0021b
