AI services homepage templateFree7 sections

Living Graft:lilac botanical AI services homepage template for Astro, HubSpot and WordPress

A pale lilac homepage where a young leafy shoot is joined to an old branch by a small copper collar: new intelligence grafted onto an established business. The page runs seven sections, with one dark aubergine panel in the middle.

Open live demo Downloads

Sections: 7, 2 with their own script
Editable fields: 82 in HubSpot and WordPress
Typefaces: Inter
Image files: 2
Downloads: Astro 400 KB, HubSpot 1.2 MB, WordPress 1.0 MB
Look: Light background
Collections: AI services, One page, Minimalist
Framer: Coming soon

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

Living Graft 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: Scionworks, a fictional company that builds and runs AI systems for other businesses.

Download Living Graft

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

Astro

living-graft-astro.zip · 400 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-graft-astro.zip; it holds one folder, living-graft.
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 (7 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-graft-hubspot.zip · 1.2 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-graft-hubspot.zip, then from the folder that holds living-graft run hs cms upload living-graft living-graft.
In HubSpot go to Content > Website Pages > Create > Website page, click the theme name under the search box, find Living Graft and click Set as active theme.
Choose the template Living Graft - Home.

Change the content

Each of the 7 sections is a module with its own fields, 82 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 Graft - 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-graft-wordpress.zip · 1.0 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-graft-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 7 sections is a block with its own fields, 82 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 Graft". 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_graft_ and living-graft/.

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 7 sections of Living Graft

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

Header

Scionworks wordmark, two anchor links and an outlined "Bring us the mess" button over a thin rule
9 fields · has its own script
Hero

Centered aubergine headline, the wide shoot and bark graft photo, intro on the left and a copper button
7 fields
The living connection

"Keep the speed. Strengthen the operation." with the growth-ring photo and a ruled four-step strip
10 fields
Standard

Aubergine panel with "Pass all six. Then call it agentic." and the six conditions in three columns
21 fields
Capability, in the real world

Four numbered client quotes with outcomes and copper arrows that link to the contact form
18 fields
CTA

"The next connection is yours" with boxed first name, last name and work email and a copper submit bar
11 fields · has its own script
Footer

Oversized Scionworks wordmark, copper square with the tagline, People. Intelligence. Operations. and domain
6 fields

Design notes

The first screen is one lilac canvas. "AI moves fast. We build what holds." is centered in heavy aubergine Inter, and below it a wide photo runs edge to edge: a green shoot joined by a copper collar to textured bark. The intro sits at the lower left and a square copper "Bring us the mess" button at the right.

The connection section pairs "Keep the speed. Strengthen the operation." with a still life of a tree slice wrapped in a copper band and sprouting fresh leaves, over a ruled four-step strip. A full-width aubergine panel then holds the six conditions in three columns with copper numbers. The page returns to lilac for four numbered quote rows, the contact form and an oversized Scionworks wordmark in the footer.

What is unusual is the botanical art direction: two studio photographs, a graft and growth rings, with soft masked edges so they sit on the lilac without a box. The four problem rows end in copper arrows that link to the contact form instead of opening.

Shape and spacing

Square corners on buttons and fields, fine aubergine rules at 40% opacity, content at 89% of the window up to 1700px, and 40 to 64px of vertical spacing.

Images

2 generated images as WebP (the shoot grafted to bark with a copper collar, a tree slice with a copper band and new leaves). They are generated for the template, with no text, real logos or recognizable people in them.

Typefaces

InterAll text; tightly tracked headings, body, navigation, labels and the oversized footer wordmark (weights 400 to 600)

Loaded from Google Fonts.

Colors

Lilac #E6DBEFThe page background
Aubergine #2B082AHeadings, text, rules and the benchmark panel
Copper #C38660Buttons, row arrows, numbers on the dark panel and the footer square
Dark copper #9A5838Small labels and numbers on lilac, darkened for contrast

What works on the page

The header switches to a Menu button on tablets and phones; it opens by click, touch or keyboard and closes with Escape or a link.
The four problem rows are static, and their arrows jump to the contact form.
The form uses the browser's required and email checks, then animates to a thank-you that says the template has not sent your details.
Transitions switch off under reduced-motion settings.

Who Living Graft fits

An AI services firm that wants a warm, organic look in place of the usual circuit boards and glowing nodes.

A consultancy that stresses working with what a business already has, where the graft says it in one picture.

A small team that wants a short page: seven sections, two photos and no accordions to maintain.

Anyone in health, food, agriculture or sustainability work who wants an AI page that fits a natural subject.

See the whole page as one image (1080 by 3291 pixels, 173 KB)

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

Questions about Living Graft

Can I replace the botanical photos?

The two photos are WebP files: living-graft.webp at 2160 by 720 for the hero and growth-rings.webp at 960 by 960 for the connection section. CSS masks fade their edges into the lilac, so photos shot on a plain light background blend best.

Why do the problem rows not open?

The final design shows four static rows, and their copper arrows link to the contact form. That turns each problem into a reason to get in touch, and keeps every outcome visible without a click.

How do I change lilac, aubergine and copper?

They are custom properties at the top of the stylesheet, with a darker copper for small labels. Change the lilac and aubergine values and the background, text and benchmark panel follow; check the copper buttons against your new colors.

Does the contact form send messages?

The form validates and shows a thank-you message, and sends nothing; the message says so. It keeps action="/contact" so you can connect your own endpoint or form tool.

Is Scionworks a real company?

Scionworks, scionworks.example and the copy are placeholders. Replace the name, the wordmark and the words with your own. Free to use and adapt for personal and commercial sites.