A Fine Balance
A gallery-style SaaS homepage: hanging violet, apricot and green sculptures on warm white, with mono captions.
- Astro
- HubSpot
- WordPress
- Framer soon
Conversation Circle:SaaS homepage template for Astro, HubSpot and WordPress
A SaaS homepage that reads like a conversation. Speech bubbles and hand-drawn connectors frame a large serif headline, and the six features sit around a working picture of a shared inbox.
- Sections
- 13, 5 with their own script
- Editable fields
- 257 in HubSpot and WordPress
- Typefaces
- Fraunces, Manrope
- Image files
- 2
- Downloads
- Astro 51 KB, HubSpot 220 KB, WordPress 164 KB
- Look
- Light background
- Framer
- Coming soon
Screenshots of the live demo at 1440 and 390 pixels. The content is placeholder: Quillon, a fictional customer support platform.
Download Conversation Circle
Free: a short form (first name and work email) once, then every zip downloads straight away. Free to use and adapt for personal and commercial sites. Each zip holds one folder, conversation-circle, with a README; the install steps below are condensed from it.
An Astro project: one component per section, design tokens in global.css, images in public/assets.
Needs Node 22.12 or newer.
- Unzip conversation-circle-astro.zip; it holds one folder, conversation-circle.
- In that folder run npm install (Node 22.12 or newer).
- Run npm run dev and open http://localhost:4321.
- Edit the copy in src/components, the colors and type in src/styles/global.css, and the images in public/assets.
- Run npm run build; the static site is written to dist/.
More from the Astro README
What is where
- src/pages/index.astro: the page head and the sections in order.
- src/components: one file per section (13 in all), each with its markup, styles and script.
- src/styles/global.css: design tokens (colors, type, spacing) and base styles.
- public/assets: the images.
Make it yours
- Repeated items (cards, steps, questions) share the same markup: copy one to add another.
- Remove a section by deleting its tag and its import in src/pages/index.astro.
- Reuse a section elsewhere by copying its component file and global.css; a section depends on nothing else.
- Set the title, meta description and JSON-LD block in src/pages/index.astro before publishing.
- "Start free trial" links to /signup, "Book a demo" to /demo, "Log in" to /login and "Talk to sales" to /contact-sales. Point them at your own pages.
- Both the monthly and annual price of each plan are in the pricing component; its script shows one or the other.
A HubSpot CMS theme: one module per section, each with its own fields, plus Home and Page templates.
Needs a free HubSpot account and Node.js 20 or newer for the HubSpot CLI.
- Install the HubSpot CLI: npm install -g @hubspot/cli (Node.js 20 or newer).
- Run hs account auth and paste a personal access key with Design Manager ticked.
- Unzip conversation-circle-hubspot.zip, then from the folder that holds conversation-circle run hs cms upload conversation-circle conversation-circle.
- In HubSpot go to Content > Website Pages > Create > Website page, click the theme name under the search box, find Conversation Circle and click Set as active theme.
- Choose the template Conversation Circle - Home.
More from the HubSpot README
Change the content
- Each of the 13 sections is a module with its own fields, 257 in all. Click a section in the page editor and its fields open on the left, grouped by item.
- A field left empty removes its element; an empty image field shows the template's own image.
- Sections are rows: drag, clone or delete them, and add one back from the theme's modules.
- Header and footer are global content: what you change there changes on every page.
- The template Conversation Circle - Page has the same header and footer and an empty area for other modules.
What the fields do not cover
- More items than the template has (a fourth plan, an extra question) needs an edit in modules/<name>.module/module.html and fields.json.
- Icons and drawings are inline SVG in module.html; colors, fonts and spacing are variables at the top of css/styles.css.
- No blog templates and no 404, password or search pages of its own: HubSpot uses its defaults.
- HubSpot takes no WebP in a theme, so the images are PNG and JPEG. Fonts load from Google Fonts.
How it was checked
- Uploaded with the HubSpot CLI and rendered through HubSpot's theme preview in Chromium: every file uploads without an error and the homepage matches the static version pixel for pixel at 1440px and 390px.
- Not checked: the page editor itself, publishing a page, and browsers other than Chromium.
A WordPress block theme: one block per section with its fields in the editor, plus page, post, blog and 404 templates.
Needs WordPress 6.6 or newer and PHP 7.4 or newer.
- In WordPress go to Appearance > Themes > Add New Theme > Upload Theme.
- Choose conversation-circle-wordpress.zip, then Install Now and Activate.
- Open the site: the homepage shows the template, whatever Settings > Reading says.
- Edit each section in Appearance > Editor > Templates > Front Page, in the Block tab on the right, then Save.
More from the WordPress README
Change the content
- Each of the 13 sections is a block with its own fields, 257 in all, listed in the Block tab and grouped by item. The page updates as you type.
- Links: signup or /signup is a page of your site, #pricing jumps to a section, and full addresses, mailto: and tel: work as written.
- A field left empty removes its element; clear every field of a card and the card goes.
- Move sections with the arrows in the toolbar, or add one back from the block inserter under "Conversation Circle". The same blocks work on any page.
What the fields do not cover
- More items than the template has needs an edit in sections/<name>.php (markup) and inc/sections.php (fields).
- Icons are inline SVG; colors, fonts and spacing are variables at the top of css/styles.css.
- The theme prints the page title; leave the meta description and structured data to an SEO plugin.
- Functions and blocks are prefixed conversation_circle_ and conversation-circle/.
How it was checked
- Installed from the zip in WordPress Playground on WordPress 7.1.3 with PHP 8.3 and on WordPress 6.6.10 with PHP 7.4: no PHP warnings, and the homepage matches the static version pixel for pixel at 1440px and 390px.
- Not checked: a real hosting account, browsers other than Chromium, other plugins and multisite.
Framer
Framer version coming soon. It will be listed here next to the other three downloads.
The 13 sections of Conversation Circle
In page order. In HubSpot each one is a module and in WordPress a block, 257 fields in all; in Astro each is one component file. Remove, reorder or reuse any of them on its own.
-
Header
Wordmark, Product and Solutions menus, Pricing, Customers, Docs, Log in and the trial button
32 fields · has its own script -
Hero
Serif headline with the circled "not days", four chat bubbles, intro, two buttons and the trial note
17 fields · has its own script -
Customers
"Trusted by 2,400 support teams" and six customer names set as text
7 fields -
Testimonials
Three quotations in rounded speech bubbles
11 fields -
Numbers
Four headline numbers in large Fraunces figures
8 fields -
Features
Six features placed around a shared-inbox and AI-draft interface
39 fields -
How it works
Three setup steps joined by a curved connector
11 fields · has its own script -
Integrations
Six integration categories and a link to all integrations
10 fields -
Pricing
Starter, Growth and Scale with the Monthly / Annual switch
45 fields · has its own script -
Security
Four security points with the shield illustration
8 fields -
FAQ
Five questions with accordions
12 fields · has its own script -
Closing call to action
Final invitation with both buttons
10 fields -
Footer
About line, Product, Company and Resources columns, legal links
47 fields
Design notes
The designer called it a welcoming, conversation-led product salon. The first screen is a full-width pale blue band with the headline set large in Fraunces, an apricot hand-drawn ellipse around "not days", and four chat bubbles ("Where is my order?", "Draft ready", "One shared inbox", "Happy to help.") linked by thin curved blue lines.
Below that the page stays horizontal and open: testimonials in rounded speech bubbles, the six features arranged around a shared-inbox and AI-draft interface built in HTML (not a screenshot), three onboarding steps joined by a curve, and Security and FAQ side by side in a 40/60 row.
There are no photographs. The only image files are a blue connector stroke and a shield, so the Astro download is the smallest in the gallery.
Shape and spacing
Pill buttons, 24 to 32px panel corners, fine blue outlines, about 60px side margins on desktop and 24px on a phone.
Images
2 illustrations (connector stroke, shield) as transparent WebP, plus SVG icons. They are generated for the template, with no text, real logos or recognizable people in them.
Typefaces
- FrauncesWordmark, display headings, quotes and large numbers (weights 500 to 600)
- ManropeBody copy, navigation, buttons and interface labels (weights 400 to 700)
Loaded from Google Fonts.
Colors
- Ink blue
#183D59Headings, text and primary buttons - Pale blue
#E9F4FAHero band and section backgrounds - Cornflower
#A8CDE9Bubbles and soft accents - Apricot
#F4BA94The hand-drawn ellipse and small highlights - White
#FFFFFFCards and reading surfaces
What works on the page
- Product and Solutions menus open by click, touch and keyboard, and close with Escape or a click outside.
- Monthly and Annual switch the three prices ($19, $49, $89 monthly; $15, $39, $71 a month billed annually).
- FAQ rows open and close one by one; they start expanded, as in the design.
- The hero bubbles fade in once on load; motion is off under reduced-motion settings.
Who Conversation Circle fits
A support, chat, messaging or help desk product, where the speech bubbles say what the product does.
A team that wants a light, friendly page with no photography to source or replace.
Per-seat pricing with a monthly and annual switch already wired up.
Anyone who needs a small download: the Astro version is about 52 KB.
See the whole page as one image (1080 by 4874 pixels, 233 KB)
Questions about Conversation Circle
Can I use Conversation Circle for a client or commercial site?
Free to use and adapt for personal and commercial sites. The Quillon name, the customers, the quotes and the numbers are placeholders to replace.
Are there photos I need to replace?
The design has no photographs. The two image files are a connector stroke and a shield, and the icons are inline SVG, so you mostly change words and colors.
How do I change the blue and apricot colors?
They are custom properties at the top of the stylesheet: src/styles/global.css in the Astro version and css/styles.css in the HubSpot and WordPress themes. Change the hex values there and every section follows.
Does the monthly and annual pricing switch work in HubSpot and WordPress?
Both theme READMEs list the menus, the phone menu, the FAQ and the other page behaviors as checked after install. The prices are fields in the Pricing module or block, 45 fields in all.
Which fonts does it load?
Fraunces for headings and Manrope for text, both from Google Fonts. Local fallback fonts are set in case Google Fonts does not load.
More SaaS templates like Conversation Circle
Same content, different designs. Conversation Circle is listed in SaaS templates, Tech website templates, Landing page templates, Homepage templates, HubSpot themes and WordPress block themes. Or browse the full gallery.
Answer Garden
A botanical SaaS homepage: giant leaf silhouettes, a stepped serif headline and aubergine on citron.
- Astro
- HubSpot
- WordPress
- Framer soon
Quiet Current
A cinematic SaaS homepage: a right-aligned serif title over dark water, square edges and silver currents.
- Astro
- HubSpot
- WordPress
- Framer soon
Start with one process.
We learn the business and build your first go-to-market process on us this month.