AI services homepage templateFree9 sections

Living Boundary:dark fluorescent microscopy AI services homepage template for Astro, HubSpot and WordPress

An AI services homepage drawn from fluorescence microscopy. A glowing lime cell membrane sweeps across the dark hero, keeping scattered coral particles outside and an ordered network inside, as a picture of AI that works within boundaries. Below it, faint cellular networks run down the right edge of every section while the text keeps a clean, ruled column.

Open live demo Downloads

Sections: 9, 2 with their own script
Editable fields: 95 in HubSpot and WordPress
Typefaces: Inter
Image files: 3
Downloads: Astro 300 KB, HubSpot 1.4 MB, WordPress 1.2 MB
Look: Dark background
Collections: AI services, Tech
Framer: Coming soon

Living Boundary AI services homepage template, first screen on a 1440 pixel wide desktop

Living Boundary AI services homepage template, first screen on a 390 pixel wide phone

Screenshots of the live demo at 1440 and 390 pixels. The content is placeholder: Edgemoor, a fictional company that builds and runs AI systems for other businesses.

Download Living Boundary

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, living-boundary, with a README; the install steps below are condensed from it.

Astro

living-boundary-astro.zip · 300 KB

Download zip

An Astro project: one component per section, design tokens in global.css, images in public/assets.

Needs Node 22.12 or newer.

Unzip living-boundary-astro.zip; it holds one folder, living-boundary.
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/.

What is where

src/pages/index.astro: the page head and the sections in order.
src/components: one file per section (9 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.
CLAUDE.md and AGENTS.md: notes that tell Claude Code or Codex how the project is organized.

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.
The header links scroll to sections of this page; "Bring us the mess" and the other calls to action scroll to the contact form.
The contact form validates, shows a thank-you message and sends nothing. Replace the submit handler in the script of the contact section with a request to your form service (its action is /contact).

HubSpot

living-boundary-hubspot.zip · 1.4 MB

Download zip

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 living-boundary-hubspot.zip, then from the folder that holds living-boundary run hs cms upload living-boundary living-boundary.
In HubSpot go to Content > Website Pages > Create > Website page, click the theme name under the search box, find Living Boundary and click Set as active theme.
Choose the template Living Boundary - Home.

Change the content

Each of the 9 sections is a module with its own fields, 95 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 Living Boundary - 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.

WordPress

living-boundary-wordpress.zip · 1.2 MB

Download zip

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 living-boundary-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.

Change the content

Each of the 9 sections is a block with its own fields, 95 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 "Living Boundary". 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 living_boundary_ and living-boundary/.

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 9 sections of Living Boundary

In page order. In HubSpot each one is a module and in WordPress a block, 95 fields in all; in Astro each is one component file. Remove, reorder or reuse any of them on its own.

Header

Edgemoor wordmark, three section links and an outlined "Bring us the mess" button above a thin rule
11 fields · has its own script
Hero

"Intelligence, with boundaries." with intro and lime button beside the glowing lime cell membrane
7 fields
Two speeds

"Possibility moves. Your business holds." with AI moves fast and Your operation stays steady
6 fields
Connection

"The connection is the capability." with Understand, Coordinate, Deliver, Recover joined by lime strokes
6 fields
Standard

"Six conditions. One working operation." in a ruled 3 by 2 grid above a full-width lime bar
22 fields
Real-world work

Four static rows pairing a client problem with an outcome across a lime arrow
10 fields
Built and operated

"One process. A dependable operation." with three steps and three placeholder companies
15 fields
CTA

"The next connection is yours." beside a dark form for first name, last name and work email
12 fields · has its own script
Footer

Oversized Edgemoor wordmark, the tagline, the lime "People. Intelligence. Operations." line and Back to top
6 fields

Design notes

The first screen is near-black plum with a bright acid-lime cell membrane curving through the upper right, tiny coral particles drifting outside it and a fine lime network inside. The headline "Intelligence, with boundaries." sits at the left in large warm-white Inter, with a short intro and a solid lime "Bring us the mess" button below.

The page then runs as one dark scroll divided by thin gray rules. Two speeds sets AI moves fast against Your operation stays steady in two columns, the connection shows four verbs joined by lime strokes, the six conditions sit in a ruled 3 by 2 grid above a full-width lime bar, and four problem rows pair each problem with an outcome by a lime arrow. Three steps and three placeholder companies, a two-column contact form and an oversized wordmark footer finish it.

The text column takes about three quarters of the desktop width, leaving a strip on the right where glowing cell clusters and branching filaments float behind each section. Their edges fade into the plum background, so the art reads as one continuous specimen from hero to footer. On phones it becomes a subdued edge behind the copy.

Shape and spacing

Square corners on buttons, bars and inputs, with fine gray rules between rows and columns. Containers are 90% wide (88% on phones), and most sections use about 75% of the desktop width for text.

Images

3 generated images as WebP (the lime cell membrane, a cellular network, sparse cellular branches). They are generated for the template, with no text, real logos or recognizable people in them.

Typefaces

InterEverything: the wordmark, light large headings, body copy, labels, buttons and form fields (weights 400 to 600)

Loaded from Google Fonts.

Colors

Plum #140B12The page background from header to footer
Warm white #F5F3EFHeadings and body text
Acid lime #DCFF51Buttons, the standard bar, section labels, arrows and the footer strapline
Muted #D4CFD1Secondary text
Rule #756D70Thin dividers and outlines
Field #241A21Form input backgrounds

What works on the page

Header links jump to sections on the page; below 1050px they move into a Menu button that works by touch, Enter and Escape and returns focus.
The lime "Pass all six" bar and both contact buttons scroll to the form.
The form uses required fields and email checks, then shows an animated thank-you that says the demo sent nothing.
Problem rows and steps are static as drawn; a Back to top link sits in the footer, and motion is off under reduced-motion settings.

Who Living Boundary fits

An AI or data firm that wants a dark, scientific look with real visual depth instead of generic glowing-brain art.

A company with life sciences, biotech or health ties, where microscopy imagery already makes sense.

A team that likes one loud accent color: everything is plum and white except the acid-lime buttons and labels.

Anyone who wants a single clean text column with the art kept to one side, so long copy stays easy to read.

See the whole page as one image (1080 by 3273 pixels, 208 KB)

The full Living Boundary homepage template from header to footer at 1440 pixels wide

Questions about Living Boundary

What are the images in Living Boundary?

Three generated microscopy-style images saved as WebP: the glowing cell membrane in the hero, a cellular network and a sparse set of branches that run down the right edge. Their edges are faded with CSS masks so they blend into the plum background.

Is there a light version?

The page is designed dark from top to bottom, and the fluorescent art only works on a dark field. The colors are custom properties in the stylesheet, so you can shift the plum or the lime, but a light background would need new images.

Which font does it use?

Only Inter, from Google Fonts, in weights 400 to 600. The large headings use the lighter weights, which keeps the dark page from feeling heavy.

Do the problem rows open like accordions?

They are static in this design: each row shows the problem, a lime arrow and the outcome at once. The only interactive parts are the phone menu, the scroll links and the contact form.

Does the contact form send messages?

The form validates the fields and shows a thank-you that says nothing was sent. Connect it to your own form handler or the HubSpot or WordPress form tools. Edgemoor, Fairholt Clinics, Saxby and Rowan & Lake are placeholders.