Yes
HubSpot primary logo.
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 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.
LogoSometimes, 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.
SprocketLogo 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.
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.
*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.
The HubSpot logo should never be smaller than 100px in digital or 35.5mm in print.
The Sprocket should never be smaller than 28px in digital or 10mm in print.
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.
HubSpot primary logo.
HubSpot logo overlaid on color background.
HubSpot logo in monotone black on white.
HubSpot logo in monotone white on black.
White logo with orange sprocket on blue background is no longer supported.
Using "Sorbet" orange for the Sprocket instead of "Lorax".
All orange logo.
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.
HubSpot primary Sprocket.
HubSpot Sprocket overlaid on color background.
HubSpot Sprocket in monotone black on white.
HubSpot Sprocket in monotone white on black.
Using "Sorbet" orange for the Sprocket instead of "Lorax".
Orange Sprocket on top of any color. (Use all white Sprocket instead.)
Using the Sprocket to represent the letter "O" in a word.
Altering or co-branding the Sprocket.
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
*Different shades of grey and orange
New Logo
Logo Transformation Gif
Grow Better is a belief that you shouldn't have to sacrifice the customer experience to grow. It's an aspiration for achieving business success with soul. When we use Grow Better as a tagline we capitalize both the G and B. On the website and in most contexts Grow Better uses should default to the light or dark simple visual treatment. Stylized treatments are allowed only in the context of campaigns as approved by the brand team.
HubSpot Grow BetterCenter Aligned
Left Aligned
One Line
Center Aligned
One Line
Center Aligned
Left Aligned
One Line
*All white and all black variations also available in all three alignment options.
Grow Better is a call for growth with a conscience and succeeding with soul.
There is a fallacy out there that to grow you have to be ruthless. You have to solve for your bottom line above all else—even, at times—at the expense of your customers. Not only do we believe this is flawed logic, we know there is a better way to grow. Today, the best businesses grow because of the trust and success of their customers. When their customers succeed, they do too. Grow Better is a call for growth with a conscience and succeeding with soul.
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.
WordmarksCenter Aligned
Left Aligned
One Line
*All white and all black variations also available in all three alignment options.
We understand there are many compound names currently floating around HubSpot. From HelpSpot to DubSpot, these names are internally known and loved. Although they're fun to say, as a brand we no longer support compound naming in workmark treatments as they decrease the value in our brand name.
Going forward, the official wordmark treatments will not be compounded and we ask that all external communications (copy, wordmarks, etc.) do not use compound naming. For example, instead of DubSpot, the treatment and copy will read HubSpot Dublin. See more examples below.
Official compound team names like HubStars are exceptions, but going forward please refrain from compound naming.
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 PalettePrimary 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 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 are primarily used for copy and background colors.
Flat Earth
#253342
Pantera
#2D3E50
Obsidian
#33475B
Heffalump
#425B76
Slinky
#516F90
Eerie
#7C98B6
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—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.
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).
Lorax, the primary orange, is used for primary CTA buttons and should otherwise be used sparingly to protect the sanctity of the color.
Calypso is used for text links. This color indicates that something is clickable.
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.
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.
Eerie is our default icon color, complimentary of Obsidian.
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 text indicates an alert or that something is wrong. Avoid using Candy Apple as a text color.
Don't use color text on top of color backgrounds. Always use white text on color backgrounds.
Don't use color icons on top of color backgrounds. Always use white icons on color backgrounds.
The type family for HubSpot is Avenir Next.
FontAvenir 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
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.
PhotographyPhotography 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 OverlaysPhotography 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.
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.
CirclesCircles on Color Background
Circles on White Background
Circle Treatment in Use
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 LibraryOur icon library was created with accessibility in mind. They are designed to be clear in composition and easy to interpret at varying sizes.
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 LibraryWhen designing, sometimes an icon just doesn't cut it. Illustrations help visualize a challenging concept or add delight to an exciting moment.
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: