Heap Style Guide


Welcome to our brief style guide! We hope this guide is helpful in finding the resources you need to complete a project or use the Heap brand on an authorized website or publication. If your project requires something not listed here, get in touch and we'll get you what you need.

Heap Name

The correct usage of the name is simply Heap (not Heap Analytics).

Correct Usage

Heap

Incorrect Usage

HEAP

Heap Analytics

 

all caps is incorrect

"Analytics" is incorrect

Logo Usage

The horizontal logo is preferred, but the vertical logo may be used when space requires. HEAP text should always appear next to the Heap mark. Don’t use the Heap mark by itself.

Font & Font Weight

Heap uses Avenir Next for all marketing text. Weights vary between 300 and 400, depending on location. See individual elements below for variations, but the default is Avenir Medium (400).

Logo Downloads

Logos may only be used with permission.

Dark

SVG png (@1x) png (@2x)
Light (Gray background shown here only)

SVG png (@1x) png (@2x)


PropertyExampleDetails
Background Gradient
top: #351552, bottom: #250f39

Main text is white (#fff)

CTA text is light purple (#b28bda)

When text is on the Heap purple background, it should traditionally be white. Called out text, usually preceeding a CTA, is purple.

The gradient should be used, when possible. For a fallback, use #2f1348.

Button
Gradient
from left #f27c36, right: #ed485f, padding: 12px 22px
Text
text: #fff, 16px, uppercase
Button

CTA buttons should have a left-to-right background gradient and be rounded.

Title
#000; 48px, 300

Subtitle
#89848b, 24px, 300
Title Text
This is a centered subtitle

Headlines and subtitles go together and are usually centered.

Section Title
#433948, 32px

Section Paragraph
#89848b, 18px, font-weight: 300
line-height: 30px
Headline Text
Paragraph text that accompanies headline text. Think: subfeatures.

For sections of content, the Section Title and Section Paragraphs are paired.

CTA Links
16px, #F27C36; uppercase
This is a link

CTA links are non-primary CTAs when Buttons aren’t used. These usually follow a Section Title and Section Paragraph.

Inline Links
#f27c36
a normal link inside a paragraph

Inline links are inside paragraphs like this. No underline.

Inputs/Labels
Label
#6F6F6F, 16px, uppercase, weight: 600

Input
border: solid 1px #ccc border-radius: 6px padding: 8px 12px #454545, 16px inner shadow: 0 1px 1px rgba(0,0,0,.75)
Label

Labels and Inputs go together and are left-aligned.