Proof Branding Guide

The official assets & framework for the using Proof brand

Proof's Mission

We're on a mission to help online businesses grow using honest marketing strategies.

Proof's Big Hairy Audacious Goal

To get 1,000,000 winning spilt tests by 2020

Proof's Elevator Pitch

Most online businesses want their website to be a source of leads and sales, but struggle to convert visitors to contacts. Proof exists to helps brands who sell reputable products increase their website conversions by using social proof. When a visitor enters their email on a website using Proof, a notification will instantly come up showing that activity. On average, online businesses who use Proof see a 10-15% increase in leads and sales by using Proof.

For example, "Tyler from Austin, TX just signed up for a free trial". Other notification show how many people are viewing a page and how many total people have recently signed up as well. Example: "55 vegans recently downloaded the recipe book".


All Proof notifications show real people taking real action. We believe businesses sell more when they are authentic in their marketing. Proof does not allow users to upload, simulate, or fake the social proof.

Common Proof Use Cases

Proof is used by online businesses to build trust and create a fear of missing out. These online businesses sell a variety of offers in a various of industries. The most common industries used by Proof are SaaS, eCommerce, Content, and Services.

Proof is commonly used to increase the conversion rate in the following campaigns:
  • Purchases on a checkout
  • Leads on a landing page
  • Bookings on a call schedule
  • RSVPs on an event registration
  • Subscribers on a blog
  • Upgrades after a purchase
  • Attendees to watch a demo
  • Donations for a charity

The Proof Logo

When to use an .PNG versus .SVG

Both .PNG and .SVG have transparent backgrounds. If you use the .SVG file (AKA: Scalable Vector Graphics) it can scale to any size without loss of quality. This is because it gets it's shape not from pixels but rather from relative proportions.

When should you NOT use an .SVG file? Mainly when photographs and non-vector images are used in the file because they can not scale the same way shapes can without loss of quality.

.SVG files are also about half the size as .PNG files when compared apple to apples. Below you will find white and blue versions of the Proof logo in both file types. The .PNG files are roughly 20 KB and the .SVG files are about 9 KB in size.

General rule of thumb: Use the .SVG for as often as possible because of size, edibility and scalability without loss in quality. Only use .PNG if the file contains a picture with pixels.

The Proof Style Guide

Proof's branding style is friendly, human, and simple. While we are a conversion company, we do not sacrifice our design and brand for a small lift in conversion. No messy marker lines and highlighter colors allowed 🙅We subscribe to the philosophy of branding with delight interactions rather than cheap, sales-y gimmicks. This is reflected across Proof's entire brand from design, copy, conversations, and content.

Long, fruitful customer relationship 👍Short, pump and dump sales 👎

Proof uses the font Lato with a variety of sizes and weights for different use cases. White space is used abundantly, while our accent blue is used sparingly and with intention. This intention is tied in one of two use cases: 

1) To maintain brand scent across mediums. For example moving from Ad to Website, Website to Social, even between website pages.

2) To draw attention to the next action, such as watch a demo or start a trial.

Primary

Accent Color:
#0095F7
Dark Color:
#3A3F92
Medium Color:
#8DA2B5
Light Color:
#f6f8f9

Secondary

Indian Red:
#f0465c
Orange:
#f1ad2a
Yellow:
#fbd67e
Green
#27cf68
Sky
#27cf68
Purple:
#1D0BA2
Coral:
#1D0BA2

Gradients

#0095F7
#8DC9FB
#FB5483
#FF8A8B

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

This is the Proof paragraph body text

  • List Item 2
  • List Item 3
Fine Print

Design

5px corners
60px margins
No borders
Shadow:
#000000
9% Opacity
4px down
9px blur
30px padding
It's hard work to keep things simple – but absolutely necessary. We believe design's primary function is not to "look pretty" but rather to create a clear path to value.

Anything that does not lead the viewer to value faster must be placed somewhere else or destroyed all together.

Thick padding and even thinker margins gives each piece of content it's own room to breath.

Round corners give a Proof's brand a friendly personality, almost like your cursor is being hugged by the button while clicking.

Tare down all the walls by using soft shadows rather than boarders. Creating depth through shadows gives Proof's content enough contrast to focus the eye, without housing everything in cubicles.
Margins: 60px
Padding: 30px
Corners: 5px
Shadows:
#000000
9% Opacity
4px down
9px blur