Serenity Pro Theme - Documentation

To get started customizing Serenity Pro, follow these steps:

1. In your HubSpot account, click the Settings icon in the main navigation bar.
2. In the left sidebar menu, navigate to Content → Themes & Modules → Themes.
3. Hover over Serenity Pro and click "Edit theme".
4. The Global Theme Settings panel will open on the right side of the screen.

The theme global settings are organized into 8 groups:

The Fitmax theme settings are broken down into seven main groups to make customizing your site a breeze:

• Brand Colors: Set the primary and secondary colors that define your brand identity. These selections will act as the default palette across your site.
  
  
• Background Colors: Establish the default background colors used for various sections and page wrappers to ensure a cohesive look.
  
  
• Typography: Complete control over your text. Here you can set specific font overrides for headings and body copy, including font families, colors, responsive sizes, and line heights.
  
  
• Buttons: Complete settings for your calls-to-action. Customize your button colors, fonts, border radiuses, and hover-state styling.
  
  
• Badge: The global badge settings allow you to apply universal styles (like fonts, colors, background, spacing, and radius) across your entire website without needing to touch CSS styles for per module.
  
  
• General view: Key surface settings and default visual behaviors that dictate the overall layout and structural appearance of your website.
  
  
• Spacing: Global controls for the default margins and padding used across your website's sections and containers to maintain consistent breathing room.
  
  
• Forms: Global color and styling settings for all form inputs, labels, and submit buttons.

Primary Font — Fraunces:
Used for titles, headings, and display text. A contemporary serif with a calming character that fits the wellness brand. Here you can control your theme's primary font family, style, and size.

Secondary Font — Figtree:
Used for body text, paragraphs, and UI labels. Clean, modern, and highly readable at all sizes.

Both fonts load from Google Fonts. You can swap either for any Google Font or upload a custom font.

In Colors you will find four text color options that cover both light and dark contexts:

• Dark Primary — main body and heading text on light backgrounds
• Dark Secondary — secondary or muted text
• Dark Tertiary — captions or hint text
• Light — text on dark or colored backgrounds

In the Headings section you can set different options for each heading level (H1–H6). For each level, independently control size, weight, line height, and letter spacing — with separate tabs for Desktop and Mobile.

We used our Secondary Font (Figtree) as the body text of the theme. You can also control the default body text size directly from this option.

You can adjust the background color of your theme forms here. Full opacity control is available so you can set a solid or semi-transparent form background.

Customize your form fields in Serenity Pro. Adjust the field font, background color, border style, and focus state from this section.

You can specifically customize the form labels — control label font size, weight, and color independently from field text.