AI services homepage templateFree9 sections

Built for Continuity:apricot ceramic editorial AI services homepage template for Astro, HubSpot and WordPress

A warm apricot homepage that opens on a midnight blue bowl, broken and rejoined with silver seams, as a picture of work that recovers and keeps going. Everything else is open type, thin rules and one navy band for the six standards, which expand in place to show fuller descriptions.

Open live demo Downloads

Sections: 9, 3 with their own script
Editable fields: 106 in HubSpot and WordPress
Typefaces: Inter
Image files: 2
Downloads: Astro 372 KB, HubSpot 1.1 MB, WordPress 869 KB
Look: Light background
Collections: AI services, Consulting, Minimalist
Framer: Coming soon

Built for Continuity AI services homepage template, first screen on a 1440 pixel wide desktop

Built for Continuity 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: Keelstone, a fictional company that builds and runs AI systems for other businesses.

Download Built for Continuity

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

Astro

built-for-continuity-astro.zip · 372 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 built-for-continuity-astro.zip; it holds one folder, built-for-continuity.
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

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

Change the content

Each of the 9 sections is a module with its own fields, 106 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 Built for Continuity - 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

built-for-continuity-wordpress.zip · 869 KB

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 built-for-continuity-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, 106 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 "Built for Continuity". 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 built_for_continuity_ and built-for-continuity/.

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 Built for Continuity

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

Header

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

The mended navy bowl at left, "Things change. The work holds.", two short paragraphs, the button and a small note
9 fields
Connection

"The connection is the capability." beside the ceramic fragments, then three ruled statements and four verbs
9 fields
Standard

Navy band: "Working once is not enough.", six conditions in a 3 by 2 grid and an expand link for fuller text
29 fields · has its own script
Real-world work

Four quoted problems, such as "Our service can't keep up.", each beside its answer in ruled rows
11 fields
How we work

"One process. A working operation." with three numbered steps joined by thin horizontal arrows
9 fields
The group

"Different work. Shared foundations." with four placeholder group companies in divided columns
10 fields
CTA

"The next connection is yours." at left and a labelled first name, last name and work email form at right
12 fields · has its own script
Footer

Large Keelstone wordmark between rules, the tagline, People. Intelligence. Operations. and Back to top
6 fields

Design notes

The first screen is pale apricot. A large midnight blue bowl repaired with silver seams fills the left half and bleeds off the edge, and on the right a light Inter headline reads "Things change. The work holds." above two short paragraphs and a dark chocolate rectangular button. A small note sits at the bottom right.

The page stays on apricot as it continues: the connection heading beside three navy ceramic fragments joined with silver, then three ruled statements (AI moves fast, Keelstone connects, Your operation holds). A single navy band holds the six standards in a ruled three by two grid. After it come four problem and answer rows in two ruled columns, three process steps joined by thin arrows, a four-column group of placeholder companies, the form and a large wordmark between rules.

The ceramics carry the whole idea: the bowl appears once in the hero, and the fragment study takes the metaphor into the connection section. All type is one family in light weights (400 to 500), so the page feels quiet and printed. The "Explore the Keelstone standard" link opens the fuller standard descriptions on the page itself.

Shape and spacing

Square corners, dark rectangular buttons, thin horizontal and vertical rules, and a content width of 89.2% up to 1680px.

Images

2 generated images as WebP (the silver-mended navy bowl, three navy ceramic fragments joined with silver). They are generated for the template, with no text, real logos or recognizable people in them.

Typefaces

InterWordmark, headings, body copy, labels and buttons (weights 400 to 500, tight tracking on headings)

Loaded from Google Fonts.

Colors

Apricot #F3D0B9Page background and text on the navy band
Chocolate #2D211AHeadings, body text and buttons
Midnight #101E2CThe standards band
Warm rule #A28E7CDivider lines on apricot
Light rule #8E9397Divider lines on the navy band

What works on the page

On phones the menu button animates open, and Escape closes it.
"Explore the Keelstone standard" expands the six standards in place with their fuller descriptions, by pointer or keyboard.
The form uses required fields and email validation, then swaps itself for an animated thank-you that says no details were sent.
A back-to-top link sits in the footer; motion is 320ms and turns off under reduced-motion settings.

Who Built for Continuity fits

An AI consulting firm that wants a calm, warm page that reads like a printed brochure.

A business that sells resilience or recovery, where the mended bowl says it without extra words.

A company with several units or brands to show, using the four-column group section.

Anyone who wants a single typeface and only two images to replace.

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

The full Built for Continuity homepage template from header to footer at 1440 pixels wide

Questions about Built for Continuity

What does the Explore the Keelstone standard link do?

It expands the six standards on the page and shows a longer line for each, such as "Retries, reroutes, and recovers when things fail." It works by mouse, touch and keyboard, and the full text stays readable with JavaScript off.

Can I replace the ceramic bowl image?

The hero image is a 1536 by 1024 WebP and the fragments image is 1400 by 700. Any still life of the same proportions works; keep the left side of the hero image strong because the bowl bleeds off the left edge.

Which fonts does Built for Continuity use?

Only Inter, in weights 400 to 500, loaded from Google Fonts with Arial as the fallback. The headings use tight letter spacing and balanced line wrapping.

Does the form send messages?

The form checks the required fields and email format, then replaces itself with a thank-you that says your details have not been sent. Connect it to your HubSpot form, a WordPress form plugin or an endpoint at /contact to receive messages.

Are the Keelstone group companies real?

Keelstone, Marrow Lane, Sotherby Foods and all the copy are placeholders to replace with your own. Free to use and adapt for personal and commercial sites.