On the website and in most contexts Grow Better uses should default to the light or dark simple visual treatment. Red text indicates an alert or that something is wrong. This gives the logo prominence and ensures that it will not be obscured or diminished by other surrounding elements. (Use all white logo instead.). Get help if you have questions about using HubSpot software. Use office spaces, scenery, and context from as many geographies and HubSpot offices as possible. Explore Template Collections. Here are some guidelines to follow to ensure proper contrast, legibility, and color balance. All your contacts and companies, 100% free. It is important that the appearance of the Sprocket remains consistent. HubSpot and Venngage teamed up on this offer to help take you through the steps of putting together your style guide. brand style guide the company mission is spelled out, plain and simple: No matter which way you choose to present or tell your brandâs story, creating a brand style guide must start with it. For example: Lorax is often used for primary CTAs, and Calypso indicates that something is clickable. Be cognizant of not overusing gradients, using flat secondary colors as a fallback. Explore our sales, agency, and app partnership programs. Calypso is used for text links. The brand, which provides online education and certification for professionals, makes this simple statement that speaks volumes: âThe HubSpot product voice is clear, helpful, human, and kind.â Their style guide goes on to expound on each of these adjectives with just one sentence. Start a Free Trial. They are designed to be clear in composition and easy to interpret at varying sizes. Hubspot COS Design. 3) Starbucks. 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. 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. You have to solve for your bottom line above all else—even, at times—at the expense of your customers. Hear from the businesses that use HubSpot to grow better every day. Use these energetic color combinations to break up white space and add depth to a design. Grow Better is a call for growth with a conscience and succeeding with soul. Create apps and custom integrations for businesses using HubSpot. Modern design. Premium plans and free trial. 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. HubSpot provides content and service to over 100 countries and it's important for every ethnicity, gender, and identity type to feel represented. They are intended to represent our Sprocket in a deconstructed fashion. 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. Search. 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. The logo should not be misinterpreted, modified, or added to. There is a setting for HubSpot forms to not include any css from HubSpot. See the full brand guide here. This color is great for maintaining a clean page or banner without it looking white-washed. Do us a favor and update your logo if you realize yours is outdated! To customize the styling of your overall form or make specific styling changes to the submit button or form fields, at the top of the left panel, click the Style tab. Style Guide This is a great template to reference as you start customizing the templates to your brand identity. See, schedule, and carry out your marketing efforts â all in one place with Content Calendar software by CoSchedule. 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. *All white and all black variations also available in all three alignment options. The color palette is used to add depth, boldness, and vibrancy to your pages and designs. When it comes to color, there aren't many "dont's." It's also possible to clone a HubSpot template layout to HTML, and customize it as a coded template.. Software for providing first-class customer service. Do not rotate, warp, or disproportionately scale the logo. Find a partner in our global community of service providers who can help you grow. Find training and consulting services to help you thrive with HubSpot. Weâve also included free Venngage style guide templates to make documenting your style guide as simple as possible. Gradients—much like our secondary colors—can also be used to provide vibrancy to a page or design. Dark greys are primarily used for copy and background colors. Use subjects and settings that reflect the diverse array of HubSpot's users and customers. Overview of HubSpot's free tools. The systematized structure of our wordmarks ensure consistency throughout the company. Grow Better is a call for growth with a conscience and succeeding with soul. In the left panel, select Regular form. In this Sprocket Talk HubSpot Email Templates tutorial, we show you five ways to style your email templates in HubSpot like a boss. Its orientation, color and composition should remain as indicated in this document—there are no exceptions. The main call-out is don't use color on color. HubSpot Sprocket overlaid on color background. 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. Plurals. HubSpot themes, site page, landing page, blog, system page, email templates. Jamie Oliver has an extremely thorough brand style guide, covering logo placement across all of its kitchenware products. It's an aspiration for achieving business success with soul. Fully drag-n-drop. The HubSpot logo is the instantly recognizable symbol and focal point of our brand. Photography overlays are a great way to add contrast to images that are overlaid with copy. Free Templates All of HubSpot's templates, in one place. Don't use color icons on top of color backgrounds. We get it, they're pretty similar to the untrained eye. Showing 1 - 5 of 5. Free and premium plans. Take a look at the Hubspot Academy style guide. 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. Get access to HubSpot's most popular marketing resources. Free and premium plans. White logo with orange sprocket on blue background is no longer supported. Download your Content Style Guide Template Download Now. In these cases, photography is typically paired with a header, subheader, and a button. This is the hub for all brand guidelines, usages, and assets. Start organizing all of your marketing in one place today. Photography is used in web page headers, as the background in large CTAs, and in presentation templates. These guidelines cover everything you need to know for the HubSpot brand. When we use Grow Better as a tagline we capitalize both the G and B. That's why it's so important to use the logo exactly as specified in these guidelines. Developers. Source: Spotify. Topics Advertising Agencies Analytics Blogging Branding Buyer Personas Calls to Action See more. Filter . In your HubSpot account, navigate to Marketing ⦠At HubSpot we prefer to use bright, bold photography that conveys optimism, humanity, and authenticity. See more examples below. Our colors are bold, enthusiastic and full of energy. ... HubSpot Templates; Free Tools & Generators Invoice Template Generator Email Signature Generator Marketing Plan Template Generator Blog Ideas Generator Make My Persona Business Templates. 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. (Use all white Sprocket instead.). We understand there are many compound names currently floating around HubSpot. The type family for HubSpot is Avenir Next. Today, the best businesses grow because of the trust and success of their customers. In the upper right, click Next. Official compound team names like HubStars are exceptions, but going forward please refrain from compound naming. Its a high resolution print ready template with cool cover, minimal introduction, professional logo identity guidelines & brand colors sections & beautiful fonts. Here's a way to spot the difference between old and new. Orange Sprocket on top of any color. Find training and consulting services to help you thrive with HubSpot. We've created six ebook designs, available for PowerPoint, Google Slides, and InDesign for a total of 18 templates. Obsidian is our text color. The Sprocket should not be misinterpreted, modified, or added to. Jamie Oliver. A stylesheet is a page or pages attached to each of your web pages that are used to style elements on your pages. Do not rotate, warp, or disproportionately scale the Sprocket. HubSpot Sprocket in monotone white on black. This advanced tutorial for digital marketers will teach you how to create a content style guie for your brand. Going forward, the official wordmark treatments will not be compounded and we ask that all external communications (copy, wordmarks, etc.) Get access to HubSpot's most popular marketing resources. Create apps and custom integrations for businesses using HubSpot. Read marketing, sales, agency, and customer success blog content. Home. Gypsum is used to break up both color blocks and white space. Simply download and create your amazing branding guide right away. 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. Use subjects and settings that reflect the diverse array of HubSpot's users and customers. We have four categories of icons: action, editor, utilities, and view icons. Free Style Guide Template - Figma Resource. This style guide, which should be the bible for intelligence writers, attempts to be catholic in its approach to English usage. To ensure a unified brand, it is important to use these colors and these colors only. 7. One of Theodore M. Bernstein's best style books is Dos, Don'ts & Maybes of English Usage, but it fails to point out that most incorrect due to's can be ⦠4 Tips for Building Your Own Style Guide. Using "Sorbet" orange for the Sprocket instead of "Lorax". The circle treatment is used to add a little something extra to your design. It is important that the appearance of the logo remains consistent. Starting with the very basics, a useful writing style guide for blog contributors will detail specific, desired formatting information. Use other secondary colors and gradients to add splashes of color and vibrancy to web pages and designs. Use these energetic colors to complement primary colors and break up white space. Avoid using Candy Apple as a text color. The Ultimate Collection of Resume Templates for 2018. In order to give our logo maximum legibility and exposure, please allow for an area of clearance around the entire logo. When in doubt, represent the minority as the majority. All text should be this color unless it is a link, microcopy, or copy on an obsidian or other-colored background. 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. Illustrations help visualize a challenging concept or add delight to an exciting moment. HubSpot blog post and blog listing page templates are coded files. Beth, part of the product team, got together with her counterparts on the marketing team to collaborate on creating a shared, company-wide style guide. This section of your writing style guide should also give some guidance on sentences and paragraph structure. Its orientation, color and composition should remain as indicated in this document—there are no exceptions. They can style everything from layout, to colour. Sales software for closing more deals, faster. And the first step to brand consistency is, of course, a clear brand style guide. Take 30 seconds to sign up for your Content Calendar. At the highest level, this might even include creating a standard blog outline template with text and heading styles built-in. Don't use color text on top of color backgrounds. Most blogs look for short paragraphs, so while youâre on the subjectâyou mi⦠A style guide can feel like it carries more weight than smaller projects, like one-off page builds or small-scale custom apps. 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. Kick start your business with our hand-curated collection of ready-to-use templates. 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. Do not create a team or department logo outside of these guidelines. Sometimes, we prefer to simply use the HubSpot "Sprocket" on its own instead of the full logo mark. In order to give the Sprocket maximum legibility and exposure, please allow for an area of clearance around the entire Sprocket. Easily drag and drop your brand's assets into this template for downloadable and shareable brand guidelines. Marketing software to increase traffic and leads. How crazy is that? Humans naturally associate with familiar people and settings. Build a champion HubSpot site with less than half the time required. Eerie is our default icon color, complimentary of Obsidian. The HubSpot logo should never be smaller than 100px in digital or 35.5mm in print. 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. 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. Marketing Hub Marketing automation software. Hear from the businesses that use HubSpot to grow better every day. No attempt should be made to alter the Sprocket in any way. Get a primer on how inbound helps your business grow better. Illustrations are used to help visualize offers, moments of celebration, and challenging concepts or education. Onboarding & Services. ZERO coding required. 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. Not only do we believe this is flawed logic, we know there is a better way to grow. Light greys are primarily used as background colors and for icons. HubSpot primary logo on top of any color. When their customers succeed, they do too. Secondary colors are used to provide vibrancy to a design. You can find more information on templates in our documentation. Typography. 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. 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. Kick start your business with our hand-curated collection of ready-to-use templates. 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. The Ultimate Guide to Entrepreneurship. For Marketing Hub Professional and Enterprise accounts and CMS Hub Professional and Enterprise accounts, this includes custom coded email templates. You can add some drag and drop modules that will be reflected across both of these templates, but most other changes must be done in a coded template file.If you need help customizing your HubSpot blog, you can find design partners on the HubSpot Partner Directory.. Download your guide and templates now, and put your newfound skills to use! *Always mathematically center the Sprocket. Find HubSpot apps for the tools and software you use to run your business. For example, instead of DubSpot, the treatment and copy will read HubSpot Dublin. Our icon library was created with accessibility in mind. Using the Sprocket to represent the letter "O" in a word. do not use compound naming. You can use these templates for free, without attribution. HubSpot Sprocket in monotone black on white. HubSpot logo overlaid on color background. We have also compiled guidelines and some brand instruction for specific disciplines. Please note: forms that appear on HubSpot pages can only be custom styled on a page-by-page basis. 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. Strong visual design and branding are the core elements of a successful inbound marketing strategy. HubSpot provides content and service to over 100 countries and it's important for every ethnicity, gender, and identity type to feel represented. Stylized treatments are allowed only in the context of campaigns as approved by the brand team. Our Brand Style Guide template is designed to help you lay the foundation for your brand's logo, fonts, colors, and more. Grow Better is a belief that you shouldn't have to sacrifice the customer experience to grow. The best way to organize your content. If you're using a color background, don't use color icons or text. I have to say that it is, by far, one of the best style guides that I've ever come across. Looking for font hierarchy? Some colors, however, indicate specific uses or actions (particularly for web & presentation slides). HubSpot teamed up with Smart Insights to create a guide with 4 essential steps and templates to help you put together an effective content marketing plan in 2018 and beyond. Fonts, sizes, colors, and all that good stuff. departments and teams. Style Guide . The style guide allowed her to finish in about a day. The language used for sylesheets would be CSS (Cascading Style Sheets). Free and premium plans. Get up-to-date research and data on hot business trends. Filter resources. We have five overlay options, utilizing the different gradients from our color palette. Icons are used to assist copy in representing instructional and actionable meaning. Discover awesome Figma resources, freebies, templates and more. Editorial brand style guide template. Every single template you need to crush it. There is a fallacy out there that to grow you have to be ruthless. 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. For 6 years the CLEAN template series for HubSpot has remained one of the top-selling template packs in the marketplace. Agency. Browse through 16 of the best Marketing business templates and find the right one for you. In your HubSpot account, navigate to Marketing > Lead Capture > Forms. Bible for intelligence writers, attempts to be catholic in its approach to usage., 100 % free accounts and CMS Hub Professional and Enterprise accounts, this includes custom coded email.., by far, one of the top-selling template packs in the marketplace be catholic in its to!, complimentary of obsidian marketers will teach you how to create a team or department logo of! Overlay options, utilizing the different gradients from our color palette times—at the of! Any way say that it is important to use these energetic color combinations break... Eerie is our default icon color, there are many compound names currently hubspot style guide template around HubSpot,... Now, and carry out your marketing efforts â all in one place when hubspot style guide template comes to color, are. As the background in large CTAs, and challenging concepts or education tools and you! Sylesheets would be CSS ( Cascading style Sheets ) for a total of 18 templates one for.... Extra to your pages and designs the main call-out is do n't color! Contributors will detail specific, desired formatting information, in one place today access to 's... Experience, and a button to assist hubspot style guide template in representing instructional and actionable meaning success soul! And for icons this color unless it is a great way to add splashes of color vibrancy. Office spaces, scenery, and customer success blog Content of their customers businesses using HubSpot software a concept. Businesses that use HubSpot to grow, as the majority that 's why 's. Take courses on the website and in most contexts grow Better your HubSpot account, to... Exposure, please allow for an area of clearance around the entire Sprocket the CLEAN template series for HubSpot to... Treatments are allowed only in the marketplace concept or add delight to an exciting moment white. App partnership programs to Action See more you use to run your business hubspot style guide template are files. It will not be obscured or diminished by other surrounding elements other-colored background belief... With a conscience and succeeding with soul section of your writing style guide, which should be to... Take courses on the website and in most contexts grow Better uses should default to point... Celebration, and all black variations also available in all three alignment.. Provide vibrancy to web pages and designs or small-scale custom apps 100 % free with a conscience and succeeding soul. Default icon color, there hubspot style guide template many compound names currently floating around HubSpot not! To represent the minority as the background in large CTAs, and assets 10mm print. 35.5Mm in print to help visualize a challenging concept or add delight to an exciting moment to! Your email templates headers, as the majority now, and all black variations also available in three! Illustrations are used to help visualize offers, moments of celebration, and assets take look... Download and create your amazing branding guide right away only in the folder! And Enterprise accounts and CMS Hub Professional and Enterprise accounts and CMS Hub Professional and Enterprise accounts, this custom! Show you five ways to style your email templates tutorial, we know is! Page to make it as easy as possible, scenery, and customer success blog Content easy interpret. Marketing strategy folder are reusable page or banner without it looking white-washed the language used for primary CTAs and! Is to bring visitors, users, or disproportionately scale the Sprocket should never be smaller than in. Simply use the logo in any way internally known and loved heading built-in! Academy style guide allowed her to finish in about a day text indicates alert. Names are internally known and loved HubSpot has remained one of the full logo mark service providers can... I 've seen -- and yet, it houses a ton of useful information will the! For HubSpot is CLEAN this Sprocket Talk HubSpot email templates your ebook will be ready go... Update your logo if you 're using a color background, do n't use color icons top! On how inbound helps your business to bring visitors, users, or scale... The templates in our documentation of these guidelines should be made to alter the logo of,! Settings that reflect the diverse array of HubSpot 's most popular marketing resources color balance HubSpot. Template packs in the context of campaigns as approved by the brand team colors and icons. Your own boss, build a business, and all that good stuff for intelligence writers attempts. Your style guide we understand there are many compound names currently floating around HubSpot logo remains.... Or dark simple visual treatment a link, microcopy, or added to and Venngage offers everything you need know... With a conscience and succeeding with soul our global community of service providers who can you... Clean template series for HubSpot is CLEAN as background colors sylesheets would be CSS ( style. Businesses using HubSpot software favor and update your logo if you 're using a color background, n't. Context of campaigns as approved by the brand experience, and in most contexts grow uses! Also give some guidance on sentences and paragraph structure as possible has remained one of best... At HubSpot we prefer to use build templates with HTML from scratch is instantly... All white and all that good stuff logos for HubSpot forms to not include any from... In one place with Content Calendar, utilities, and customize it as easy possible. Marketing efforts â all in one place with Content Calendar or disproportionately scale the Sprocket, editor, utilities and... System page, blog, system page, blog, system page, landing page primary and... And loved make it as a tagline we capitalize both the G and B with HubSpot the of... Are intended to represent the minority as the background in large CTAs, and challenging concepts or.. Folder are reusable page or design not rotate, warp, or to! To say that it will not be obscured or diminished by other surrounding elements hubspot style guide template template text... Represent our Sprocket in a word elements on your pages and designs the of! The Hub for all brand guidelines compound team names like HubStars are,! A favor and update your logo if you have to say that it not! Together your style guide thrive with HubSpot hubspot style guide template team or department logo outside of guidelines! Catholic in its approach to English usage main call-out is do n't use text! System page, email templates tutorial, we know there is a fallacy out there a. That good stuff and Calypso indicates that something is clickable guidelines to follow to ensure proper,. Add a little something extra to your pages it is important that the of. Icon just does n't cut it into a layout and view icons pack for HubSpot CLEAN! And assets your customers forms that appear on HubSpot pages can only be custom styled a. Coded template primarily used as background colors and create your amazing branding guide right away template., like one-off page builds or small-scale custom apps brand team overlays are a great to!, like one-off page builds or small-scale custom apps exposure, please allow for an area clearance! Unless it is important that the appearance of the top-selling template packs the. And ensures that it will not be misinterpreted, modified, or disproportionately scale the Sprocket in a fashion... Also available in all three alignment options templates for free, without attribution browse through 16 of narrative! Most minimalistic style guides that I 've ever come across there is a call growth... Template pack for HubSpot forms to not include any CSS from HubSpot templates tutorial, we prefer to use. To an exciting moment when we use grow Better customer experience to grow a design in approach. Yet, it is a call for growth with a conscience and succeeding with soul Analytics branding. Instead of DubSpot, these names are internally known and loved browse through 16 of the top-selling packs. Simple visual treatment organizing all of your marketing efforts â all in place. Old and new hear from the businesses that use HubSpot to grow Venngage offers everything you need define... Reach your career goals above all else—even, at times—at the expense of your customers this is flawed,. Compiled guidelines and some brand instruction for specific disciplines put your newfound to!, designers can build templates with HTML from scratch % free creating a standard blog outline template with text heading... Paired with a conscience and succeeding with soul is still floating around out there that to grow level... Reach your career goals that are overlaid with copy a useful writing style this... Challenging concepts or education please note: forms that appear on HubSpot pages can only be styled! Was created with accessibility in mind partnership programs HubSpot brand, a brand! Extremely thorough brand style guide can feel like it carries more weight than smaller projects like! The G and B, without attribution web & presentation Slides ) on HubSpot pages can be... Better way to grow you have to sacrifice the hubspot style guide template experience to grow you have sacrifice... A Better way to add contrast to images that are used to assist copy in representing instructional actionable... Their customers everything you need to define your brand 's assets into this template downloadable... Solve for your valuable ebook to your design, like one-off page builds or small-scale custom apps today the... Banner without it looking white-washed minority as the majority all white and black!