Configure your colors, fonts, CTAs, and form styling once at the theme level and every blox module on every page inherits those choices. This guide walks through setting up your brand styles in HubSpot Theme Settings using the Style Guide template as a live preview.
You should already have a child theme created. All brand style edits live on the child theme so they survive blox parent theme updates. If you have not cloned the child theme yet, do that first.
Have your brand assets ready: logo files (preferably SVG), primary and secondary brand colors as hex codes, and the names of your brand fonts (Google Fonts work natively; custom-hosted fonts need to be uploaded to HubSpot first).
Open the page editor and create a fresh website page. In the theme selector, pick your blox x [Company Name] child theme - NOT the parent blox theme. Editing theme settings while a parent-theme page is open will fight the inheritance you set up.
2. Select the Style Guide template
Templateblox → Style Guide
From the template picker, choose the Style Guide template. It is a helper template that renders every typography level, button tier, badge variant, form element, and color swatch on a single page. Use it as a live preview - any theme settings change you save shows up immediately on this page.
3. Open Theme Settings
Editor menuDesign → Theme Settings
With the Style Guide page open in the editor, click Design in the top toolbar and select Theme Settings. The theme settings panel opens on the left with nine groups, starting with "Start Here: Colors, Fonts" at the top.
4. Configure the "Start Here" group first
Theme groupPrimary color, Secondary color, Heading font, Body font
The Start Here group has four fields that drive defaults across every other group:
Primary (Pop!) Color - your most visible brand accent. Cascades into the default Primary CTA, default badge color, link color, and form focus state.
Secondary Accent Color - the second brand color. Used by the Secondary CTA and a few accent elements.
Default Heading Font - applied to H1-H6 unless you override individual levels.
Default Body Font - applied to paragraph, lists, blockquotes, and form inputs unless overridden.
Set these four and your Style Guide preview will already look 80% like your brand. The remaining groups are for fine-tuning.
5. Fine-tune individual groups as needed
Theme groups
Walk down the remaining groups in the Theme Settings panel. For each, only adjust what your brand requires - blox's defaults are sensible for most projects:
Typography - override individual heading sizes, line heights, letter spacing, and weights per level (H1 through H6, plus paragraph, lists, blockquote, and nav typography).
Call To Actions - configure six CTA tiers (Primary, Secondary, Tertiary, Four, Five, Six). Each has its own bg color, text color, border, hover state, padding, radius, and font choice.
Forms - submit button, input fields, labels, checkboxes, GDPR text, error messages, and spacing.
Layout - set the Standard and Slim content widths in pixels for the whole site.
Badge - shared badge sizing plus six color variants to match your CTA tiers.
Performance - the Reduce Motion toggle disables scroll-driven animations site-wide.
Blog Settings - post-page-specific typography and layout overrides.
System Pages - styling for the password-protected and 404/500 pages.
Click Publish in the Theme Settings panel. Your changes save to the child theme and every page using that child theme immediately picks up the new styles. The Style Guide preview page now doubles as your living brand reference - share it with copywriters, designers, and stakeholders.
What to set first
If you want a fast-path to a branded site, the minimum viable setup is:
Primary color + Secondary color
Default Heading font + Default Body font
CTA Primary background + text color + border radius
Standard Content Width (most brands run 1200-1400px)
Everything else can stay default until a design choice forces a change.
Tips for staying consistent
Use the Style Guide page in production. Keep it published at a hidden URL so designers can see live brand state any time.
Override sparingly. A heading color set at the H2 level overrides the global heading color for every H2 site-wide. Only override individual levels when you have a deliberate reason.
Coordinate badge and CTA tiers. Badge One should visually pair with CTA Primary, Badge Two with CTA Secondary, etc. The numeric tiers are meant to map across categories.
Stage changes off-hours. Theme Settings updates are instant. If you have a high-traffic site, publish settings changes during low-traffic windows.