Yes
HubSpot primary 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
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
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.
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 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.)
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
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.
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.
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.
Circles on Color Background
Circles on White Background
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.
