Theme Settings
A high-level tour of the 9 groups in the blox Theme Settings panel. Settings here apply site-wide and cascade into every module on every page. For the procedural walkthrough on how to configure your brand, see Add Your Brand Style.
/// Start Here: Colors, Fonts
The four foundation choices that cascade into every other group: your primary (pop) color, secondary accent color, default heading font, and default body font. Set these first - everything downstream inherits them unless you override at a specific level.
/// Typography
Granular control over every text element on the site. Has its own sub-group for global typography (the base font size and line height that the rem scale uses), header navigation, footer navigation, each heading level (H1 through H6), paragraphs, lists, and blockquotes. Each sub-group lets you override font family, size, weight, line height, letter spacing, color, and spacing for that element. Anything left at default inherits from the Start Here group.
/// Call To Actions
Six fully independent CTA tiers (Primary, Secondary, Tertiary, Four, Five, Six). Modules across the theme reference these tiers by number, so changing CTA Primary here updates every "Primary" button across every page. Each tier has its own background, text color, border, padding, radius, font, hover state, and optional shadow. Tier names are positional, not semantic - use the six slots however your brand needs (solid, outline, ghost, gradient, etc.).
/// Forms
Styling for HubSpot form fields rendered inside blox modules. Covers the submit button (plus an alt version for contrast on dark backgrounds), input fields, labels, checkboxes/radios, help text, GDPR consent blocks, error messages, and vertical spacing inside forms. Settings apply to every HubSpot form on the site unless overridden by the form itself.
/// Layout
Two site-wide content width caps that every module respects: Standard Content Width (default max-width for "Standard" sections, typically 1200-1400px) and Slim Content Width (the narrower max-width for "Slim" sections, typically 800-960px - good for long-form content and single-column blog posts).
/// Badge
Badges are the small pill labels that appear above section headings in many modules. Theme settings control the shared sizing (bottom spacing, border radius, padding, font size, weight, letter spacing) plus six color variants (Primary, Secondary, Three, Four, Five, Six) that modules let editors pick from per section. Coordinate badge tier numbers with the CTA tier numbers for consistent visual rhythm across the page.
/// Performance
A single Reduce Motion toggle that disables every scroll-driven animation in the theme (fade-ins, marquees, text reveals, count-ups) site-wide. Useful for accessibility-first sites, low-power devices, or static performance-tuned builds.
/// Blog Settings
Blog-post-specific layout and typography overrides for the post page: max content width, post title styling, meta info styling, featured image treatment, related-posts grid layout, and author byline. Lets you give your blog its own visual identity without affecting other pages.
/// System Pages
Styling for HubSpot's required system pages: the password-protected page (background, heading copy, body copy, input styling, submit button) and the error pages (404 and 500 - shared background, heading typography, body copy, and back-to-home CTA).