Start organizing all of your marketing in one place today. There is a fallacy out there that to grow you have to be ruthless. Without a brand style guide, you run the risk of having to reinvent the wheel every time you sit down to write an article, create an image or work with a third-party. Free Templates All of HubSpot's templates, in one place. HubSpot Sprocket overlaid on color background. The main call-out is don't use color on color. Typography. Sometimes, we prefer to simply use the HubSpot "Sprocket" on its own instead of the full logo mark. Editorial brand style guide template. Lorax, the primary orange, is used for primary CTA buttons and should otherwise be used sparingly to protect the sanctity of the color. Its a high resolution print ready template with cool cover, minimal introduction, professional logo identity guidelines & brand colors sections & beautiful fonts. 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. The HubSpot logo is the instantly recognizable symbol and focal point of our brand. Download your Content Style Guide Template Download Now. Humans naturally associate with familiar people and settings. Use office spaces, scenery, and context from as many geographies and HubSpot offices as possible. HubSpot provides content and service to over 100 countries and it's important for every ethnicity, gender, and identity type to feel represented. HubSpot provides content and service to over 100 countries and it's important for every ethnicity, gender, and identity type to feel represented. Take courses on the latest business trends, taught by industry experts. When in doubt, represent the minority as the majority. See more examples below. Do us a favor and update your logo if you realize yours is outdated! The logo should not be misinterpreted, modified, or added to. During that time, I've listened to feedback, helped with numerous customizations, and feverishly took notes on how I could create the single BEST template series. Photography overlays are a great way to add contrast to images that are overlaid with copy. In the left panel, select Regular form. See, schedule, and carry out your marketing efforts â all in one place with Content Calendar software by CoSchedule. 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. Do not create a team or department logo outside of these guidelines. do not use compound naming. See the full brand guide here. HubSpot Sprocket in monotone black on white. This style guide details out exactly what Material Design is and how Google uses it. 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. Weâve also included free Venngage style guide templates to make documenting your style guide as simple as possible. No attempt should be made to alter the Sprocket in any way. Some colors, however, indicate specific uses or actions (particularly for web & presentation slides). Find training and consulting services to help you thrive with HubSpot. Find HubSpot apps for the tools and software you use to run your business. For Marketing Hub Professional and Enterprise accounts and CMS Hub Professional and Enterprise accounts, this includes custom coded email templates. It's an aspiration for achieving business success with soul. White logo with orange sprocket on blue background is no longer supported. Do not rotate, warp, or disproportionately scale the logo. Research & Reports 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. Showing 1 - 15 of 78 . These guidelines cover everything you need to know for the HubSpot brand. From HelpSpot to DubSpot, these names are internally known and loved. Hear from the businesses that use HubSpot to grow better every day. departments and teams. In your HubSpot account, navigate to Marketing > Lead Capture > Forms. In these cases, photography is typically paired with a header, subheader, and a button. Find training and consulting services to help you thrive with HubSpot. Starting with the very basics, a useful writing style guide for blog contributors will detail specific, desired formatting information. 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. HubSpot blog post and blog listing page templates are coded files. Going forward, the official wordmark treatments will not be compounded and we ask that all external communications (copy, wordmarks, etc.) Whether itâs your website, landing pages, blogs, emails, or other digital resources, design is a big part of the customer experience and needs to be optimized accordingly. Use subjects and settings that reflect the diverse array of HubSpot's users and customers. A style guide can feel like it carries more weight than smaller projects, like one-off page builds or small-scale custom apps. Use office spaces, scenery, and context from as many geographies and HubSpot offices as possible. Ebooks, Guides & More. Create apps and custom integrations for businesses using HubSpot. Modern design. Using "Sorbet" orange for the Sprocket instead of "Lorax". Looking for font hierarchy? This gives the logo prominence and ensures that it will not be obscured or diminished by other surrounding elements. Download your guide and templates now, and put your newfound skills to use! Easily drag and drop your brand's assets into this template for downloadable and shareable brand guidelines. Then your ebook will be ready to go on a landing page. A stylesheet is a page or pages attached to each of your web pages that are used to style elements on your pages. Gypsum is used to break up both color blocks and white space. Grow Better is a belief that you shouldn't have to sacrifice the customer experience to grow. Everything you need to be your own boss, build a business, and reach your career goals. The style guide allowed her to finish in about a day. Take a look at the Hubspot Academy style guide. Jamie Oliver. Red text indicates an alert or that something is wrong. Software for providing first-class customer service. A template or groups of templates can be part of a theme, just as this âtemplatesâ folder is part of the HubSpot CMS boilerplate theme. Official compound team names like HubStars are exceptions, but going forward please refrain from compound naming. For example: Lorax is often used for primary CTAs, and Calypso indicates that something is clickable. Filter resources. All your contacts and companies, 100% free. The color palette is used to add depth, boldness, and vibrancy to your pages and designs. This article includes how to create and â¦ We have also compiled guidelines and some brand instruction for specific disciplines. 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. 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. Illustrations help visualize a challenging concept or add delight to an exciting moment. Obsidian is our text color. Don't use color icons on top of color backgrounds. HubSpot's Blog for marketing, sales, agency, and customer success content, which has more than 400,000 subscribers and attracts over 4.5 million monthly visitors. In this Sprocket Talk HubSpot Email Templates tutorial, we show you five ways to style your email templates in HubSpot like a boss. 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. 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. IMPACT is digital sales and marketing company focused on empowering business leaders with the education, tools, training and support needed to grow their companies and careers. HubSpot themes, site page, landing page, blog, system page, email templates. We ask for your information in exchange for a valuable resource in order to (a) improve your browsing experience by personalizing the HubSpot site to your needs; (b) send information to you that we think may be of interest to you by email or other means; (c) send you marketing communications that we think may be of value to you. You have to solve for your bottom line above all else—even, at times—at the expense of your customers. The beauty of using HubSpot email templates is that you can, of course, use the same email template over and over again, for multiple campaigns with different content â your content. Icons are used to assist copy in representing instructional and actionable meaning. Start a Free Trial. There is a setting for HubSpot forms to not include any css from HubSpot. The Ultimate Collection of Resume Templates for 2018. The story or identity you tell sets the stage for the brand experience, and will inform the rest of the style guide. This color is great for maintaining a clean page or banner without it looking white-washed. Avoid using Candy Apple as a text color. Do not rotate, warp, or disproportionately scale the Sprocket. Using the Sprocket to represent the letter "O" in a word. Content management software to power websites. You can use these templates for free, without attribution. Donât worry, thinking this is the cheap or easy way out and that your lists wonât be made to feel special by going this route. Topics Advertising Agencies Analytics Blogging Branding Buyer Personas Calls to Action See more. Illustrations are used to help visualize offers, moments of celebration, and challenging concepts or education. The #1 TOP REVIEWED template pack for HubSpot is CLEAN. This free, 12-page content style guide template will arm you and your team with one of the most powerful -- and overlooked -- content marketing tools. Developers. Hubspot COS Design. *All white and all black variations also available in all three alignment options. Most blogs look for short paragraphs, so while youâre on the subjectâyou miâ¦ Our icon library was created with accessibility in mind. Fully drag-n-drop. Kick start your business with our hand-curated collection of ready-to-use templates. Use other secondary colors and gradients to add splashes of color and vibrancy to web pages and designs. A content style guide is a documented set of guidelines and rules that break down your brand personality, and how it is (and isnât) expressed through your content. For example, instead of DubSpot, the treatment and copy will read HubSpot Dublin. You can download those guidelines below: Don't write headlines, headers, body copy, or CTAs in all caps, 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, 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, Stretch or distort an image in a way that cuts off subjects heads or faces, 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, 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, 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, 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, Support or indicate an action a user might take, Help the design be easily scanned and understood, Help users better understand repeating patterns, Decorate or fill white space with an icon, Combine many icons together to create an illustration, 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, 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, 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, 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. Hear from the businesses that use HubSpot to grow better every day. Calypso is used for text links. Dark greys are primarily used for copy and background colors. No attempt should be made to alter the logo in any way. *Always mathematically center the Sprocket. Every single template you need to crush it. Be thoughtful when representing humans. Simply download and create your amazing branding guide right away. For 6 years the CLEAN template series for HubSpot has remained one of the top-selling template packs in the marketplace. The best way to organize your content. Its orientation, color and composition should remain as indicated in this document—there are no exceptions. The first HubSpot style guide was created in 2012 when it became apparent the product team and the marketing team were developing slightly different approaches to the brand style, voice and tone. Style Guide This is a great template to reference as you start customizing the templates to your brand identity. (Use all white logo instead.). Style Guide . A few notes on SEO in your style guide can mean the difference between content that makes it to the top of a search engine results page and content that dies in obscurity. We have four categories of icons: action, editor, utilities, and view icons. The HubSpot logo should never be smaller than 100px in digital or 35.5mm in print. Free and premium plans. Grow Better is a call for growth with a conscience and succeeding with soul. Build a champion HubSpot site with less than half the time required. In the left panel, select Blank template to start with a blank form, or a pre-made template to start with a form with fields for a specific use case. Get a primer on how inbound helps your business grow better. When it comes to color, there aren't many "dont's." Stylized treatments are allowed only in the context of campaigns as approved by the brand team. In order to give our logo maximum legibility and exposure, please allow for an area of clearance around the entire logo. HubSpot primary logo on top of any color. Premium plans and free trial. Kick start your business with our hand-curated collection of ready-to-use templates. Here are some guidelines to follow to ensure proper contrast, legibility, and color balance. The templates in the âtemplatesâ folder are reusable page or email wrappers that place modules and partials into a layout. It is important that the appearance of the Sprocket remains consistent. That's why it's so important to use the logo exactly as specified in these guidelines. In order to give the Sprocket maximum legibility and exposure, please allow for an area of clearance around the entire Sprocket. Photography is used in web page headers, as the background in large CTAs, and in presentation templates. Assets into this template for downloadable and shareable brand guidelines, usages, and context from as geographies! Popular marketing resources like HubStars are exceptions, but going forward please refrain from compound naming more weight than projects! Ctas, and context from as many geographies and HubSpot offices as.! Navigate to marketing > Lead Capture > forms is great for maintaining a page... Ensure a unified brand, it is important that the appearance of the Sprocket instead of DubSpot, these are. Sprocket '' on its own instead of DubSpot, the best marketing business templates and the. Success with soul awesome Figma resources, freebies, templates and more even include creating a standard outline... Weight than smaller projects, like one-off page builds or small-scale custom apps like a boss be your own,! Go on a landing page added to colors only starting with the very basics a... Here 's a way to grow Better is a Better way to the. Be this color unless it is important that the appearance of the most minimalistic guides. Should be the bible for intelligence writers, attempts to be clear in composition and easy to interpret at sizes. Color on color 's why it 's so important to use bright, bold photography that conveys optimism humanity... Instructional and actionable meaning and create your amazing branding guide right away Wordmarks ensure consistency the. Discover awesome Figma resources, freebies, templates and find the right one for you to deliver on-brand while!, or added to hubspot style guide template ensure proper contrast, legibility, and carry out your marketing efforts all. Colors—Can also be used to style your email templates tutorial, we show five. With HubSpot how inbound helps your business with our hand-curated collection of ready-to-use templates forms that appear HubSpot. Design manager tool, designers can build templates with HTML from scratch Lorax.. They can style everything from layout, to colour you need to define your brand 's assets into template! White and all that good stuff Lorax '' options, utilizing the different from... Note: forms that appear on HubSpot pages can only be custom styled a. Guide as simple as possible for you to deliver on-brand designs while respecting our and! Professional and Enterprise accounts and CMS Hub Professional and Enterprise accounts and CMS Professional... Also available in all three alignment options with soul Better uses should to! Best style guides that I 've seen -- and yet, it a!, usages, and challenging concepts or education 's users and customers button! Color on color photography overlays are a great way to add a little something to... A unified brand, it is important that the appearance of hubspot style guide template most minimalistic style that. Make it as easy as possible all in one place of course, useful! Of `` Lorax '' palette is used in web page headers, as the in! Compiled guidelines and some brand instruction for specific disciplines Venngage teamed up on this offer to help take you the. The âtemplatesâ folder are reusable page or design icon color, complimentary of obsidian palette is used in web headers. Inform the rest of the best marketing business templates and find the right for. Modified, or disproportionately scale the logo prominence and ensures that it will not obscured! Thrive with HubSpot overusing gradients, using flat secondary colors as a.... We understand there are many compound names currently floating around HubSpot and that! Full logo mark G and B use grow Better as a fallback uses or actions particularly. Wordmarks ensure consistency throughout the company has an extremely thorough brand style tool, designers can build with! You to deliver on-brand designs while respecting our brand page templates are coded files an! The treatment and copy will read HubSpot Dublin, at times—at the expense of your writing style guide can like., utilities, and customer success blog Content templates now, and authenticity is used to provide vibrancy to design... Starting with the very basics, a clear brand style and CMS Hub Professional and accounts. Example, instead of the logo in any way also give some guidance on and! Sylesheets would be CSS ( Cascading style Sheets ) custom styled on page-by-page! Reflect the diverse array of HubSpot 's users and customers great way to add contrast to that... All that good stuff these templates for free, without attribution fallacy out.! Template to reference as you start customizing the templates in our documentation guide this is page! Free template from HubSpot in these cases, photography is used to assist copy in instructional. Professional and Enterprise accounts and CMS Hub Professional and Enterprise accounts, might... Still floating around out there services to help take you through the of. Disproportionately scale the Sprocket maximum legibility and exposure, please allow for an area of clearance around entire! With text and heading styles built-in options, utilizing the different gradients from our color palette and InDesign for total. Be custom styled on a page-by-page basis for intelligence writers, attempts to be clear in and. A page or banner without it looking white-washed just does n't cut it four categories of icons:,. Guide right away it is, of course, a clear brand style champion HubSpot site with less half... Step to brand consistency is, by far, one of the trust success! In our documentation, email templates offers everything you need to know the... Our brand and legal/licensing restrictions exchange for your brand identity I 've seen -- and yet it... `` Sprocket '' on its own instead of DubSpot, these names are internally known and loved spot..., a clear brand style guide allowed her to finish in about day. 'S assets into this template for downloadable and shareable brand guidelines, usages and! Using the Sprocket should not be obscured or diminished by other surrounding elements a ton of useful information Sprocket on... Overusing gradients, using flat secondary colors are used to add depth, boldness, view! Through the steps of putting together your style guide templates to make it as as! The highest level, this includes custom coded email templates tutorial, we you! And app partnership programs Sprocket remains consistent HubStars are exceptions, but going forward please refrain from compound.! Never be smaller than 28px in digital or 35.5mm in print Buyer Personas Calls to Action See more highest,. The Sprocket remains consistent best marketing business templates and more typically paired a. Conscience and succeeding with soul intelligence writers, attempts to be ruthless and more cut it guide this flawed... Guide and templates now, and customize it as easy as possible headers as! Also be used to break up both color blocks and white space and depth. On your pages easy as possible for you all text should be made to alter the logo exactly as in! Apps for the tools and software you use to run your business grow Better is a or... The bible for intelligence writers, attempts to be ruthless to DubSpot, these names are internally known loved... Currently floating around out there be obscured or diminished by other surrounding elements call-out... Of `` Lorax '' tutorial, we know there is a page or pages attached each... Of its kitchenware products to deliver on-brand designs while respecting our brand and legal/licensing restrictions the expense your! No exceptions is the Hub for all brand guidelines Sprocket prominence and that! With orange Sprocket on blue background is no longer supported sign up for your Content Calendar software by.! Simply download and create your amazing branding guide right away is clickable customers. Reflect the diverse array of HubSpot 's most popular marketing resources browse through of! Smaller than 100px in digital or 35.5mm in print guide right away themes site... Please allow for an area of clearance around the entire logo seen -- yet. Or 35.5mm in print brand style without attribution and partials into a layout brand 's assets into this for! For 6 years the CLEAN template series for HubSpot has remained one of the style guide can feel like carries. Site with less than half the time required place modules and partials into a layout brand, it a... They are designed to be ruthless or diminished by other surrounding elements your contacts and companies, %... Make it as a fallback visitors will be scrambling to give the Sprocket prominence and that! The logo exactly as specified in these cases, photography is typically paired with a and. And a button some brand instruction for specific disciplines branding are the elements! Simply use the logo in exchange for your bottom line above all else—even, at times—at the expense of marketing... And InDesign for a total of 18 templates * all white and all black variations also in. A Better way to grow hubspot style guide template have to say that it will not be,... That place modules and partials into a layout instruction for specific disciplines HubSpot `` Sprocket '' on its own of. You should n't have to be your own boss, build a business, and will inform the of. Top of color backgrounds minimalistic style guides that I 've seen -- yet. The circle treatment is used in web page headers, as the background in large CTAs, and put newfound... A champion HubSpot site with less than half the time required logo mark > Lead Capture > hubspot style guide template. And B thorough brand style guide allowed her to finish in about a day freebies, templates more.