Theme Documentation

Before creating pages, prepare the basic site assets and HubSpot settings the theme will use.

• Logo, favicon, brand colors, product screenshots, customer logos, testimonials, pricing details, and form copy.
• A HubSpot menu for the primary navigation and any footer menus.
• HubSpot forms for demo requests, contact, newsletter signup, content downloads, or other conversion points.
• A connected domain and publish workflow if the site will go live.
• Permission to edit pages, theme settings, and global content.

1. Create a new website page or landing page in HubSpot.
2. Choose the Editorial GTM theme.
3. Select the page template closest to the page you need.
4. Replace demo content in each module.
5. Use the Style tab to adjust surfaces, layout, media position, spacing, and section behavior.
6. Preview desktop and mobile before publishing.

Existing page note: If a page was created before a theme default was updated, HubSpot may keep the older module values on that page. Edit the module manually or insert a fresh section if you need the newest defaults.

Most theme work falls into four editing areas.

• Page editor: page copy, images, links, forms, CTAs, section order, module content, repeatable items, anchor IDs, and module Style tab settings.
• Theme settings: global colors, surface palette, typography settings exposed by the theme, and broad visual defaults.
• Global content: shared header, footer, logo, menus, search, language switcher, newsletter area, legal links, and social links.
• Design Manager or code: new module fields, new templates, CSS token changes, custom default behavior, font-loading changes, or theme asset cleanup.

Global colors define the theme's main brand and action colors.

• Primary is used for links, small labels, and some accent logic.
• Accent is the main primary CTA background.
• Accent hover is the CTA hover background.
• Accent ink is the fallback text color used with accent buttons and accent details.

CTA contrast: Choose an Accent and Accent ink pair with strong contrast. If button text is hard to read, check these colors before editing module code.

Surfaces are the theme's section background system. In a section module, choose the front-end surface name in the Style tab under Surface mode: Canvas, Paper, Blush, Glow, or Ink. To change the actual colors behind those names, open Theme settings and edit Surface palette.

The surface names stay the same in the page editor, but their visual appearance follows the customer's own brand settings. This lets a team keep a consistent editing language while replacing the default palette with their own colors.

• Canvas reads from Surface palette > Canvas background, Canvas/Paper/Blush/Glow heading text, and Canvas/Paper/Blush/Glow body text.
• Paper reads from Surface palette > Paper background, Canvas/Paper/Blush/Glow heading text, and Canvas/Paper/Blush/Glow body text.
• Blush reads from Surface palette > Blush background for its panel/card color system, uses Canvas background as the outer section fill, and uses Canvas/Paper/Blush/Glow heading text and Canvas/Paper/Blush/Glow body text.
• Glow is generated from Global colors > Primary mixed with Surface palette > Canvas background, and uses Canvas/Paper/Blush/Glow heading text and Canvas/Paper/Blush/Glow body text.
• Ink reads from Surface palette > Ink background, Ink heading text, and Ink body text.
• Primary, Accent, Accent hover, and Accent ink are separate Global color tokens used for links, labels, CTA backgrounds, hover states, and accent details.

Surface contrast: Think of these as role-based text tokens, not fixed color instructions. If your brand makes Canvas, Paper, Blush, or Glow darker than the default theme, choose Canvas/Paper/Blush/Glow text colors that remain readable on those surfaces. If your brand makes Ink lighter than the default theme, choose Ink text colors that remain readable on the Ink background. Always preview every surface after changing the palette.

Theme settings include Global fonts and Text settings. These fields define the portal-level font choices exposed by the theme settings panel, and some HubSpot text controls inherit from them.

The Editorial GTM section system also uses theme CSS typography tokens, including the display font token and body font token used across module CSS. In the current live styling bundle, those core CSS tokens are part of the theme code. This means a full site-wide replacement of the editorial display/body font system may require a code-level update, even though individual modules may still expose font controls in their Style tabs.

Many modules expose font and spacing controls in the Style tab for specific fields such as headings, lead text, point titles, quotes, and notes. Use those controls for module-level adjustments. If a rich text color, size, or font change does not appear on the page, the module is likely using its designed typography rule; use the Style tab or theme settings where available instead of relying on inline rich text formatting.

CTA Button can be edited in the page editor. The Content tab controls whether the button is shown, the button text, and the link. The Style tab controls text font, background, border, corner radius, spacing, and alignment for that specific button.

By default, primary CTA background uses Accent, hover uses Accent hover, and text uses a surface-aware token that can fall back to Accent ink. Secondary buttons use surface-aware styling so they adapt between light and dark sections.

• Site Logo controls the logo image, alt text, logo link, and accessibility label.
• Navigation Menu controls the selected HubSpot menu, navigation label, max levels, dropdown text color, dropdown background, and dropdown border.
• Header CTA uses CTA Button. Update text and link, and keep the label short enough for mobile.
• Header Search is enabled by default. It has Show search, Search placeholder, and Search results path settings. If your site does not need search, turn Show search off. If it stays on, confirm the search results page exists.
• Header Language Switcher is enabled by default, but it only appears to visitors when the current HubSpot page has translated language variants. Turning the module on does not create translated pages.
• The language switcher includes Display mode: localized language name, page language code, or language code plus localized name.
• Show when no language variants exist is off by default. Turn it on only if editors need an editor-only note showing that a page has no variants.

• Footer logo uses Site Logo.
• Footer summary, menu titles, legal copy, newsletter copy, and social label are rich text areas.
• Footer menus use Navigation Menu with max levels usually set to 1.
• Newsletter Signup defaults to inline layout, email-only mode, and hidden labels. This keeps footer signup compact while keeping labels available to screen readers.
• If your newsletter form needs first name, company, or other visible fields, turn off Show email field only and review the mobile layout.
• Social follow controls social accounts, custom icons, social links, accessibility titles, fill color, size, background, radius, spacing, and alignment.

• Home combines Controlled Hero, text split, card grid, metric cards, spotlight, pricing, media splits, FAQ, and final CTA. It is suited to a full SaaS homepage story.
• Product combines Text Hero, text split, media split with CTA, logo wall, gallery mosaic, quotes, metrics, and content grid. It is suited to product explanation, proof, screenshots, and resource paths.
• Service combines Controlled Hero, text split, spotlight, card grid, gallery mosaic, metrics, quotes, FAQ, and form panel. It is suited to implementation, consulting, solution, or partner pages.
• Pricing combines Pricing, Comparison Table, and FAQ List. It is suited to plan comparison, commercial explanation, and buying questions.

• Landing Page pairs Text Hero with Form Panel for a focused offer or conversion path.
• Campaign Landing Page combines proof, cards, text splits, logo wall, metrics, and CTA sections for campaign-specific pages.
• About combines Text Hero, no-CTA media split, card grid, and CTA for company narrative.
• Contact uses Contact Intro Panel and Contact Form for direct inquiries.
• FAQ uses FAQ Page and final CTA for question-led content.
• Theme Documentation uses Text Hero and Documentation Page for long-form guide content with navigation.

The theme also includes blog listing, blog post, and HubSpot system templates. Review system pages before launch so error, search, password, subscription, membership, and preference pages feel consistent with the rest of the site.

Controlled Hero is the main marketing hero. Content controls include content position, eyebrow, heading, lead, primary and secondary CTA, supporting note, background image, or video embed. Style controls include surface mode, image treatment, typography spacing, button gap, and button minimum width.

Text Hero is a simpler editorial hero. Content controls include eyebrow, heading, lead, primary and secondary CTA, links, and arrow icons. Style controls include surface mode, text alignment, density, lead width, background pattern, and text spacing.

Heading-only behavior: If Text Hero has only the Heading field filled and eyebrow, lead, primary CTA, and secondary CTA are empty, the theme automatically uses a shorter hero and vertically centers the H1.

Text Split 1+1 and Text Split 1+2 are for structured explanations without media. Content controls include heading, intro where available, repeatable points, icons where available, point titles, and body copy. Style controls include surface mode, content vertical alignment, minimum height, column gap, font, and spacing controls.

Media Split - CTA and Media Split - No CTA pair text with image or video. Use the CTA version when the section should drive action. Use the no-CTA version for proof, process, or context. Style controls include surface, media position, media width, vertical alignment, text alignment, minimum height, and text spacing.

Spotlight combines a background image with quote and signature fields. It is useful for proof moments or strong editorial statements. Style controls include surface, minimum height, overlay margins, and font or spacing controls.

Card Grid is for features, benefits, services, use cases, or implementation steps. Content controls include optional section header, icons, card titles, body copy, and optional card links. Style controls include surface, card style, row gap, and card gap.

Content Grid is for resources, guides, webinars, articles, or downloadable assets. Content controls include section intro, card images, labels, titles, descriptions, links, and bottom action. Style controls include surface, column gap, row gap, image ratio, and image treatment.

Metric Cards are for short proof points. Keep values and labels concise. Style controls include surface and row gap.

Logo Wall is for customers, integrations, partners, or ecosystem proof. It has an optional header, logo images, surface mode, column count, logo max width, and optional single-row autoplay. Autoplay is off by default.

Quote Carousel is for testimonials or customer signal. It has optional section header, repeatable quotes, names, titles, companies, optional headshots, surface, card width, and card gap. Headshots are shown by default when provided.

Comparison Table is for comparing plans, approaches, capabilities, or before/after states. Content controls include columns, dimensions, descriptions, and cell values. Style controls include surface, vertical spacing, and table minimum width.

Gallery Mosaic is one of the theme's most flexible sections. Use it for platform architecture, product workflows, feature stories, use-case collections, proof snapshots, or customer outcomes.

Content controls include anchor ID, heading, header alignment, and repeatable tiles. Each tile can be Image + text, Text, Image, Accent note, or Quote. Each tile also has width, shape, surface, image, image ratio, media position, label, title, body, tags, link, CTA toggle, and link text.

Style controls include section surface mode, layout preset, and gap. Start with the layout preset before fine-tuning every tile: Editorial is the safest default, Showcase creates stronger visual hierarchy, and Compact works for dense information.

Default-off control: Tile CTAs are off by default. Turn on Show CTA button only for tiles that should send visitors to another page, resource, or form.

Pricing supports SaaS plans, implementation packages, service tiers, or advisory models. Content controls include anchor ID, optional section header, repeatable cards, featured card toggle, badge text, feature points, price amount, price note, CTA text, and CTA link.

The pricing toggle can be set to No toggle, Currency conversion, or Monthly / annually. Currency conversion uses a manual exchange rate and does not fetch live rates. Monthly / annually uses a shared symbol, annual discount percentage, and primary billing option to calculate the alternate display.

Style controls include surface mode, column gap, and card minimum width.

Default-off controls: Show header is off by default so pricing can be used as a compact card set. Featured card is also off by default. Turn it on for one recommended plan and add badge text if needed.

Form Panel is for demo request, contact, content download, webinar signup, or consultation sections. Content controls include anchor ID, companion type, companion copy or media, proof items, selected form, form panel title, body, and note. Style controls include surface, form position, vertical alignment, form style, and column gap.

Single-Column CTA is for focused page actions. Content controls include eyebrow, heading, lead, CTA, supporting note, and arrow icon. Style controls include surface, text alignment, button minimum width, CTA alignment, fonts, and spacing.

CTA Button controls standalone buttons. Show button is on by default. If a button should be hidden without deleting it, turn Show button off.

Newsletter Signup supports selected form, inline or stacked layout, email-only mode, placeholder, and hidden labels. Email-only mode and hidden labels are on by default.

FAQ List is for compact FAQ sections inside marketing pages. It supports intro content, optional column labels, repeatable questions and answers, open-first-question behavior, surface, vertical spacing, intro alignment, column count, and column gap. Column labels are off by default.

FAQ Page is for a full FAQ page with grouped questions and a navigation rail. It supports groups, questions, answers, heading level, open-first-question behavior, surface, rail width, layout gap, and sticky navigation.

Documentation Page is for long-form guide content with a left navigation rail. It supports navigation title, section navigation labels, anchor IDs, headings, body content, surface, rail width, layout gap, and sticky navigation. Keep navigation labels short.

Add the details, steps, examples, or notes for this subsection.

Add the details, steps, examples, or notes for this subsection.