Conversation Circle
A light, chat-led SaaS homepage: speech bubbles and curved connectors around a large serif headline.
- Astro
- HubSpot
- WordPress
- Framer soon
Quiet Current:SaaS homepage template for Astro, HubSpot and WordPress
A dark, photographic SaaS homepage. A right-aligned serif headline floats over petrol-dark water while a pale action plate sits in the opposite corner, and silver currents lead down the page.
- Sections
- 11, 2 with their own script
- Editable fields
- 226 in HubSpot and WordPress
- Typefaces
- Cormorant Garamond, DM Sans
- Image files
- 6
- Downloads
- Astro 606 KB, HubSpot 2.2 MB, WordPress 1.6 MB
- Look
- Dark 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 Quiet Current
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, quiet-current, 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 quiet-current-astro.zip; it holds one folder, quiet-current.
- 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 (11 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 quiet-current-hubspot.zip, then from the folder that holds quiet-current run hs cms upload quiet-current quiet-current.
- In HubSpot go to Content > Website Pages > Create > Website page, click the theme name under the search box, find Quiet Current and click Set as active theme.
- Choose the template Quiet Current - Home.
More from the HubSpot README
Change the content
- Each of the 11 sections is a module with its own fields, 226 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 Quiet Current - 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 quiet-current-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 11 sections is a block with its own fields, 226 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 "Quiet Current". 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 quiet_current_ and quiet-current/.
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 11 sections of Quiet Current
In page order. In HubSpot each one is a module and in WordPress a block, 226 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
34 fields · has its own script -
Hero
Right-aligned title over dark water, pale action plate with both buttons
12 fields -
Features
Six features, an AI draft approval preview and the photographic shoreline edge
18 fields -
How it works
Three staggered setup steps along a curve
12 fields -
Integrations
Six integration categories and the integrations link
9 fields -
Customers, testimonials and numbers
Customer names, three quotations and four large metrics in one composition
21 fields -
Pricing
Open Starter, Growth and Scale comparison with the Monthly / Annual toggle
46 fields · has its own script -
Security
Four security points
5 fields -
FAQ
Five questions as native disclosure rows
14 fields -
Closing call to action
Final invitation over an ocean horizon
8 fields -
Footer
About line, link columns and legal links
47 fields
Design notes
The designer described a cinematic, water-led homepage. The first screen is a full-bleed photo of dark water with silver highlights; the title sits on the right, with "not days" in Cormorant Garamond italic, and a separate pale plate in the lower left holds the buttons.
Features end in a photographic shoreline (a photo clipped by an SVG path). Customers, testimonials and numbers share one composition, with metrics set very large, up to 158px on desktop.
Surfaces and buttons are square. The closing invitation sits over an ocean horizon.
Shape and spacing
Square surfaces and buttons, an 8px radius only on the product preview, 24 to 80px side margins, 44px minimum tap targets on phones.
Images
6 water photographs as WebP (desktop and portrait currents, ripples, a shoreline detail, the ocean horizon). They are generated for the template, with no text, real logos or recognizable people in them.
Typefaces
- Cormorant GaramondDisplay headings and wordmark, italic for emphasis
- DM SansBody, navigation, controls and captions
Loaded from Google Fonts.
Colors
- Petrol black
#071F25Dark sections, primary text and buttons - Mist
#E8EFEBLight sections and action plates - Pale silver
#B8CCC8Rules and secondary detail - Jade
#8EBDAAAccents and the approval state - White
#FFFFFFText on dark photography
What works on the page
- "Explore Quillon" scrolls to the features.
- Monthly and Annual update the plan prices; Growth stays marked most popular. Without JavaScript the annual prices show as plain text.
- The FAQ uses native disclosure rows, so it works without JavaScript.
- Product and Solutions menus nest inside the phone menu; Log in stays in the header.
Who Quiet Current fits
A product that wants a dark, premium first screen built on one strong photograph.
Security, infrastructure, data or finance software, where calm and restraint suit the buyer.
Teams that like serif headlines and square, editorial layouts.
A shorter page: 11 sections, because customers, testimonials and numbers are one block.
See the whole page as one image (1080 by 5361 pixels, 293 KB)
Questions about Quiet Current
Can I swap the water photos for my own?
Replace the six WebP files in the assets folder (PNG and JPEG in the HubSpot theme) and keep the same names, or pick new images in the HubSpot or WordPress editor. Keep dark images behind the hero, since the title is white.
Why does it have 11 sections and not 13?
The design puts customer names, testimonials and numbers in one composition, so they are one section (customers-testimonials-numbers) with 21 fields. Every other SaaS section is separate.
Does it work without JavaScript?
The content does. The FAQ uses native disclosure rows, and the annual prices appear as readable text when scripts are off. Only the menus and the pricing switch need JavaScript.
Can I use Quiet Current on a client site?
Free to use and adapt for personal and commercial sites. The Quillon product and its numbers are placeholders.
More SaaS templates like Quiet Current
Same content, different designs. Quiet Current 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
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
Start with one process.
We learn the business and build your first go-to-market process on us this month.