Brand colours and fonts are your website’s core design tokens: the reusable rules that signal identity, set the mood and make your content feel consistently “you”. When these tokens are encoded in your HubSpot theme rather than left to page‑by‑page choices, every button, heading and paragraph reinforces recognition, improves readability and supports conversion. Clear hierarchy and consistent styling also help people scan and act faster, which is how most users read online content (Nielsen Norman Group).
You should define a minimal, deliberate palette so your pages feel coherent and your calls‑to‑action stand out. A practical approach is the 60‑30‑10 rule: one primary colour used most of the time for large areas and key elements, one complementary secondary colour to create contrast and structure, and one high‑salience accent reserved for about a tenth of your interface to draw attention to important actions. Pair these with a small set of neutrals for backgrounds and text so content remains clear. A constrained palette prevents visual noise and protects the distinctiveness of your primary action.
You ensure accessible contrast by testing colour combinations against recognised thresholds and by defining accessible variants in your theme where needed. WCAG 2.1 recommends at least a 4.5:1 contrast ratio for normal text and 3:1 for large text, including text inside buttons and links; meeting or exceeding these ratios protects legibility for most users. For CTAs, ensure there is sufficient contrast between the button label and its background and between the button and the section behind it so actions cannot be missed. If your brand colour fails contrast on the web, create “on‑web” tokens such as a darker accessible primary or accent that preserve your brand while meeting the standard.
You should select one typeface for headings to express personality and one for body copy to maximise legibility, then set sizes and spacing that make scanning effortless. For most sites, a clean sans‑serif body font at 16–18 px with a line height around 1.5 is a comfortable baseline, and limiting line length to roughly 45–75 characters helps readers maintain their place (Baymard Institute). Your heading font can carry more character, but it still needs good weight contrast and clear forms so hierarchy is obvious. Consistency in pairing and scale creates a trustworthy, professional feel without distracting flourishes.
You should keep to two families and two to three weights overall, for example regular and bold for body plus a single weight for headings, to avoid bloated downloads and rendering delays. Extra weights and variants rarely add meaningful value but do slow pages and introduce inconsistency. If you self‑host fonts, use font‑display: swap so text remains readable while web fonts load, and preconnect to your font host if you load from a CDN. A disciplined approach keeps the focus on your message and improves perceived speed on mobile.
You apply tokens centrally so modules inherit them automatically. In HubSpot, open Theme > Edit theme settings and set your primary, secondary, accent and neutral colours in the Colours panel, then set your heading and body fonts in Typography along with base sizes and line height. Because these settings cascade across templates and modules, your buttons, links, headings and paragraphs update everywhere without page‑level overrides. This is the fastest way to move beyond a generic template and ensure your brand feels consistent across every page and device.
You will measure improvement by tracking readability, behaviour and conversion before and after the change. Readability is reflected in contrast pass rates, line length and font metrics hitting your targets; behaviour improves when scroll depth rises, time on key sections stabilises and CTA click‑through increases; conversion lifts appear in form starts and completions and meetings or demos booked from pages you restyled. You should also watch Core Web Vitals: Largest Contentful Paint, Cumulative Layout Shift and Interaction to Next Paint. Faster, more stable pages tend to retain more visitors, and research shared by Think with Google shows bounce probability rises by 32 per cent when mobile load time increases from one to three seconds, so lean, well‑rendered type and restrained colour help performance as well as aesthetics.
You should avoid fighting your theme with page‑level CSS overrides, relying on colour alone to convey meaning, using low‑contrast text over images and loading excessive font weights. Overrides break consistency and are hard to maintain; colour‑only signals exclude colour‑blind users; text over imagery needs either strong overlays or a dedicated text background to maintain contrast; too many weights hurt performance and create visual clutter. Keeping all rules in theme settings and modules prevents drift and makes global improvements trivial.
Struto helps by implementing your colours and typography as design tokens in a governed HubSpot theme and by providing component libraries that enforce those rules at authoring time. The strutoCX Starter Pack gives you a professional baseline that feels cohesive from day one, while the strutoCX Pro Pack adds a richer set of accessible, on‑brand modules that marketers can compose without code. Through a Guided Deployment, we confirm objectives, encode tokens, align modules, and instrument measurement so you can see the lift in engagement and conversion—then iterate with confidence.
A minimal palette works best: one primary, one secondary, one accent and a small set of neutrals. Following the 60‑30‑10 guideline keeps pages coherent and preserves the salience of your primary call‑to‑action.
Aim for at least 4.5:1 for normal text and 3:1 for large text, including button labels, and ensure sufficient contrast between buttons and their backgrounds. Meeting or exceeding WCAG 2.1 thresholds protects legibility for most users.
Two families—one for headings and one for body—with two to three weights total is a good balance between expression and performance. Additional weights increase page weight and often add inconsistency rather than clarity.
Yes. Select only the weights you will actually use, prefer system font fallbacks where acceptable, and consider self‑hosting or preconnecting to the font CDN. Keep font‑display: swap to avoid invisible text during load.
Create accessible on‑web variants in your theme—such as a darker primary or a high‑contrast accent—while keeping your print palette unchanged. Many brands maintain an “accessible accent” specifically for CTAs and critical text.
In HubSpot, go to Theme > Edit theme settings and use Colours and Typography. Changes there cascade globally to modules, CTAs and templates, which eliminates page‑by‑page styling and keeps your brand consistent.
Keep line length around 45–75 characters for body text. This range improves reading flow and helps users maintain their place, especially on content‑heavy pages.
Contrast and clarity usually matter more than hue. Ensure the primary action is visually distinct from surrounding elements and test labels and placement once your baseline styling meets accessibility.
Nielsen Norman Group, How Users Read on the Web: https://www.nngroup.com/articles/how-users-read-on-the-web/
W3C, WCAG 2.1 contrast minimums: https://www.w3.org/TR/WCAG21/#contrast-minimum
Baymard Institute, Line Length Readability: https://baymard.com/blog/line-length-readability
Think with Google, Mobile Page Speed Benchmarks: https://www.thinkwithgoogle.com/marketing-strategies/app-and-mobile/mobile-page-speed-new-industry-benchmarks
HubSpot developers, Themes and Brand Settings overview: https://developers.hubspot.com/docs/cms/building-blocks/themes
HubSpot packaging evolves. Verify the current availability of theme settings, brand kit, smart content, A/B testing and related features for your specific tier in HubSpot’s official documentation before publishing commitments.
If you want a fast upgrade, define your tokens—primary, secondary, accent and neutrals plus heading/body fonts—and set them in your theme today so every module inherits your brand. If you would like expert support, request a short review to validate contrast and hierarchy, or start a Guided Deployment to encode tokens, align modules and measure the lift in engagement and conversions across your HubSpot site.