HubSpot Brand Guidelines

This is the hub for all brand guidelines, usages, and assets. We built this page to make it as easy as possible for you to deliver on-brand designs while respecting our brand and legal/licensing restrictions.

The Logo

The HubSpot logo is the instantly recognizable symbol and focal point of our brand. That's why it's so important to use the logo exactly as specified in these guidelines.

Logo
HubSpot Logo

The Sprocket

Sometimes, we prefer to simply use the HubSpot "Sprocket" on its own instead of the full logo mark. In general, these are communications where the HubSpot brand has already been established—either through use of the full logo, in copy, or by voiceover.

Alternatively, there will be situations in which we will want the HubSpot brand to appear more recessive—such as on T-Shirts, other merchandise, or environmental graphics like a wall mural. In these instances, we want the graphics to be the main element, and the Sprocket to act as a subtle sign of the HubSpot brand.

Sprocket
HubSpot Sprocket

Space / Size

Logo Appropriate Clearance

In order to give our logo maximum legibility and exposure, please allow for an area of clearance around the entire logo. The distance of clearance should be the height of the Sprocket from the base of the center circle to the top of the longest arm. This gives the logo prominence and ensures that it will not be obscured or diminished by other surrounding elements.

HubSpot Logo Clearance

Sprocket Appropriate Clearance

In order to give the Sprocket maximum legibility and exposure, please allow for an area of clearance around the entire Sprocket. This gives the Sprocket prominence and ensures that it will not be obscured or diminished by other surrounding elements.

HubSpot Sprocket Clearance

*Always mathematically center the Sprocket.

Minimum Size

Never reproduce the Logo or the Sprocket at a size smaller than these recommendations, as it will result in the loss of their impact and readability.

HubSpot Logo Minimum Size

The HubSpot logo should never be smaller than 100px in digital or 35.5mm in print.

HubSpot Sprocket Minimum Size

The Sprocket should never be smaller than 28px in digital or 10mm in print.

Logo Use

HubSpot Logo

It is important that the appearance of the logo remains consistent. The logo should not be misinterpreted, modified, or added to. No attempt should be made to alter the logo in any way. Do not rotate, warp, or disproportionately scale the logo. Its orientation, color and composition should remain as indicated in this document—there are no exceptions.

Yes

HubSpot primary logo.

Yes

HubSpot logo overlaid on color background.

Yes

HubSpot logo in monotone black on white.

Yes

HubSpot logo in monotone white on black.

No

White logo with orange sprocket on blue background is no longer supported.

No

Using "Sorbet" orange for the Sprocket instead of "Lorax".

No

All orange logo.

No

HubSpot primary logo on top of any color. (Use all white logo instead.)

Sprocket

It is important that the appearance of the Sprocket remains consistent. The Sprocket should not be misinterpreted, modified, or added to. No attempt should be made to alter the Sprocket in any way. Do not rotate, warp, or disproportionately scale the Sprocket. Its orientation, color and composition should remain as indicated in this document—there are no exceptions.

Yes

HubSpot primary Sprocket.

Yes

HubSpot Sprocket overlaid on color background.

Yes

HubSpot Sprocket in monotone black on white.

Yes

HubSpot Sprocket in monotone white on black.

No

Using "Sorbet" orange for the Sprocket instead of "Lorax".

No

Orange Sprocket on top of any color. (Use all white Sprocket instead.)

No

Using the Sprocket to represent the letter "O" in a word.

No

Altering or co-branding the Sprocket.

(Hub)Spot the Difference

What's Changed in the New Logo

The old logo is still floating around out there. We get it, they're pretty similar to the untrained eye. Here's a way to spot the difference between old and new. Do us a favor and update your logo if you realize yours is outdated!

Old Logo

Old HubSpot Logo Differences

*Different shades of grey and orange

New Logo

New HubSpot Logo Differences

Logo Transformation Gif

HubSpot Logo Transformation

Wordmarks

The HubSpot Wordmarks are logos for HubSpot sub-brands: i.e. departments and teams. The systematized structure of our wordmarks ensure consistency throughout the company. Do not create a team or department logo outside of these guidelines.

Wordmarks

Center Aligned

HubSpot Wordmark Center Aligned

Left Aligned

HubSpot Wordmark Left Aligned

One Line

HubSpot Wordmark One Line

*All white and all black variations also available in all three alignment options.

Color Palette

Our colors are bold, enthusiastic and full of energy. To ensure a unified brand, it is important to use these colors and these colors only.

Full Color Palette
Primary Colors

Primary colors, as you may have noticed, are used in the HubSpot logo and should also be used to attract attention to something of importance. For example: Lorax is often used for primary CTAs, and Calypso indicates that something is clickable.

  • Calypso

    #00A4BD

  • Lorax

    #FF7A59

Secondary Colors

Secondary colors are used to provide vibrancy to a design. Use these energetic colors to complement primary colors and break up white space.

  • Oz

    #00BDA5

  • Thunderdome

    #6A78D1

  • Candy Apple

    #F2545B

  • Norman

    #F2547D

  • Sorbet

    #FF8F59

  • Marigold

    #F5C26B

Dark Greys

Dark greys are primarily used for copy and background colors.

  • Flat Earth

    #253342

  • Pantera

    #2D3E50

  • Obsidian

    #33475B

  • Heffalump

    #425B76

  • Slinky

    #516F90

  • Eerie

    #7C98B6

Light Greys

Light greys are primarily used as background colors and for icons.

  • Flint

    #99ACC2

  • Battleship

    #CBD6E2

  • Great White

    #DFE3EB

  • Koala

    #EAF0F6

  • Gypsum

    #F5F8FA

  • Olaf

    #FFFFFF

Gradients

Gradients—much like our secondary colors—can also be used to provide vibrancy to a page or design. Use these energetic color combinations to break up white space and add depth to a design.

Be cognizant of not overusing gradients, using flat secondary colors as a fallback.

  • Color Palette Gradient 1
  • Color Palette Gradient 2
  • Color Palette Gradient 3
  • Color Palette Gradient 4
  • Color Palette Gradient 5
  • Color Palette Gradient 6

Colors in Use

The color palette is used to add depth, boldness, and vibrancy to your pages and designs. Some colors, however, indicate specific uses or actions (particularly for web & presentation slides).

Primary Orange

Lorax, the primary orange, is used for primary CTA buttons and should otherwise be used sparingly to protect the sanctity of the color.

Text Link Color

Calypso is used for text links. This color indicates that something is clickable.

Text Color

Obsidian is our text color. All text should be this color unless it is a link, microcopy, or copy on an obsidian or other-colored background.

Background Color Option

Gypsum is used to break up both color blocks and white space. This color is great for maintaining a clean page or banner without it looking white-washed.

Default Icon Color

Eerie is our default icon color, complimentary of Obsidian.

Background Colors

Use other secondary colors and gradients to add splashes of color and vibrancy to web pages and designs.

Things to Avoid

When it comes to color, there aren't many "dont's." The main call-out is don't use color on color. If you're using a color background, don't use color icons or text.

Red (Candy Apple) Text

Red text indicates an alert or that something is wrong. Avoid using Candy Apple as a text color.

Color Text on Color Background

Don't use color text on top of color backgrounds. Always use white text on color backgrounds.

Color Icon on Color Background

Don't use color icons on top of color backgrounds. Always use white icons on color backgrounds.

 

Fonts

The type family for HubSpot is Avenir Next.

Font

Avenir Next Regular
abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ
0123456789

Avenir Next Medium
abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ
0123456789

Avenir Next Demi-Bold
abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ
0123456789

Avenir Next Bold
abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ
0123456789

Typography Guidelines

Looking for font hierarchy? Our typography guidelines include H1–H6's, body copy, how to denote a link, micro copy, and micro headings on both white and color backgrounds.

Typography Guidelines
A few things to watch out for
  • Don't write headlines, headers, body copy, or CTAs in all caps
  • Use exclamation marks sparingly
  • Don't use an ampersand unless it's part of a branded term
  • Sentence casing is most commonly used, with title casing being generally reserved for headings only

 

Photography

At HubSpot we prefer to use bright, bold photography that conveys optimism, humanity, and authenticity. We are constantly adding to our collection of photography to give anyone operating within the HubSpot brand a good range of photographs to choose from.

Photography
Photography Guidelines

Photography Diversity and Localization

Be thoughtful when representing humans. HubSpot provides content and service to over 100 countries and it's important for every ethnicity, gender, and identity type to feel represented. Use subjects and settings that reflect the diverse array of HubSpot's users and customers. Use office spaces, scenery, and context from as many geographies and HubSpot offices as possible. Humans naturally associate with familiar people and settings. When in doubt, represent the minority as the majority.

Photography Overlays

Photography overlays are a great way to add contrast to images that are overlaid with copy. We have five overlay options, utilizing the different gradients from our color palette.

Photography Overlays
Photography Overlay Guidelines

Photography Copy Overlays

Photography is used in web page headers, as the background in large CTAs, and in presentation templates. In these cases, photography is typically paired with a header, subheader, and a button. Here are some guidelines to follow to ensure proper contrast, legibility, and color balance.

  1. Do's

    • Choose an image with room for copy
    • Use all white logos, copy, and icons on photography with color overlays
    • If a person is particially cropped out of an image, make sure not to cut off the top of the head
    • Drop the saturation to create black and white image behind the color overlay
  2. Dont's

    • Cut through people's faces with copy
    • Stretch or distort an image in a way that cuts off subjects heads or faces
    • Use color on color
    • Awkwardly crop someone's head, shoulders, or body
    • Choose a photo that's so busy with people that it competes for the viewer's eye with the copy
    • Use a color image behind color overlay

 

Circle Treatment

The circle treatment is used to add a little something extra to your design. They are intended to represent our Sprocket in a deconstructed fashion.

Circles

Circles on Color Background

Circle Treatment on Gradient Background

Circles on White Background

Circle Treatment on White Background

Circle Treatment in Use

  • Only circle treatments 1 and 2 can be used within the frame of a design
  • Circle treatments 3–6 should bleed off the edge of the design frame (treatment 2 can be used inside or outside of the frame)
  • Don't bleed circle treatment 1 out of the frame
  • Don't contain circle treatments 3–6 inside of the design frame
  1. Do's

    • Use circles in given lockup treatments
    • Use white treatments on color or gradient backgrounds
    • Only use orange gradient circles on white backgrounds
    • Rotate, expand, or shrink patterns to fit your design
  2. Dont's

    • Deconstruct treatments to recreate your own (keep treatments in original patterns)
    • Combine multiple circle treatments in one design together
    • Use gradient circle treatments on color backgrounds

 

Icons

Icons are used to assist copy in representing instructional and actionable meaning. We have four categories of icons: action, editor, utilities, and view icons.

Full Icon Library

Our icon library was created with accessibility in mind. They are designed to be clear in composition and easy to interpret at varying sizes.

  • Sample Icon 1
  • Sample Icon 2
  • Sample Icon 3
  • Sample Icon 4
  • Sample Icon 5
  • Sample Icon 6
Do's
  • Represent actions, content, and ideas
  • Represent a unique, specific meaning
  • Support or indicate an action a user might take
  • Help the design be easily scanned and understood
  • Help users better understand repeating patterns
Dont's
  • Replace copy alltogether with an icon
  • Assume icons are universally understood
  • Decorate or fill white space with an icon
  • Combine many icons together to create an illustration
  • Use color icons on color backgrounds
Sizing Guidelines
  • 40x40px is the standard (and largest available) icon size for web
  • 16x16px is the smallest icon size for web (do not drop below this size)
  • Offline icon sizes may vary based on the size of the execution

 

Illustrations

Illustrations are used to help visualize offers, moments of celebration, and challenging concepts or education. Their function is to bring visitors, users, or other viewers to the point of the narrative.

Full Illustration Library

When designing, sometimes an icon just doesn't cut it. Illustrations help visualize a challenging concept or add delight to an exciting moment.

  • Sample Illustration 1
  • Sample Illustration 2
  • Sample Illustration 3
  • Sample Illustration 4
  • Sample Illustration 5
  • Sample Illustration 6
Do's
  • Help communicate with the customer at important times
  • Fit illustrations seamlessly with the tone of the copy
  • Add an element of joy or playfulness to your design
  • Use illustrations as a reflection of the brand's values and style
  • Use the illustrations and style provided
Dont's
  • Overuse illustrations to the point of annoyance
  • Confuse readers by using an illustration that doesn't match the content of the page
  • Overpower your page or design with illustrations
  • Create illustrations in a style inconsistent with brand-approved illustrations
  • Use illustrations on an already colorful background
  • Use illustrations as if they were icons
Sizing Guidelines
  • 300x300px is the standard (and largest available) illustration size for web
  • 100x100px is the smallest illustration size for web (do not drop below this size)
  • Offline illustration sizes may vary based on the size of the execution

 

Additional Guidelines

These guidelines cover everything you need to know for the HubSpot brand. We have also compiled guidelines and some brand instruction for specific disciplines. You can download those guidelines below: