The revenue systemBrings buyers to you.
Add-onsSales and RevOps, on top of the system.
Built onceThe foundation every process runs on.
Anthony Hsiao, CEO, Matterway Customer story The squeezing the lemon theme really struck gold. Anthony HsiaoCEO, Matterway Instant price From $1,999 a month Pick the processes you need and see your monthly price before you talk to anyone. See your instant price
Talk to sales All processes and prices

AI services homepage templateFree8 sections

Possibility Shelter:coral cobalt illustrated AI services homepage template for Astro, HubSpot and WordPress

An AI services homepage told in flat, screen-printed illustrations. In the hero a big coral canopy keeps a cobalt storm of brush strokes off a small team at their desks, and each later section gets its own scene, from stacked building blocks to a researcher with a magnifying glass.

Sections
8, 2 with their own script
Editable fields
93 in HubSpot and WordPress
Typefaces
Roboto
Image files
7
Downloads
Astro 513 KB, HubSpot 1.3 MB, WordPress 876 KB
Look
Light background
Framer
Coming soon

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

Download Possibility Shelter

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

Astro

possibility-shelter-astro.zip · 513 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.

  1. Unzip possibility-shelter-astro.zip; it holds one folder, possibility-shelter.
  2. In that folder run npm install (Node 22.12 or newer).
  3. Run npm run dev and open http://localhost:4321.
  4. Edit the copy in src/components, the colors and type in src/styles/global.css, and the images in public/assets.
  5. 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 (8 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

possibility-shelter-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.

  1. Install the HubSpot CLI: npm install -g @hubspot/cli (Node.js 20 or newer).
  2. Run hs account auth and paste a personal access key with Design Manager ticked.
  3. Unzip possibility-shelter-hubspot.zip, then from the folder that holds possibility-shelter run hs cms upload possibility-shelter possibility-shelter.
  4. In HubSpot go to Content > Website Pages > Create > Website page, click the theme name under the search box, find Possibility Shelter and click Set as active theme.
  5. Choose the template Possibility Shelter - Home.
More from the HubSpot README

Change the content

  • Each of the 8 sections is a module with its own fields, 93 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 Possibility Shelter - 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

possibility-shelter-wordpress.zip · 876 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.

  1. In WordPress go to Appearance > Themes > Add New Theme > Upload Theme.
  2. Choose possibility-shelter-wordpress.zip, then Install Now and Activate.
  3. Open the site: the homepage shows the template, whatever Settings > Reading says.
  4. 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 8 sections is a block with its own fields, 93 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 "Possibility Shelter". 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 possibility_shelter_ and possibility-shelter/.

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 8 sections of Possibility Shelter

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

  1. Header

    Navy Covehold wordmark with a coral C mark, three section links and an outlined "Bring us the mess" button

    11 fields · has its own script
  2. Hero

    "AI moves fast. We build what holds." beside a coral canopy shielding four workers from a cobalt brush storm

    8 fields
  3. Two realities

    Two Realities: flying shapes for possibility that never stands still, a person stacking blocks for solid ground

    11 fields
  4. Connection

    "The connection is the capability." with blue shapes converging into four coral icon steps and a link to the standard

    9 fields
  5. Our benchmark

    Navy band with the six conditions in a ruled three by two grid, each with a coral SVG icon and coral number

    22 fields
  6. Capability in the real world

    Four client problems in a two by two grid, each paired with its own illustration and a two-line outcome

    18 fields
  7. CTA

    Coral band: "The next connection is yours." with a curved navy line beside ivory name and work email fields

    10 fields · has its own script
  8. Footer

    Ivory footer with the wordmark and mark, "The work beneath the work." and "People. Intelligence. Operations."

    4 fields

Design notes

The first screen is warm ivory with a navy Covehold wordmark and a coral circular C mark. "AI moves fast. We build what holds." sits large in bold navy Roboto on the left, above the intro and a coral "Bring us the mess" button. On the right a flat illustration shows a coral canopy on two legs, four small figures working and passing a document beneath it, and dense cobalt brush strokes with coral and white confetti sweeping above.

Two Realities splits into equal columns with a fine divider: flying blue and coral shapes for "Possibility doesn't stand still", and a person stacking blocks for "Your business needs solid ground". The connection draws loose blue shapes converging into coral lines and four coral icon circles. A navy band holds the six conditions in a ruled three by two grid with coral icons, then a two by two grid pairs each client problem with an illustration, before a coral contact band and a plain ivory footer.

Every section has its own picture, so the page reads like an illustrated magazine feature: conversation, a signal tower with an observer, a person pushing a document, a researcher with a magnifying glass. The six benchmark icons (layers, infinity, check, connected squares, a branching arrow, papers) and the workflow are drawn in SVG, not raster art.

Shape and spacing

Square buttons and fields, circular diagram nodes, fine rules between columns and grid cells, side margins of 4.5% of the page width and 16 to 72px interior spacing.

Images

7 generated illustrations as WebP (the hero shelter and storm, flying shapes, building blocks, a conversation, a signal tower, a person moving a document, a researcher with a magnifying glass). They are generated for the template, with no text, real logos or recognizable people in them.

Typefaces
  • RobotoEverything: bold, tightly set headlines, body copy, labels, navigation, buttons and the wordmark (weights 400 to 700)

Loaded from Google Fonts.

Colors
  • Paper #F7F4EAMain page background and the form fields
  • Ink navy #082344Headlines, text, the benchmark band and the submit button
  • Coral #FF624DHero button, canopy, icons, section numbers and the contact band
  • Cobalt #0866EFThe storm brush marks and loose shapes in the illustrations
  • Rule gray #8F9BA3Fine dividing rules
What works on the page
  • Header links jump to sections on the same page; on phones an animated Menu toggle opens the links and closes with Escape, returning focus to the button.
  • The contact form checks the required fields and email format, then an animated thank-you replaces it and explains that no information was sent.
  • There are no accordions or tabs: every section is static, as in the design, and the connection steps turn vertical on phones.
  • Transitions run at 320ms and are turned off under reduced-motion settings.

Who Possibility Shelter fits

An AI agency or studio that wants a warm, friendly page built on illustration instead of photography or dark tech visuals.

A company that wants to show people at the center of its AI work, since every scene has small human figures.

Teams that like a clear, conventional layout with bright coral and cobalt, easy to read for non-technical buyers.

Anyone who wants a single-font setup: Roboto handles every heading and line of text.

See the whole page as one image (1080 by 3340 pixels, 195 KB)
The full Possibility Shelter homepage template from header to footer at 1440 pixels wide

Questions about Possibility Shelter

Can I change the colors of the illustrations?

The seven scenes are WebP image files, so their coral and cobalt are part of the artwork; replace them with your own art at the same file names to change them. The six benchmark icons and the workflow are SVG, so they follow the custom properties in the stylesheet.

How many images will I need to replace?

Seven illustrations sit in the assets folder: the hero shelter, two contrast scenes and four capability scenes. Each section uses its own picture once, so you can swap them one at a time.

Which font does Possibility Shelter use?

Only Roboto, loaded from Google Fonts in weights 400 to 700, with Arial as the fallback if Google Fonts does not load.

What happens when someone submits the contact form?

The browser checks the fields and email format, then an animated thank-you takes the form's place and says nothing was sent or stored. The form action is /contact, so connect your own form service there.

Is Covehold a real company?

Covehold, its C mark and all the copy are placeholders for your own brand. Free to use and adapt for personal and commercial sites.

More AI services templates like Possibility Shelter

Same content, different designs. Possibility Shelter is listed in AI website templates, Business homepage templates, One page website templates, Landing page templates, Homepage templates, HubSpot themes and WordPress block themes. Or browse the full gallery.

AI servicesLight9 sections

Continuity Board

Black and ivory AI services homepage with a full-width split-flap board spelling WORK and small electric violet squares.

  • Astro
  • HubSpot
  • WordPress
  • Framer soon

AI servicesLight8 sections

Operating Certificate

A fuchsia, type-led page: a huge condensed black headline beside a tilted paper certificate with six green check marks.

  • Astro
  • HubSpot
  • WordPress
  • Framer soon

AI servicesLight8 sections

Human Handoff

A tangerine campaign page: huge black italic headline over two hands passing an ivory block, then cream and orange bands.

  • 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.

Download the template

Free. Tell us who you are once and every template downloads straight away.

No newsletter unless you tick the box. Privacy policy