Meridian documentation
Everything you need to install, set up, and customize the Meridian theme.
Install
Upload the theme to your portal with the HubSpot CLI, or upload the folder in Design Manager.
npm install -g @hubspot/cli
hs init
hs cms upload "Meridian Theme" "meridian-theme"Once uploaded, you'll find Meridian under Settings → Themes. You don't need to set it as your active theme to use it — its templates appear in the page template picker.
Create pages
- Go to Content → Website Pages → Create → Website page.
- In the template picker, scroll to the Meridian theme and choose a template (Home, Services, Service detail, About, Pricing, Contact, Newsletter, Get started, Webinar, E-book).
- Set the page's slug, then edit each section directly on the page. Sections drag to reorder.
Set up the blog
Meridian includes a blog listing and post template. In Settings → Content → Blog, set your blog's listing template to blog-listing and post template to blog-post.
Color schemes
Go to Settings → Themes → Meridian → Edit theme settings → Colors → Color scheme. Choose a ready-made palette to recolor the whole site in one click:
- Indigo & Amber (default)
- Plum & Blush
- Forest & Ochre
- Charcoal & Cobalt
- Custom — use the individual color pickers below the dropdown
Fonts & type
Under Theme settings → Typography, set the heading and body fonts (and per-level H1–H6 fonts if you want finer control). Meridian defaults to Newsreader for headlines and Hanken Grotesk for body.
Logo & wordmark
Add a logo image under Theme settings → Brand → Logo. With no logo set, the header and footer show an editable text wordmark + tagline — edit those in the global header and footer.
Modules
Meridian ships 30+ drag-and-drop modules. Add them from the Add panel in the page editor. Highlights:
| Module | Use |
|---|---|
| Hero | Homepage hero with image, copy, and CTAs (image side toggle) |
| Approach tabs | Interactive tabbed section — each tab swaps copy + image |
| Service cards | Three-up offering cards |
| Pricing tiers | Plan cards with a monthly/annual toggle |
| FAQ accordion | Expand/collapse questions |
| Testimonials | Grid or carousel of quotes |
| Comparison table | Plans side by side with column highlight |
| Countdown timer | Live countdown to a date (events/webinars) |
| Speakers | Photo/name/title/bio cards |
| Offer hero | Image + form side-by-side (lead gen) |
| Contact details | Two-column address/phone + social channels |
Every section module has an optional section background override (leave blank to inherit the theme).
Sections
Pre-built reusable sections combine modules into ready-made layouts. In the editor's Add panel, switch to Sections to drop in a complete Hero, Logos + Approach, Services + CTA, Pricing + FAQ, Testimonials, or CTA band.
Forms
The Contact, Newsletter, Get-started, Webinar, and E-book pages use a form field. Open the form section and pick any HubSpot form from the dropdown — it inherits the theme's styling automatically. For a newsletter, use a form with the fields you want (e.g. First name, Last name, Email).
Landing pages
Webinar registration
Built from an offer hero (image + form), a countdown timer, and a speakers section. Set the event date in the Countdown module; it auto-shows a "registration closed" message after the deadline.
E-book / content offer
A side-by-side image + form hero, followed by a "what's inside" section. Pick your download form in the offer hero, and set the image and copy.
Interactions
All interactions are vanilla JS, accessible, and respect reduced-motion settings:
- Approach tabs · pricing billing toggle · FAQ accordion · testimonial carousel
- Countdown timer · count-up stats · comparison column highlight
- Smart sticky header (hides on scroll down, returns on up) · floating back-to-top button
Support
Questions or issues? Email [hello@kukuigrowth.com]. Include your portal ID and a link to the page, and we'll help.