Design guidelines

A set of resources and guidance to ensure that the Prosper brand is consistent across mutliple platforms and mediums. Please use the #branding channel on Slack if you have any comments or questions.

Colour Palette

Primary colours to be applied to backgrounds, functional elements and copy. Gradients are to be used for large blocks for visual interest.

Dark Teal

PANTONE P 123-15 C
C:85% M:0% Y:25% K:51%
R:0 G:104 B:117
HEX: #006875

Teal

PANTONE P 133-6 C
C:75% M:0% Y:51% K:0
R:23 G:175 B:149
HEX: #17AF95

Warm grey

PANTONE P 169-1 C
C:8% M:7% Y:8% K:0%
R:238 G:235 B:234
HEX: #EEEBEA

Yellow

PANTONE P 166-5 C
C:7% M:0% Y:61% K:0%
R:247 G:238 B:128
HEX: #F7EE80

Teal & Yellow

Gradient angle 45°

Warm grey & Yellow

Gradient angle 45°

Teal & Warm grey

Gradient angle 45°

Dark teal & Teal

Gradient angle 45°

Typography

The main font is Museo Sans Rounded. It's flexible, soft and can evoke SUBTLETY and STRENGTH through its six weights.

Long-form content uses Rooney Web, this compliments Museo Rounded and retains similar characteristics.

Museo Sans Rounded

Lorem ipsum

Heading 1

Proin tellus

Heading 2

Vestibulum justo

Heading 3

Suspendisse congue

Heading 4

Pellentesque non

Heading 5

Phasellus felis

Heading 6

Museo Sans Rounded

Quisque congue tincidunt mauris, nec dignissim nulla luctus nec. Pellentesque non placerat dolor, in placerat felis. Praesent bibendum risus vel nibh aliquet dictum. Sed aliquet sem et suscipit tempus. Sed venenatis libero in tincidunt vehicula. Suspendisse dolor ante, convallis non malesuada sit amet, condimentum sollicitudin odio.

Paragraph

Rooney Web

Quisque congue tincidunt mauris, nec dignissim nulla luctus nec. Pellentesque non placerat dolor, in placerat felis. Praesent bibendum risus vel nibh aliquet dictum. Sed aliquet sem et suscipit tempus. Sed venenatis libero in tincidunt vehicula. Suspendisse dolor ante, convallis non malesuada sit amet, condimentum sollicitudin odio.

Long-form content paragraph

Templates

A collection of templates for print and digital use.

Business cards
INDD
Letter heads
Flyers
INDD
Notice
INDD
Presentation
Readymag
Avatar
PNG

Imagery

To help evoke the principles of Prosper, images that are used for decoration should have a flat colour or gradient overlayed.

Dark Teal

Solid colour

Teal

Solid colour

Warm grey

Solid colour

Yellow

Solid colour

Teal & Yellow

Gradient angle 45°

Warm grey & Yellow

Gradient angle 45°

Teal & Warm grey

Gradient angle 45°

Dark teal & Teal

Gradient angle 45°

Patterns

Flexible patterns using Zurb Foundation 6. For additional resources please look at the Foundation documentation.

Buttons
Standard Buttons
Standard Colour Secondary Colour Success Colour Alert Colour Warning Colour Disabled Button
Hollow Buttons
Button Groups

Form Elements
Input fields
Text area
Select menu
Radios and checkboxes

Callouts

Created a new folder.

Error fetching stick.


Mad lib form
I would like to join Prosper. I want to be and I want to be . is .
By the way, is and is .