-2.png)
-2.png)
.png)
.webp)
.png)
.png)
-1.webp)
-1.webp)
.webp)
-1-1.webp)
-2.webp)
-1-1.webp)
-2-1.png)
-1-1.webp)
-1-1.webp)
-1-1.png)
Serenity Pro: a HubSpot theme for wellness practices.
A $99 theme for therapists, counsellors and wellness studios, designed and built by two people
The gap we saw
The wellness themes we found on the marketplace mostly sold single sessions. Booking was left to the buyer, programs had no home, and the pages sat still. Practices that sell courses or memberships, or simply want their site to feel calm and alive, had to piece it together themselves.
The brief we set ourselves
What practices need
- 01 Trust up front: privacy, licensing and credentials
- 02 Real people: therapist and specialist profiles
- 03 Booking that works out of the box
- 04 Programs and courses, not just single sessions
Our Approach
What wellness practices need from a site, and what they can skip.
Deliverables
- Market scan
- Page list
- Module list
We wireframed every template to settle the page order before design, and mapped a menu where programs and courses get their own home.
Deliverables
- Wireframes
- Page map
We set the style guide, Fraunces and Figtree with a teal and orange palette, then designed all 20 pages in Figma, desktop and mobile.
Deliverables
- Style guide
- Figma designs
We built 40+ modules and 20 page layouts in HubSpot, added GSAP motion across the pages, and launched on the HubSpot marketplace at $99.
Deliverables
- 40+ modules
- 20 page layouts
- Marketplace listing
The theme in use
Serenity Pro installs with full demo content, so a practice has a working site on day one. They swap in their own team, services and photos, set their colours in theme settings and go live.
Key screens
The screens a client moves through, from the first welcome to choosing a plan.
-
Hero · Desktop
-
Anxiety Reset program · Desktop
-
Blog article · Tab
-
Pricing plans · Desktop
-
How it works · Mobile
01 / 05
Built-in sections
Serenity Pro ships as drop-in sections a practice can stack in any order. These are the ones clients see most: a warm intro, trust and privacy blocks, and a clear call to book.
Typography & Colours
The brand at work: the same type and colour on real interface parts.
-
BUTTONS
-
-
-
Case study
-
-
-
TAGS AND STATES
-
Project timeline
6 weeks, first sketch to the HubSpot marketplace
- Week 1
- Week 2
- Week 3
- Week 4
- Week 5
- Week 6
What we built
Serenity Pro ships as a complete site, not a starter kit. Every page a practice is likely to need is designed, filled with demo content and built from the same set of modules.
-
01
Research and moodboard
Competing wellness themes, real practice sites, and the calm, warm direction we chose.
-
02
Wireframes
Low-fidelity layouts for every template, used to settle the page order before design.
-
03
Style guide
Fraunces and Figtree, the teal and orange palette, buttons, cards and form styles.
-
04
Full Figma designs
High-fidelity designs for all 20 pages, desktop and mobile.
-
05
40+ HubSpot modules
Therapist cards, services grid, How it works, programs, booking, impact stats, FAQ and testimonials.
-
06
Templates and system pages
20 page layouts plus 10 system pages, including membership login and registration.
A theme made for HubSpot
Colours, fonts and layouts live in theme settings, and booking runs on HubSpot Meetings, so a practice launches without a developer.
Featured in the HubSpot Solutions Directory
- Smart CRM
- CMS Hub
- Meetings
- Forms
Smart CRM
Ready to Build the Engine Behind Your Growth?
We build the systems underneath growth. CRM, website, search, outbound, and automation, connected so your team stops doing the work software should do.
Takes 30 minutes
Delivered by certified HubSpot expert
