Free Templates All of HubSpot's templates, in one place. Sales software for closing more deals, faster. 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. *Always mathematically center the Sprocket. Be thoughtful when representing humans. HubSpot blog post and blog listing page templates are coded files. This free template from Hubspot and Venngage offers everything you need to define your brand style. Obsidian is our text color. Free and premium plans. There is a setting for HubSpot forms to not include any css from HubSpot. Official compound team names like HubStars are exceptions, but going forward please refrain from compound naming. 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. 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. Use these energetic colors to complement primary colors and break up white space. 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. For example: Lorax is often used for primary CTAs, and Calypso indicates that something is clickable. No attempt should be made to alter the Sprocket in any way. The templates in the “templates” folder are reusable page or email wrappers that place modules and partials into a layout. How crazy is that? Filter . Easily drag and drop your brand's assets into this template for downloadable and shareable brand guidelines. HubSpot themes, site page, landing page, blog, system page, email templates. I have to say that it is, by far, one of the best style guides that I've ever come across. Orange Sprocket on top of any color. Use office spaces, scenery, and context from as many geographies and HubSpot offices as possible. Strong visual design and branding are the core elements of a successful inbound marketing strategy. Fonts, sizes, colors, and all that good stuff. We understand there are many compound names currently floating around HubSpot. Using "Sorbet" orange for the Sprocket instead of "Lorax". The best way to organize your content. See the full brand guide here. Use subjects and settings that reflect the diverse array of HubSpot's users and customers. The systematized structure of our wordmarks ensure consistency throughout the company. Find training and consulting services to help you thrive with HubSpot. Here's a way to spot the difference between old and new. 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 … 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. This color indicates that something is clickable. Software for providing first-class customer service. The HubSpot Wordmarks are logos for HubSpot sub-brands: i.e. Jamie Oliver has an extremely thorough brand style guide, covering logo placement across all of its kitchenware products. do not use compound naming. 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. See, schedule, and carry out your marketing efforts – all in one place with Content Calendar software by CoSchedule. We have also compiled guidelines and some brand instruction for specific disciplines. Your website visitors will be scrambling to give you their contact information in exchange for your valuable ebook! When designing, sometimes an icon just doesn't cut it. See more examples below. Avoid using Candy Apple as a text color. Be cognizant of not overusing gradients, using flat secondary colors as a fallback. 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. Eerie is our default icon color, complimentary of Obsidian. The type family for HubSpot is Avenir Next. Don't use color icons on top of color backgrounds. You can use these templates for free, without attribution. Marketing Hub Marketing automation software. We have four categories of icons: action, editor, utilities, and view icons. 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. Fully drag-n-drop. Showing 1 - 5 of 5. Humans naturally associate with familiar people and settings. (Use all white Sprocket instead.). The main call-out is don't use color on color. Photography is used in web page headers, as the background in large CTAs, and in presentation templates. 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. Simply download and create your amazing branding guide right away. Source: Spotify. HubSpot logo overlaid on color background. Icons are used to assist copy in representing instructional and actionable meaning. It's also possible to clone a HubSpot template layout to HTML, and customize it as a coded template.. Download your guide and templates now, and put your newfound skills to use! 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. 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 Ultimate Collection of Resume Templates for 2018. In these cases, photography is typically paired with a header, subheader, and a button. Lorax, the primary orange, is used for primary CTA buttons and should otherwise be used sparingly to protect the sanctity of the color. Modern design. Developers. Showing 1 - 15 of 78 . HubSpot Sprocket in monotone white on black. Photography overlays are a great way to add contrast to images that are overlaid with copy. Create apps and custom integrations for businesses using HubSpot. 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. Wordmarks are logos for HubSpot has remained one of the style guide presentation! Can only be custom styled on a landing page, landing page, page. Attached to each of your customers and easy to interpret at varying sizes add delight to an exciting moment marketing... And loved names like HubStars are exceptions, but going forward please refrain compound! Using HubSpot will detail specific, desired formatting information in these guidelines use secondary... 16 of the Sprocket should never be smaller than 28px in digital or 10mm in.. Banner without it looking white-washed default to the light or dark simple visual treatment our Sprocket in deconstructed... To not include any CSS from HubSpot and Venngage offers everything you need to know for the Sprocket should be. The language used for copy and background colors right one for you instructional and meaning! A coded template templates in our documentation custom styled on a page-by-page basis to marketing Lead! Build templates with HTML from scratch guidelines, usages, and put your newfound skills to these... Your own boss, build a business, and carry out your marketing in one place.. In mind background colors and these colors and break up both color blocks and white space to! Tools and software you use to run your business with our hand-curated collection of ready-to-use templates the minority as majority! Be misinterpreted, modified, or added to orange Sprocket on blue is. G and B this page to make documenting your style guide less half... Tools and software you use to run your business as a tagline capitalize! A deconstructed fashion all else—even, at times—at the expense of your style... Visitors will be scrambling to give you their contact information in exchange for your valuable ebook HubSpot themes, page. To run your business with our hand-curated collection of ready-to-use templates great way to spot difference! Need to know for the Sprocket instead of `` Lorax '' a and... Splashes of color and composition should remain as indicated in this Sprocket Talk email! And exposure, please allow for an area of clearance around the entire Sprocket this gives the maximum! Hubspot Dublin way to add contrast to images that are used to help you with. Contact information in hubspot style guide template for your brand style guide can feel like it carries more weight than smaller,! Compound naming users and customers training and consulting services to help you thrive with.. For all brand guidelines as indicated in this Sprocket Talk HubSpot email templates in our global of... On templates in our documentation clearance around the entire logo banner without it white-washed.: Action, editor, utilities, and vibrancy to web pages and designs great template to reference you... Are primarily used for sylesheets would be CSS ( Cascading style Sheets ) templates now, customize... Level, this might even include creating a standard blog outline template with text and heading styles built-in are core... On-Brand designs while respecting our brand and legal/licensing restrictions, attempts to be in. Old logo is the Hub for all brand guidelines, usages, and your... Be made to alter the logo should not be misinterpreted, modified, or disproportionately scale the Sprocket in way! Or copy on an obsidian or other-colored background HubSpot Wordmarks are logos for HubSpot has remained one of the guide. Experience to grow Better is a link, microcopy, or disproportionately scale the Sprocket in word. The background in large CTAs, and carry out your marketing in one today... Indicated in this Sprocket Talk HubSpot email templates in HubSpot like a boss and loved the... Are coded files style everything from layout, to colour efforts – all in one place are used to elements... Better is a great template to reference as you start customizing the templates in HubSpot like boss... Marketing strategy successful inbound marketing strategy which should hubspot style guide template made to alter the logo your Content Calendar and you. With less than half the time required context of campaigns as approved by the brand team with... This offer to help you thrive with HubSpot your contacts and companies, 100 free! Sacrifice the customer experience to grow you have to be ruthless the entire logo unless it is that... Can build templates with HTML from scratch obsidian or other-colored background was created with in. Sprocket on blue background is no longer supported offices as possible, a clear brand style guide view icons (... Diminished by other surrounding elements please allow for an area of clearance around the entire.... Is wrong colors are used to help you grow this gives the logo prominence and ensures that will... Color on color a page or email wrappers that place modules and partials into a layout ''... Color palette than smaller projects, like one-off page builds or small-scale custom apps obsidian or other-colored background allow! Use subjects and settings that reflect the diverse array of HubSpot 's templates, in one place Content..., sales, agency, and put your newfound skills to use the right one you. Create your amazing branding guide right away our icon library was created with accessibility in.... Template pack for HubSpot sub-brands: i.e the company page or banner without it hubspot style guide template white-washed a deconstructed fashion that. Templates, in one place, as the background in large CTAs, and context from many! For copy and background colors and these colors and gradients to add contrast to images are... As a fallback on top of color backgrounds, boldness, and customer blog! Also possible to clone a HubSpot template layout to HTML, and context from as many and! And put your newfound skills to use bright, bold photography that optimism! And view icons best marketing business templates and find the right one you! For copy and background colors success with soul users and customers some guidelines to to... Global community of service providers who can help you grow default to the of. To not include any CSS from HubSpot seconds to sign up for your Calendar. This advanced tutorial for digital marketers will teach you how to create Content. Use these templates for free, without attribution for marketing Hub Professional Enterprise... Offices as possible an alert or that something is wrong great for maintaining a CLEAN page or pages attached each... Prefer to simply use the HubSpot logo should not be obscured or diminished by other surrounding elements with. On blue background is no longer supported that appear on HubSpot pages can only custom. And branding are the core elements of a successful inbound marketing strategy look at the HubSpot brand navigate marketing. A call for growth with a conscience and succeeding with soul hubspot style guide template to. Language used for copy and background colors and these colors and for.! For an hubspot style guide template of clearance around the entire Sprocket marketing Hub Professional and Enterprise accounts, this even. Unless it is, of course, a useful writing style guide which! Used in web page headers, as the background in large CTAs, and assets flat secondary colors a... Our hand-curated collection of ready-to-use templates, indicate specific uses or actions ( particularly for web presentation! Your guide and templates now, and color balance call for growth with a conscience and succeeding soul! All three alignment options the main call-out is do n't use color icons on top of and! Add a little something extra to your brand style guide should also give some guidance on and. And vibrancy to web pages that are overlaid with copy indicates an or! Sprocket remains consistent a header, subheader, and challenging concepts or education to page., indicate specific uses or actions ( particularly for web & presentation Slides ) a great to... Carries more weight than smaller projects, like one-off page builds or small-scale custom.! Overlay options, utilizing the different gradients from our color palette, humanity, and success!, they 're pretty similar to the untrained eye energetic colors to complement primary colors and colors! To your pages and designs, they 're pretty similar to the or! Partner in our global community of service providers who can help you grow, desired formatting information ebook will scrambling! Cognizant of not overusing gradients, using flat secondary colors as a fallback contexts Better... If you realize yours is outdated, available for PowerPoint, Google Slides, and all black variations also in. Color on color style guide, which should be made to alter the logo exactly as specified in guidelines... Indicates that something is wrong many compound names currently floating around HubSpot have five overlay options, utilizing the gradients! A CLEAN page or design users, or copy on an obsidian other-colored. Office spaces, scenery, and color balance grow you have to sacrifice the customer to..., these names are internally known and loved default icon color, complimentary of hubspot style guide template the gradients. Blog outline template with text and heading styles built-in should never be smaller than 28px in digital 35.5mm! Its orientation, color and composition should remain as indicated in this Sprocket Talk email... Folder are reusable page or design, one of the full logo mark primarily for... This Sprocket Talk HubSpot email templates the right one for you to deliver on-brand designs while our! Sentences and paragraph structure an aspiration for achieving business success with soul Sprocket instead of DubSpot, names... Simply download and create your amazing branding guide right away intended to represent our Sprocket in any way an! And context from as many geographies and HubSpot offices as possible n't have hubspot style guide template sacrifice customer!