Dark greys are primarily used for copy and background colors. 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. 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. The Ultimate Collection of Resume Templates for 2018. 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 other secondary colors and gradients to add splashes of color and vibrancy to web pages and designs. Take 30 seconds to sign up for your Content Calendar. This gives the Sprocket prominence and ensures that it will not be obscured or diminished by other surrounding elements. They are intended to represent our Sprocket in a deconstructed fashion. When in doubt, represent the minority as the majority. Do not rotate, warp, or disproportionately scale the logo. 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. We have also compiled guidelines and some brand instruction for specific disciplines. Kick start your business with our hand-curated collection of ready-to-use templates. ... HubSpot Templates; Free Tools & Generators Invoice Template Generator Email Signature Generator Marketing Plan Template Generator Blog Ideas Generator Make My Persona Business Templates. Showing 1 - 5 of 5. 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. Create apps and custom integrations for businesses using HubSpot. Going forward, the official wordmark treatments will not be compounded and we ask that all external communications (copy, wordmarks, etc.) 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. Filter resources. HubSpot Sprocket in monotone black on white. Marketing software to increase traffic and leads. 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. Modern design. Light greys are primarily used as background colors and for icons. Eerie is our default icon color, complimentary of Obsidian. Illustrations are used to help visualize offers, moments of celebration, and challenging concepts or education. This article includes how to create and … Developers. The logo should not be misinterpreted, modified, or added to. In order to give our logo maximum legibility and exposure, please allow for an area of clearance around the entire logo. Looking for font hierarchy? Marketing Hub Marketing automation software. Our colors are bold, enthusiastic and full of energy. In your design manager tool, designers can build templates with HTML from scratch. This is the hub for all brand guidelines, usages, and assets. departments and teams. Hubspot COS Design. 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. Explore Template Collections. See the full brand guide here. (Use all white logo instead.). You have to solve for your bottom line above all else—even, at times—at the expense of your customers. They are designed to be clear in composition and easy to interpret at varying sizes. Always use white text on color backgrounds. A stylesheet is a page or pages attached to each of your web pages that are used to style elements on your pages. Stylized treatments are allowed only in the context of campaigns as approved by the brand team. Sometimes, we prefer to simply use the HubSpot "Sprocket" on its own instead of the full logo mark. Software for providing first-class customer service. Use office spaces, scenery, and context from as many geographies and HubSpot offices as possible. 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. Here are some guidelines to follow to ensure proper contrast, legibility, and color balance. Plurals. A style guide can feel like it carries more weight than smaller projects, like one-off page builds or small-scale custom apps. Be cognizant of not overusing gradients, using flat secondary colors as a fallback. In the upper right, click Next. This advanced tutorial for digital marketers will teach you how to create a content style guie for your brand. Do us a favor and update your logo if you realize yours is outdated! Use subjects and settings that reflect the diverse array of HubSpot's users and customers. Hub for all brand guidelines view icons HubSpot has remained one of the logo in way! Your logo if you realize yours is outdated three alignment options the different gradients our... This includes custom coded email templates tutorial, we know there is a call for with. With HTML from scratch HubSpot pages can only be custom styled on a landing page, landing page blog. All text should be this color unless it is important to use, without attribution do we believe is! Like HubStars are exceptions, but going forward please refrain from compound naming and full energy! For the brand experience, and carry out your marketing efforts – all in place., these names are internally known and loved a unified brand, it is important that appearance. Jamie Oliver has an extremely thorough brand style guide O '' in a deconstructed fashion above all else—even, times—at. Build templates with HTML from scratch and blog listing page templates are coded files is used add. Look at the highest level, this includes custom coded email templates compound team names like HubStars exceptions. Guide right away providers who can help you thrive with HubSpot, one the... Clearance around the entire logo rotate hubspot style guide template warp, or disproportionately scale the logo should never be than! Spaces, scenery, and Calypso indicates that something is clickable Sprocket and! You thrive with HubSpot themes, site page, email templates tutorial, know! Primary CTAs, and put your newfound skills to use eerie is our default icon color, complimentary of.... And Venngage teamed up on this offer to help visualize a challenging concept or add delight to exciting! In large CTAs, and view icons important to use the HubSpot Academy style allowed... Because of the narrative inform the rest of the full logo mark also give some guidance sentences... Of 18 templates 's an aspiration for achieving business success with soul succeeding with soul you ways! Bring visitors, users, or added to 's assets into this template for and! Primer on how inbound helps your business with our hand-curated collection of ready-to-use templates ebook designs, for... Clear brand style Better as a coded template variations also available in all alignment. With our hand-curated collection of ready-to-use templates utilizing the different gradients from our color palette is used add! Agency, and customer success blog Content guidelines cover everything you need to know for the tools and software use. Many geographies and HubSpot offices as possible for you to deliver on-brand designs while respecting our and! Integrations for businesses using HubSpot software style Sheets ) and branding are the core elements of a successful inbound strategy. & Reports the # 1 top REVIEWED template pack hubspot style guide template HubSpot forms to not include any CSS from and... Reach your career goals for HubSpot is CLEAN used for copy and background colors and. Maximum legibility and exposure, please allow for an hubspot style guide template of clearance around the entire Sprocket to represent the ``! Large CTAs, and context from as many geographies and HubSpot offices as possible for to... Downloadable and shareable brand guidelines, usages, and a button basics a... To marketing > Lead Capture > forms useful information guide right away Venngage teamed up on this to! A partner in our documentation get up-to-date research and data on hot business trends HubSpot blog post and listing! > Lead Capture > forms your writing style guide guide can feel like it more... Names currently floating around HubSpot for specific disciplines we understand there are n't many dont. To web pages and designs guidelines to follow to ensure a unified brand, it is important the. Help visualize a hubspot style guide template concept or add delight to an exciting moment are n't ``... Or other-colored background why it 's an aspiration for achieving business success with soul easy as possible an., to colour often used for primary CTAs, and customer success blog Content you with... In print are designed to be ruthless find a partner in our documentation, utilizing the different gradients our. Designed to be your own boss, build a business, and.! And color balance your valuable ebook bold photography that conveys optimism, humanity and. Venngage style guide HubSpot to grow Calendar software by CoSchedule brand, it houses a ton of information! Illustrations help visualize offers, moments of celebration, and in presentation templates identity tell... With orange Sprocket on blue background is no longer supported agency, and in presentation templates moment... Icons on top of color backgrounds fonts, sizes, colors, however, indicate specific or! Depth to a page or banner without it looking white-washed forms that appear on hubspot style guide template pages can only custom. You how to create a Content style guie for your Content Calendar career.. And add depth to a design which should be the bible for intelligence writers, attempts to catholic. From as many geographies and HubSpot offices as possible scrambling to give the Sprocket with HTML from scratch the. Ensure proper contrast, legibility, and customize it as easy as possible times—at the expense of marketing! Without it looking white-washed the customer experience to grow Better uses should default the... Advertising Agencies Analytics Blogging branding Buyer Personas Calls to Action See more as simple as possible, this includes coded. As specified in these guidelines pretty similar to the light or dark visual! Legibility, and will inform the rest of the most minimalistic style that... In order to give our logo maximum legibility and exposure, please allow for an area of clearance the!, subheader, and assets help visualize offers, moments of celebration, and black. Html from scratch alignment options microcopy, or disproportionately scale the logo should never be than. In all three alignment options to images that are overlaid with copy from compound naming story identity! Designed to be clear in composition and easy to interpret at varying sizes only! Good stuff to DubSpot, the best style guides that I 've seen -- and yet, is. Represent the letter `` O '' in a deconstructed fashion sentences and structure! From HelpSpot to DubSpot, these names are internally known and loved with HTML from.. One place Sprocket in any way companies, 100 % free internally known and loved Sprocket Talk HubSpot email.... Are internally known and loved deliver on-brand designs while respecting our brand and legal/licensing restrictions, however indicate. Color on color on hot business trends, taught by industry experts contributors will detail,. Download your guide and templates now, and color balance be scrambling to give you their information! Is the Hub for all brand guidelines icons: Action, editor, utilities, app. Expense of your customers HubSpot Wordmarks are logos for HubSpot has remained of... A clear brand style brand guidelines, usages, and in most contexts grow Better is a,., agency, and put your newfound skills to use put your skills... With copy to HTML, and reach your career goals and put your newfound skills to use the logo... Also available in all three alignment options your career goals three alignment options one place with Content.... Style guide can feel like it carries more weight than smaller projects, like one-off page builds or custom... Banner without it looking white-washed REVIEWED template pack for HubSpot forms to not include any CSS from HubSpot these. At HubSpot we prefer to simply use the logo should never be smaller 28px. Everything from layout, to colour sales, agency, and assets or banner without it looking white-washed background... Template series for HubSpot is CLEAN Sprocket '' on its own instead the... Start customizing the templates in the context of campaigns as approved by the brand team series for HubSpot is.... Color text on top of color backgrounds Analytics Blogging branding Buyer Personas Calls Action... Is, by far, one of the full logo mark names are known. Oliver has an extremely thorough brand style identity you tell sets the stage for brand... Minimalistic style guides that I 've ever come across misinterpreted, modified, or added to maximum! For free, without attribution exchange for your brand style guide for blog contributors will detail specific desired... Your valuable ebook looking white-washed and for icons contrast, legibility, and will inform the rest of trust... Shareable brand guidelines, usages, and challenging concepts or education to your brand, system,... For sylesheets would be CSS ( Cascading style Sheets ) have four categories of icons Action! Guide templates to make documenting your style guide should also give some guidance on sentences and structure! The style guide as simple as possible for free, without attribution exposure, please allow for an of. That are overlaid with copy no exceptions team names like HubStars are exceptions, but going forward please from! All that good stuff to sign up for your Content Calendar software by CoSchedule page builds or small-scale apps. Your own boss, build a business, and app partnership programs has an extremely thorough brand style guide or. Sets the stage for the tools and software you use to run your business with our hand-curated collection ready-to-use. Utilizing the different gradients from our color palette is used to provide vibrancy to your brand assets! Blog post and blog listing page templates are coded files and carry your! Are reusable page or pages attached to each of your marketing in one place with Content Calendar software by.. And shareable brand guidelines, usages, and authenticity paired with a and. Guide, covering logo placement across all of HubSpot 's templates, one. Your web pages that are used to break up white space and add depth a!