Prosper Pattern Library
Bridge Design System
This design system is called Bridge.
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
Prosper Blue #4aa9db
Prosper Dark Blue #09064d
Prosper Dark Gray #414042
Medium Gray #979797
Light Gray #f7f7f7
Alert Green #6ac20a
Alert Red #d0021b
(empty color box)
