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:SaaS homepage template for Astro, HubSpot and WordPress
A SaaS homepage laid out like a kinetic-art exhibition. Matte violet, apricot and forest-green forms hang above the headline, gallery captions label each section, and the pricing plans sit as staggered sheets.
- Sections
- 13, 3 with their own script
- Editable fields
- 266 in HubSpot and WordPress
- Typefaces
- Urbanist, Space Mono
- Image files
- 6
- Downloads
- Astro 123 KB, HubSpot 694 KB, WordPress 351 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 A Fine Balance
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, a-fine-balance, 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 a-fine-balance-astro.zip; it holds one folder, a-fine-balance.
- 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 a-fine-balance-hubspot.zip, then from the folder that holds a-fine-balance run hs cms upload a-fine-balance a-fine-balance.
- In HubSpot go to Content > Website Pages > Create > Website page, click the theme name under the search box, find A Fine Balance and click Set as active theme.
- Choose the template A Fine Balance - Home.
More from the HubSpot README
Change the content
- Each of the 13 sections is a module with its own fields, 266 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 A Fine Balance - 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 a-fine-balance-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, 266 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 "A Fine Balance". 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 a_fine_balance_ and a-fine-balance/.
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 A Fine Balance
In page order. In HubSpot each one is a module and in WordPress a block, 266 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
Panoramic hanging sculpture over the headline, intro, two buttons and the trial note
19 fields -
Features
Six features with an AI draft showing edit and approval controls
33 fields -
How it works
Three setup stages with large numbers
10 fields -
Integrations
Six integration categories and the integrations link
9 fields -
Customers
Customer line and six names as text
7 fields -
Testimonials
Three quotations with an outlined quote mark
6 fields -
Numbers
Four numbers with sculpture accents
15 fields -
Pricing
Three staggered landscape plan sheets with the Monthly / Annual control
49 fields · has its own script -
Security
Four security statements
10 fields -
FAQ
Five questions, answers shown
14 fields · has its own script -
Closing call to action
Closing invitation with a hanging form and both buttons
15 fields -
Footer
Brand line, contact email, Product, Company and Resources directories, legal links
47 fields
Design notes
The designer described it as a contemporary kinetic-art exhibition for customer support. A panoramic hanging sculpture runs across the first screen, and smaller forms (a violet petal, an apricot sphere, a green half disc) return through the page as you scroll.
Warm gallery white, fine rules and small square markers do the structural work. Space Mono labels read like exhibit captions, with numbers and short metadata beside each section title.
Pricing is the most unusual part: three landscape plan sheets placed at staggered heights above 1350px, stacking on phones. Controls are nearly square (4px corners).
Shape and spacing
Fine rules, small square markers, 4px control corners, 7px pricing sheets, 44px side margins on desktop and 20px on a phone, content up to 1600px wide.
Images
6 generated sculpture pieces as WebP (hero panorama, petal, spheres, half disc). They are generated for the template, with no text, real logos or recognizable people in them.
Typefaces
- UrbanistWordmark, headings, prices and questions (500), body and controls (400), setup numbers (800)
- Space MonoGallery captions, exhibit numbers and metadata
Loaded from Google Fonts.
Colors
- Gallery white
#F6F5F1Page background - Ink
#242622Text and primary buttons - Violet
#7958D6Main sculpture color and accents - Apricot
#E9A57ASecond sculpture color - Forest
#285C45Third sculpture color and quiet accents - Pale lavender
#EAE5F3Tinted panels
What works on the page
- The hanging forms swing in a slow pendulum; text and controls stay still, and the motion stops under reduced-motion settings.
- Product and Solutions menus with Escape support; a full menu on phones.
- Monthly and Annual switch the plan prices, usable by keyboard.
- FAQ rows start expanded and collapse one by one. The AI draft in Features is a still preview.
Who A Fine Balance fits
A product that wants to look considered and calm rather than busy, with art direction doing the work.
Design-led or creative software, where gallery captions and sculpture feel at home.
A team with brand colors close to violet, apricot or green, since the sculptures carry the palette.
Pages where pricing deserves a moment: the staggered sheets make the three plans the center of the page.
See the whole page as one image (1080 by 5584 pixels, 213 KB)
Questions about A Fine Balance
Can I change the sculpture colors?
The sculptures are image files (WebP in Astro and WordPress, PNG and JPEG in HubSpot), so their colors are part of the artwork. Replace the six files in the assets folder with your own art at the same names, or change the surrounding colors through the custom properties at the top of the stylesheet.
Can I turn off the swinging motion?
Visitors who set reduced motion in their system already get still sculptures. To stop it for everyone, remove the pendulum animation rules from the hero and closing sections in the stylesheet.
Are the Urbanist and Space Mono fonts free?
Both are free web fonts loaded from Google Fonts, with local fallbacks set.
Can I use A Fine Balance for a commercial product?
Free to use and adapt for personal and commercial sites. Quillon, its customers and its numbers are placeholders.
More SaaS templates like A Fine Balance
Same content, different designs. A Fine Balance is listed in SaaS templates, Tech website templates, Landing page templates, Homepage templates, HubSpot themes and WordPress block themes. Or browse the full gallery.
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
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.