Theme settings
The seven groups of settings that drive colours, fonts, buttons, forms, header, footer and spacing across the whole site.
Updated August 23, 2026 · 4 min read · Applies from version 1.0.0
Open Settings → Content → Themes → Mistral Pro → Edit theme settings, or click the paintbrush icon in any page editor. Every value you set here becomes a CSS variable consumed by every template and module: change it once, the whole site follows.
1. Colors
| Setting | What it drives |
|---|---|
| Primary color | The accent used by primary buttons, links, active menu items, eyebrows and highlights. Inherits your brand kit's primary colour until you change it. |
| Secondary color | The near-black used by secondary buttons and the darkest sections. |
| Accent shades | Primary hover, primary pressed, a soft tint (washes and icon tiles), a lighter variant for dark backgrounds, and an ambient tint. |
| Text colors | Headings, body text, secondary text, the muted continuation of two-tone headings, uppercase labels and placeholders, and text on dark backgrounds. |
| Surfaces and borders | Page background, subtle panel background, image placeholder background, two dark panel backgrounds, the hairline border and the secondary divider. |
| Status colors | Success and error, used by form messages. |
2. Typography
- Body font and Heading font — the two fonts the whole theme uses. Google Fonts are supported through HubSpot's font picker; the demo uses Onest.
- Headings (h1–h6) — size, colour and weight per level. Each level inherits the heading font and the headings colour unless you override it.
- Display sizes — the two oversized sizes used by heroes and large headings (88 px and 60 px by default), the key figure size (64 px) and the mobile scale applied to large headings (70 %).
- Links — link colour, hover colour, and whether links are underlined Always (default), On hover only or Never.
3. Buttons
- Button font, corner radius (999 = pill, the default), lift on hover, and an optional shadow under the secondary button.
- Five variants, each with its own colours: Primary (accent pill, the main call to action), Secondary (dark pill), Outline (with its border width), Ghost, and Inverted for dark backgrounds.
Every button in the theme — in modules, in the header, in forms — uses one of these five variants. See the button standard in Building pages.
4. Forms
Applies to every embedded HubSpot form, whether built with the classic or the new forms editor:
- Form background, border, corner radius and font of the form card.
- Labels and help text — label colour, help text colour, required marker colour.
- Fields — background, border and border width, corner radius, text, placeholder, focus ring, error colour.
- Submit button — colours, hover colours, and Full width submit button (on by default).
5. Header
- Logo (inherits your brand kit) and an optional logo on dark backgrounds, used when the header is transparent over a dark hero.
- Logo height (28 px) and header height (76 px).
- Background, frosted glass blur (on), bottom border.
- Menu font, menu text colour, hover/active colour, active item underline colour.
- Sticky header (on) and Transparent over dark hero sections (on).
- Top bar — show or hide, background and text colour. Its content (contact details, secondary links, language switcher) is edited in the header module itself. See Navigation and menus.
6. Footer
Footer logo and height, background, font, text / column heading / link hover / divider colours, social button colours, and the oversized wordmark (off by default) with its colour.
7. Layout and spacing
| Setting | Default |
|---|---|
| Content width / wide content width | 1240 px / 1400 px |
| Side gutter | Normal (Compact, Normal, Wide) |
| Default vertical spacing between sections | Medium (Small, Medium, Large) — each module can override it in its Spacing style group |
| Corner radius | Five steps: small (tags), medium (fields, icon tiles, avatars), large (cards), extra large (media), section shells |
| Card and media shadows | Off — the theme is flat by design; turn them on here to enable shadows on cards and media everywhere |
| Motion and animations | On — one switch that turns every animation in the theme off (counters, marquee, orbits, scroll reveal, auto-rotating highlights). The browser's reduced-motion preference is always respected, whatever this setting. |
How inheritance works
Module colours and fonts inherit from these settings. When you change a colour on a module's Style tab, you override the theme value for that module only; the rest of the site keeps following the theme settings. To go back to the inherited value, reset the field in the module.