Generator Onboarding

Setting Up Your HubSpot Brand Kit

Written by Dave Roma | May 8, 2026 8:32:51 PM

Accessing the Brand Kit

In HubSpot, navigate to Marketing → Brand. This opens your Brand Kit — HubSpot's centralized hub for storing creative assets used across the platform. For the Generator theme setup, focus on two sections: Logo and Colors.

Uploading Your Logo

Click into Logo, then select Edit to upload your file. Before uploading, make sure your logo meets these requirements:

File format: Use an SVG or PNG with a transparent background. This prevents issues when you change the header background color inside Generator — you won't need to edit the logo file itself.

Cropping: The image should be cropped tightly to the edges of the logo with no extra white space. If spacing is needed around the logo, add it using padding or margin in the CMS.

Alt text: Fill in the logo name and alt text. This supports both SEO and AEO (Answer Engine Optimization).

Link URL: Set the URL the logo links to when clicked — typically your homepage.

Setting Logo Width and Height

This is one of the most important steps. Set the width to the number of pixels you want the logo to display at on the site. The height will update automatically based on the aspect ratio.

For example: if your logo file is 360px wide but you want it to display at 180px, enter 180 as the width.

Why this matters for retina displays: Apple retina devices have twice the pixel density of standard screens. To keep logos sharp on these devices, create your logo file at 2× the display size. If the logo occupies 100px on screen, the actual file should be 200px wide. This applies to most images across your site, not just logos.

Adding Brand Colors

Click into Colors, select Edit, and add the hex codes for your brand colors. Once saved, these colors appear under Favorites whenever you use a color picker anywhere in HubSpot — in text editors, style settings, and more. This eliminates the need to remember or re-enter hex codes manually.

Additional Brand Kit Items

While this lesson focuses on logo and colors, also complete the following while you're here:

Favicon: Upload your site icon.

Custom fonts: If you're using fonts outside the Google Fonts library that ships with Generator, upload them here.