Brand Standards

HubSpot Brand & Style Guide

Our Visual Brand Standards

This guide will familiarize you with all parts of HubSpot design. To provide background on our design process, we’ll start with our core design principles. You’ll see these values reflected across all elements of our brand, including typography, iconography, and web design. Further down the page, we’ll provide links to many of those assets for use in HubSpot-branded materials.

We have brand standards to ensure:

  1. Authenticity
  2. Quality
  3. Consistency
  4. Productivity

If you need to incorporate the resources from this page into your own design, don’t hesitate to reach out to the HubSpot design team with any questions. We’re happy to help.

Are you a HubSpot employee looking to download our official logos, color swatches, photography, and fonts? You’re in the right place.

Download assets
What is HubSpot?
Empowering
Supportive
Generous
Humble
Inclusive
Empathetic
Human
Educational
Helpful
Remarkable
Dependable
What is HubSpot?
Remarkable
Humble
Helpful
Human

Written Style Guide

The HubSpot voice is helpful, kind, and fun. We use clear language that reflects how human beings actually talk to one another. We’re casual without being cavalier, clever without being cruel, funny without being flippant. We use contractions to avoid sounding like robots, and we avoid business jargon so that we don’t sound like jerks.

We’re trustworthy guides to the world of inbound, and we’re somebody our customers love spending time with, because we listen, we care, and we help them achieve greatness.

We’re occasionally rather adorably weird.

Brand Values

Our approach to design focuses on who we are. Inspired by HubSpot’s culture code, these principles drive all aspects of our brand.

Brand Values
  1. Bold Simplicity

    2. HubSpot is about finding simple solutions to complex problems. To get to the essence of the brand, we strive to remove static and extraneous noise.

  2. Owning Orange

    3. Orange is naturally optimistic, bright and enthusiastic -- never negative or boring. A fitting color for HubSpot, it echoes our values of warmth, reassurance, and fearless positivity.

  3. Naturally Confident

    4. Humble, Effective, Adaptable, Remarkable, Transparent -- HubSpot gets noticed by staying true to its H.E.A.R.T.

  4. Original

    5. Authentic, unexpected and thought provoking, we provide calculated insights to drive real company growth.

  5. Marriage of Technology and the Human Element

    6. We empower customers by helping them, not talking down to them. By developing true connections, we aim to develop both a powerful product and a supportive community.

HubSpot's Design Style

Our style is built on clean layouts, bright colors, and geometric simplicity. We employ clever linework, warm photography, and illustration to keep things beautiful and lively.

Design Style
See our guide to the design process

The HubSpot Identity

The sprocket logo is the primary visual indication of the brand. It can be used in a variety of ways; however, in order to preserve HubSpot’s identity, please don’t splice it into other images or text.

What not to do

Unfortunately, the sprocket is not a face.

Or a replacement for letters. (Sorry, oolong.)

Okay Stone brothers, knock it off.

Be careful; there are other versions of the sprocket out there.

Typography

Proxima Nova meets Klinic Slab.

H1

Type Rules All

Extend the power of HubSpot to all of the tools your team uses to market, sell, and support your customers.

H2

Type Rules All

Extend the power of HubSpot to all of the tools your team uses to market, sell, and support your customers.

H3

Type Rules All

Extend the power of HubSpot to all of the tools your team uses to market, sell, and support your customers.

H4

Type Rules All

Extend the power of HubSpot to all of the tools your team uses to market, sell, and support your customers.

Color Scheme

This color palette comprises primary and accent colors that can be used for illustration or branding. They’ve been designed to work harmoniously with each other.

Primary Colors

Primary Orange

#f7751f

Vibrant, powerful, and friendly. Operation orange in full effect.

Logo Blue Grey

#455560

A muted compliment to our signature orange.

Secondary Colors

Footer Grey

#3b3f3f

A darker grey to offset the footer from page content.

Action Blue

#1da1db

A striking color to indicate links and other calls-to-action.

Background Teal

#0f434c

A dark background, used sparingly for supplemental testimonials and calls-to-action.

Background Grey

#f9f8f7

A subtle grey to delineate sections of a page.

Imagery

Our photography is focused (wordplay!) on the people and places that make HubSpot unique. Some key elements include warm settings, natural textures, depth of field, and careful framing/composition.

styleguidephotos3.jpg
styleguidephotos2.jpg
styleguidephotos4.jpg
styleguidephotos5.jpg
styleguidephotos.jpg
styleguidephotos5.jpg
styleguidephotos7.jpg
styleguidephotos8.jpg

Iconography

The HubSpot icon style is a work in progress and the below examples should give a clear sense of our direction. Please let us know if there are particular icons you need and we’ll add them to the masterlist.

Website Design

Website design encompasses many of the design elements discussed on this page. From typography to color accents to simple interactions, we aim to keep our site easy-to-use, beautiful, and (of course) HubSpotty. To this end, we’ve built a collection of reusable modules to satisfy many common website use cases.

See the modules