AI services homepage templateFree9 sections

The Loom:cobalt editorial AI services homepage template for Astro, HubSpot and WordPress

A cobalt blue homepage built on one idea: loose red threads on the left turn into a tight ivory weave, the way fast AI becomes work a business can rely on. The textile appears once, in the hero, and a thin red line carries the story through the rest of the page.

Open live demo Downloads

Sections: 9, 3 with their own script
Editable fields: 100 in HubSpot and WordPress
Typefaces: Inter
Image files: 2
Downloads: Astro 313 KB, HubSpot 1.3 MB, WordPress 1.1 MB
Look: Dark background
Collections: AI services, Agency, Business
Framer: Coming soon

The Loom AI services homepage template, first screen on a 1440 pixel wide desktop

The Loom 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: Warpwell, a fictional company that builds and runs AI systems for other businesses.

Download The Loom

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

Astro

the-loom-astro.zip · 313 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 the-loom-astro.zip; it holds one folder, the-loom.
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

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

Change the content

Each of the 9 sections is a module with its own fields, 100 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 The Loom - 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

the-loom-wordpress.zip · 1.1 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 the-loom-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, 100 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 "The Loom". 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 the_loom_ and the-loom/.

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 The Loom

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

Header

Warpwell wordmark, three anchor links and the outlined "Bring us the mess" button over a thin ivory rule
11 fields · has its own script
Hero

Two-line ivory headline, the woven textile with loose red threads, intro, ivory button and the speed and strength line
8 fields
Contrast

"Possibility doesn't stand still" and "Your business needs solid ground" in two columns split by a vertical rule
4 fields
Connection

"The connection is the capability" with Understand, Coordinate, Deliver and Recover as red dots on a curving line
8 fields
Possibilities

Four ruled accordion rows pairing a client problem with its outcome; the first opens to a textile knot image
21 fields · has its own script
Standard

Ivory band with "Pass all six. Then call it agentic." and the six conditions in two ruled columns with red numbers
21 fields
How we work and example clients

Find, build and run steps joined by red arrows, then three fictional clients: Tallowmere, Brisketon and Quorra Labs
11 fields
CTA

"The next connection is yours" beside a three-field form with underlined inputs, an ivory submit button and a red curve
11 fields · has its own script
Footer

Large Warpwell wordmark, "The work beneath the work." tagline, the domain and a vermilion line
5 fields

Design notes

The first screen is solid cobalt. "AI moves fast. We build what holds." sits top left in very large ivory Inter, and a photoreal woven band sweeps across the lower half, with loose vermilion threads entering from the left. The intro and an ivory "Bring us the mess" button sit at the lower right, below the weave.

The page then stays blue and open: two contrast columns split by a thin ivory rule, a connection line with four red dots that curves off the right edge, and four ruled accordion rows of problems and outcomes. The six conditions break the blue with one ivory band in blue and red type, then the page returns to cobalt for the three-step working sequence, three example clients, the contact form and a large footer wordmark.

What stands out is the red thread motif. After the hero it shows up as the connection line, the arrows between steps, the curve under the contact copy and the line beside the footer domain. The second image, a textile knot, only appears when the first problem row is opened.

Shape and spacing

Square corners everywhere, thin ivory rules between rows and columns, outlined and solid rectangular buttons, and side gutters of 24 to 108px that scale with the window.

Images

2 generated images as WebP (the hero weave with red threads, a textile knot in the first open problem row). They are generated for the template, with no text, real logos or recognizable people in them.

Typefaces

InterEverything: the oversized hero and section headings, body copy, navigation, labels and buttons (weights 400 to 700)

Loaded from Google Fonts.

Colors

Cobalt #0646CEThe main page background and the text on the ivory benchmark band
Ivory #FBF8ECHeadings and text on blue, buttons, rules and the benchmark band
Vermilion #F45231The connection line and dots, step arrows, the contact curve and footer line
Light coral #FF997DSmall labels on blue, lightened for contrast
Brick red #B7321CSmall labels and numbers on the ivory band

What works on the page

The header collapses to a menu button on tablets and phones; it opens by click, touch or keyboard and closes with Escape or a link.
Four problem rows open and close as accordions, each showing its category and outcome; the first reveals the textile knot.
The contact form checks the required fields and the email format, then replaces itself with a thank-you message that says the demo sent nothing.
Transitions are short and easy, and they switch off under reduced-motion settings.

Who The Loom fits

An AI consultancy or automation studio that wants one bold brand color and a single strong photograph instead of a gallery to source.

A firm that explains its work as turning loose pieces into something solid, where the thread and weave image says it for you.

A team that wants a confident, editorial page with very large type and few sections to keep up to date.

Anyone who likes a single-color page: swap the cobalt token and most of the page changes with it.

See the whole page as one image (1080 by 3338 pixels, 216 KB)

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

Questions about The Loom

Can I replace the woven textile in the hero?

The hero is a single WebP file, hero-weave.webp, about 1665 by 944 pixels, and it is cropped with object-fit: cover. Swap in your own wide image at a similar ratio and keep a calm area at the top left for the headline and at the lower right for the intro.

What happens when someone sends the contact form?

The form checks first name, last name and work email, then replaces itself with a thank-you message saying the demo has not sent anything. It keeps action="/contact", so you connect your own form handler or HubSpot form to receive messages.

How do I change the cobalt blue?

The colors are custom properties at the top of the stylesheet: cobalt, ivory and vermilion, plus two small label shades. Change the cobalt value and every blue section follows; check the label colors against your new background for contrast.

Do the problem rows need JavaScript?

The four rows are accordions when JavaScript runs, and they work with a click, a tap or the keyboard. With JavaScript off, all the content stays readable on the page.

Are Warpwell and its clients real?

Warpwell, Tallowmere, Brisketon, Quorra Labs and the warpwell.example domain are placeholders. Replace them with your own name, clients and contact address. Free to use and adapt for personal and commercial sites.