How to Choose and Apply Your Brand Colours and Fonts in HubSpot

Colours and fonts are the building blocks of your brand’s visual identity. They do more than just make your website look pretty; they communicate your personality, create a mood, and build brand recognition. When a visitor lands on your site, your colours and fonts are the first things that tell them they’re in the right place.

The problem is, if you stick with the default settings in your HubSpot template, you’re not using your brand’s voice—you’re using the template’s. This can make your website feel anonymous and fail to build the trust you need to convert visitors into customers.

Whether you're a marketing manager aiming for a polished look (hello, Functional Frank) or a consultant setting up clients for success (we see you, SMB Sophie), mastering these two elements is crucial. This guide will show you how to choose a professional palette and font pairing, and how to apply them across your HubSpot site in just a few clicks.

Choosing Your Brand Colours with a Simple Rule

You don’t need to be a designer to create a balanced colour scheme. The easiest way to get started is by following the classic 60-30-10 rule.

• Your Primary Colour (60%): This is the most dominant colour in your brand identity and the one you want to be most associated with. Think of Struto's Navy Blue. It’s used for the most important elements, like headers, footers, and key visual sections.
• Your Secondary Colour (30%): This colour should complement your primary colour. It’s used to create contrast and break up the visual space. It’s perfect for subheadings, secondary buttons, and highlighting testimonials.
• Your Accent Colour (10%): This is your "call-to-action" colour. It should be the brightest and most eye-catching colour in your palette, used sparingly to draw attention to the most important actions, like “Book a Demo” buttons or important links.
  
  

You’ll also need a Neutral Colour (like a light grey, off-white, or beige) for background sections to add depth.

Don't have a palette yet? No problem. Use free tools like Coolors or Canva’s Palette Generator to create a professional-looking scheme in minutes. Once you have your colours, make sure you have their hex codes (the six-digit code starting with a #, like #00A3E0).

Applying Your Colours in HubSpot

Once you have your hex codes, applying them across your entire website is incredibly simple. HubSpot’s theme settings act as a central control panel.

1. Navigate to Theme Settings: From your website or landing page editor, find the “Theme” tab in the left-hand sidebar. Click the “Edit theme settings” button.
2. Find the Global Colours Section: Inside the theme editor, you’ll see a section labelled “Colours.”
3. Enter Your Hex Codes: Your theme will have fields for “Primary,” “Secondary,” and “Accent” colours. Copy and paste your hex codes into the corresponding fields.
   
   

That’s it! By setting your colours here, HubSpot will automatically update every button, link, and pre-styled module across your entire website. This is the secret to maintaining perfect consistency without having to edit every single page manually.

Choosing Your Brand Fonts for Personality and Readability

Just like colours, your fonts communicate a message. Are you modern and clean? Traditional and trustworthy? Bold and innovative? A simple font pairing is all you need to convey this.

The best practice is to use a two-font system:

1. A Heading Font: This font is for your main titles (H1, H2, etc.). It can have more personality and should capture the feel of your brand.
2. A Body Font: This font is for your paragraphs and longer text. Its number one job is to be clean, simple, and easy to read. A sans-serif font is usually the best choice.

Pro Tip: Avoid using more than two or three fonts. Sticking to a consistent pairing makes your site look intentional and professionally designed.

No-Fail Font Pairings (from Google Fonts, available in HubSpot):

• Modern & Versatile: Montserrat (Headings) + Lato (Body)
• Friendly & Bold: Poppins (Headings) + Open Sans (Body)
• Classic & Elegant: Playfair Display (Headings) + Roboto (Body)

Applying Your Fonts in HubSpot

This process is just as easy as applying your colours and is found in the same place.

1. Navigate to Theme Settings: If you’re not already there, go to Theme > Edit theme settings.
2. Find the Typography Section: In the theme editor, click on “Typography.”
3. Select Your Fonts: You will see dropdown menus for “Headings” and “Body.” Select the fonts you chose for each. The changes will be previewed live.
4. Check Your Sizes: While you're here, check the default font sizes. A good starting point is 16px-18px for body text and a line height of 1.5 to ensure readability.

Consistency is the Key to Credibility

By taking a few minutes to set up your brand colours and fonts in your HubSpot theme settings, you do more than just make your site look good. You create a consistent, trustworthy, and memorable brand experience for every visitor.

It’s the fastest and most effective way to move beyond a generic template and build a website that looks and feels uniquely yours.

For a complete walkthrough on transforming your template, read our full guide: A Practical Guide to Branding and Customising Your HubSpot Starter Website.