Web Style Guide

The Web Style Guide is a showcase of HubSpot's Canvas approved modules that Marketers can use to build landing pages. The Canvas Design System has allowed HubSpot to create products and tools effectively and efficiently, and now this system is optimized and available to all.

Welcome to the Web Style Guide

We'll get you ready to create beautiful landing pages in no time! But first, we'd like to give you a lay of the land, define some common terms, and point you toward a few key resources you have available to you.

What is a module?

Modules are the building blocks of all HubSpot pages. We use them to hold all sorts of web content, from testimonials to photo galleries — and everything in between. To make it easier to build consistent, beautiful pages on HubSpot.com, we've developed this library of custom modules that reflect our brand values, our style principles, and ultimately they enable you with the tools you'll need to succeed.

All of these modules are flexible in nature, and completely responsive. Not only do they have many different ways in which you can use them on your pages,but they will also adapt to whatever content you place within them. (For example, the Multi-Column Content module will show a different number of columns base on how many fields are populated in the page editor.)

Most modules have a few variations in terms of background color, layout, and other theming considerations. To build a complete and robust HubSpot page, continue to add and arrange modules on your page in a variety of effective combinations. Need inspiration? Check out the Modules page where you can find links to existing pages using each module in an effectively way!

How to use the Style Guide

Follow these steps to create a successful landing page.

Step 1

First, you'll need access to the HubSpot portal. Once approved, you will then have access to the necessary Style Guide approved templates with which you can begin to create new pages. Please do not clone these templates.

Get access to 53
Step 2

Before starting your page, we recommend collecting all of the necessary assets you want to use: photos, videos, testimonials, and the copy, of course!

Step 3

Think about what you're trying to accomplish with your page. Are you trying to drive visitors to fill out a form? What's the simplest message you want to convey? These questions will help you to choose appropriate modules.

Step 4

When you're ready to start creating, the best template for getting started is the 1-Column Flexible [SG] template. Using this, you can then add any approved Style Guide module directly from the page editor (look for the "+ Add new module" button).

Find modules
Golden Rules
  • Never clone templates within Portal 53 — not just the SG ones; any template
  • Similarly, do not edit or clone any existing modules within Portal 53
  • Do not use inline styling within modules to adjust things like colors, font sizes, or background colors — help us to stay on brand!
  • Do not add any custom scripts to your pages as these generally slow things down — speak to the Web Team first!
  • Name your page using these handy naming conventions to stay organized! 

Creating your first page

To properly get started within HubSpot, navigate into Content > Website Pages (or Landing Pages) and select the option to create a new page. Locate an approved Style Guide template — we always recommend 1-Column Flexible [SG] — then provide a name for your page and you're in!

See the GIF below on how to complete the above actions, and also on how to select your first Style Guide module.

Note: The below GIF is slightly outdated. Consult the Modules page for an up-to-date list of approved module choices.

sg-defaults_hq-large.png

Templates

The Web Style Guide has a variety of approved page templates — some with navigation, some without, and some with other tricks up their sleeve. Whatever you need, we got you covered.

  1. sg-defaults_garden.png

    1-Column Flexible [SG]

    This is the Style Guide "gold standard" template option, and is often going to be your go-to choice. This template incorporates the global HubSpot navigation, and is a great option for most Website Pages you create in HubSpot. To use, search for 1-Column Flexible [SG] when creating a new page.

    View our guidelines
  2. sg-defaults_doge.png

    1-Column Flexible [SG] (LP)

    This is the Landing Pages alternative to the template above. The main difference is that this template omits the global HubSpot navigation, allowing you to take full advantage of the page's coveted "above the fold" real estate. To use, search for 1-Column Flexible [SG] (LP) when creating a new page.

  3. 1-Column Flexible [SG] (TYP)

    This is an alternative to the Landing Pages template, intended for use on offer thank you pages. This template incorporates a simplified navigation bar in place of the global HubSpot navigation. To use, search for 1-Column Flexible [SG] (TYP) when creating a new page.

  4. 1-Column Filterable Content [SG]

    This variation on the main Style Guide template introduces a new Filterable Items content container. This template is perfect for pages that require filtering functionality, such as a "tools library" page. To use, search for 1-Column Filterable Content [SG] (TYP) when creating a new page.

    Learn more
Ready to build a page with the Web Style Guide?