Scale Theme Documentation
Built for teams that outgrow default HubSpot themes. Designed for SaaS companies and service businesses focused on GTM and revenue.
Introduction
Scale is a modern, conversion-focused HubSpot CMS theme built for serious SaaS and services teams. Unlike generic themes, Scale comes with opinionated defaults, production-ready templates, and layouts specifically designed for go-to-market success. It includes everything you need to launch and convert:
- 10+ ready-to-use page templates
- 20+ customizable modules
- Full Theme Editor controls
- Responsive design for all devices
- Accessible and SEO-friendly markup
This theme works with all HubSpot CMS plans including CMS Free, Starter, Professional, and Enterprise.
When to Upgrade to Scale Pro
Scale Free is fully functional and great for getting started. Consider upgrading to Scale Pro when:
- You need pricing toggle (monthly/annual) + comparison tables
- You need mega menu / advanced header behavior (sticky/transparent)
- You want integrations pages + categorized libraries
- You want case studies + advanced blog experience (table of contents, enhanced related posts)
- You want 25+ premium sections, 10+ premium templates + priority support
🚀 Get Scale Pro
Ready to upgrade? Visit scale.vestalhub.com
👀 View Pro Demo
See Pro in action at scale-pro-demo.vestalhub.com
How Upgrades Work
Upgrading to Scale Pro is straightforward. Both themes share the same design system, so you won't need to rebuild from scratch.
Migration Steps
- Install Scale Pro — Add the Pro theme to your HubSpot account from the Marketplace
- Create new pages from Pro templates — Use templates like SaaS Home Pro, Pricing Pro, etc.
- Rebuild quickly using Pro section presets — Or copy sections from existing pages where applicable
- Update header/footer options in Theme Settings — Configure mega menu and advanced header features
Most upgrades take 30–90 minutes depending on site size. Pro uses the same design system, so your brand styling carries over.
Installation
After purchasing the Scale theme from the HubSpot Marketplace:
- Go to Settings → Website → Themes in your HubSpot account
- Find "Scale - GTM, SaaS & Services" in your installed themes
- Click Actions → Set as active theme
- Start creating pages using the theme's templates
Quick Start
Get your website up and running in minutes:
1. Create Your Homepage
Go to Marketing → Website → Website Pages and create a new page using the "Home" template. This template includes a hero section, services grid, testimonials, FAQ, and CTA sections.
2. Set Up Navigation
Go to Settings → Website → Navigation to create your main menu. The header will automatically display your navigation.
3. Customize Theme Settings
Access the Theme Editor by going to Settings → Website → Themes, then click "Edit theme settings" to customize colors, fonts, and layout options.
4. Add Your Logo
Edit any page and click on the header. Select the logo module and upload your company logo.
Theme Settings
Access theme settings through Settings → Website → Themes → Edit theme settings. Changes apply globally across all pages.
Brand Colors
Primary, secondary, background, text, and border colors.
Typography
Body font, heading font, base size, and heading scale.
Layout
Container width, section padding, grid gap, border radius, shadows.
Buttons & Forms
Button style, size, radius, hover effects, and form styling.
Colors & Branding
The theme uses CSS variables for consistent color application. Customize these in the Theme Editor:
| Setting | Default | Description |
|---|---|---|
| Primary Color | #0F172A |
Main dark color for cards and sections |
| Secondary Color | #64748B |
Secondary elements and accents |
| Background Color | #0B1221 |
Page background |
| Text Color | #FFFFFF |
Primary text and headings |
| Muted Text | #94A3B8 |
Secondary text and descriptions |
| Border Color | #334155 |
Borders and dividers |
Typography
The theme uses Google Fonts for typography:
- Heading Font: Plus Jakarta Sans (weights: 700, 800)
- Body Font: Inter (weights: 400, 500, 600)
Heading Scale Options
| Scale | H1 | H2 | H3 |
|---|---|---|---|
| Compact | 2.5rem | 2rem | 1.5rem |
| Standard | 3.5rem | 2.5rem | 1.75rem |
| Large | 4rem | 3rem | 2rem |
Layout Options
Container Width
- Narrow: 1000px - Best for text-heavy pages
- Standard: 1200px - Balanced for most layouts
- Wide: 1400px - Maximum content width
Section Padding
- Comfortable: 80px vertical padding
- Spacious: 100px vertical padding
- Extra: 120px vertical padding
Templates Overview
Scale includes 10+ professionally designed templates for all your website needs.
Page Templates
| Template | Description | Best For |
|---|---|---|
| Home | Full homepage with hero, services, testimonials, FAQ, and CTA | Main homepage |
| Landing Page | Conversion-focused with hero form, benefits, stats, and testimonials | Lead generation campaigns |
| Services | Showcase your offerings with detailed service cards | Services/Solutions pages |
| About | Company story, team, and values | About Us page |
| Pricing | Pricing table with feature comparison | Pricing page |
| Contact | Contact form with cards and FAQ | Contact page |
| Meeting Confirmed | Thank you page for meeting bookings | Post-conversion confirmation |
| Standard Page | Blank canvas with drag-and-drop | Custom pages |
Blog Templates
Blog Listing
Displays all blog posts in a responsive grid layout. Features include:
- Featured images with hover effects
- Topic tags
- Author and date metadata
- Pagination
Blog Post
Individual blog post template with:
- Featured image hero
- Author box
- Social sharing
- Related posts
- Comments section
System Templates
Scale includes all required system pages:
| Template | Description |
|---|---|
| 404 Error | Custom "Page Not Found" design with helpful navigation |
| 500 Error | Internal server error page |
| Search Results | Site search results display |
| Password Prompt | Password-protected pages prompt for authentication |
| Subscription Preferences | Email subscription management page for contacts |
| Subscription Confirmation | Confirmation page after updating email preferences |
These templates are automatically used by HubSpot for their respective functions. You can customize their styling in Theme Settings.
Modules Overview
The theme includes 20+ custom modules, all fully editable through the drag-and-drop editor.
Module Styling (Styles Tab)
All modules include a "Styles" tab with common styling options:
- Spacing: Margin and padding controls for all sides
- Background Color: Set a custom background with opacity
- Text Color: Override default text color
- Text Alignment: Left, center, or right alignment
- Border: Add borders with custom color, width, and radius
These options allow you to customize the look of each module instance without writing CSS.
Hero Modules
Hero
Standard hero section with headline, subheadline, CTA buttons, and optional image.
Hero with Form
Split-layout hero with content on the left and an embedded HubSpot form on the right. Perfect for lead generation landing pages.
Content Modules
| Module | Description |
|---|---|
| Services | Grid of service cards with icons, titles, descriptions, and feature lists |
| Feature Grid | Flexible grid for displaying features/benefits with icons |
| Stats Strip | Highlight key metrics and numbers |
| Testimonials | Customer testimonials with photos, quotes, and company info |
| FAQ | Accordion-style frequently asked questions |
| Logo Carousel | Display client/partner logos with animation and styling options |
| Client Carousel | Similar to Logo Carousel with infinite scroll animation |
| Icon List | Bulleted list with custom icons |
| Video Embed | Responsive video embedding |
Logo & Client Carousel
Display client logos, partner badges, or brand logos with flexible styling options.
Animation Options
- Enable Scrolling Animation: Turn on infinite horizontal scroll (marquee effect)
- Animation Speed: Duration in seconds (5-120s) - lower = faster
- Animation Direction: Left or right scroll direction
- Pause on Hover: Stop animation when user hovers
Static Grid Options
When animation is disabled, logos display in a responsive grid:
- Grid Gap: Space between logo items (0-75px)
- Grid Columns: Number of columns (1-6)
Logo Styling
- Logo Style: Grayscale, Original Colors, or White (for dark backgrounds)
- Logo Opacity: Control logo transparency (10-100%)
- Max Logo Height: Set maximum height for logos (20-150px)
- Background Color: Section background with opacity support
Testimonials Module
Display customer testimonials in an attractive grid layout.
Section Header
- Eyebrow Text: Small text above heading (e.g., "TESTIMONIALS")
- Section Heading: Main heading (e.g., "What Our Clients Say")
Testimonial Cards
Each testimonial includes:
- Quote: Customer testimonial text
- Author Name: Customer's name
- Author Title: Role or position
- Author Image: Photo or avatar
- Company Logo: Displayed in grayscale with optional opacity
- Funding Level: Optional badge (e.g., "Series A", "Seed")
- Funding Badge Color: Custom background color for the funding badge
Conversion Modules
CTA Section
Full-width call-to-action with headline, description, and button.
CTA Form
Two-column layout with content and embedded form.
Pricing Table
Pricing cards with:
- Plan name and price
- Feature list with checkmarks
- CTA button
- "Most Popular" badge option
Newsletter
Email signup section with heading, description, and form.
Contact Cards
Display contact methods (email, phone, address) in card format.
Header
The global header includes:
- Logo: Editable logo with link to homepage
- Navigation: HubSpot menu with dropdown support
- Language Switcher: Built-in multi-language support (shows when translations are available)
- CTA Button: Configurable call-to-action (simple link or HubSpot CTA)
- Mobile Menu: Responsive hamburger menu for mobile devices
Customizing the Header
- Edit any page and click on the header area
- Select individual modules (logo, menu, CTA) to customize
- Changes apply globally to all pages
Header Styling Options
The header module includes several styling options in the "Styles" tab:
- Background Color: Change the header background color with opacity support
- Link Color: Customize the navigation link color
- CTA Background Color: Set a custom CTA button background
- CTA Text Color: Set a custom CTA button text color
- Hide CTA Button: Option to hide the call-to-action button entirely
- Reset to Default: Toggle to restore all header styles to theme defaults
Enable sticky header in Theme Settings → Header → Sticky Header to keep the header visible while scrolling.
Multi-Language Support
The header includes a built-in language switcher that automatically appears when your site has multiple language versions configured. To set up multi-language:
- Go to Settings → Website → Languages
- Add additional languages for your site
- Create translated versions of your pages
- The language switcher will automatically appear in the header
Scale Pro adds mega menu + advanced sticky/transparent header options. Learn more about Scale Pro
Frequently Asked Questions
How do I change the theme colors?
Go to Settings → Website → Themes → Edit theme settings and navigate to the "Brand Colors" section.
Can I use custom fonts?
Yes! In Theme Settings, you can select from any Google Font for headings and body text.
How do I add a new page?
Go to Marketing → Website → Website Pages → Create, select a template from the Scale theme, and start editing.
Why isn't my navigation showing?
Make sure you've created a menu in Settings → Website → Navigation and selected it in the header's menu module.
How do I make the header sticky?
Enable this in Theme Settings → Header → Sticky Header.
Can I use this theme with HubSpot Free?
Yes! The theme is compatible with all HubSpot CMS tiers, including CMS Free. Note that some features like site search require paid CMS plans.
Get Help
Need assistance with the Scale theme?
📧 Email Support
Contact us at support@vestalhub.com
📚 HubSpot Resources
Visit HubSpot CMS Docs for platform help
Please include your HubSpot portal ID, the page URL where you're experiencing issues, and screenshots if applicable.