AI services homepage templateFree9 sections

Stable Axis:signal yellow industrial AI services homepage template for Astro, HubSpot and WordPress

A signal yellow homepage built around a precision gyroscope: a red rotor spins inside steel rings while the axis stays still. Heavy black type does most of the work, and a near-black middle band carries a lit diagram of how intelligence passes through an operating layer to the business.

Open live demo Downloads

Sections: 9, 3 with their own script
Editable fields: 107 in HubSpot and WordPress
Typefaces: Inter
Image files: 3
Downloads: Astro 261 KB, HubSpot 946 KB, WordPress 654 KB
Look: Light background
Collections: AI services, Agency, Tech
Framer: Coming soon

Stable Axis AI services homepage template, first screen on a 1440 pixel wide desktop

Stable Axis 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: Axelby, a fictional company that builds and runs AI systems for other businesses.

Download Stable Axis

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

Astro

stable-axis-astro.zip · 261 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 stable-axis-astro.zip; it holds one folder, stable-axis.
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

stable-axis-hubspot.zip · 946 KB

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

Change the content

Each of the 9 sections is a module with its own fields, 107 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 Stable Axis - 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

stable-axis-wordpress.zip · 654 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 stable-axis-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, 107 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 "Stable Axis". 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 stable_axis_ and stable-axis/.

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 Stable Axis

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

Header

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

Steel gyroscope photo on the left, heavy black headline, intro, square black button and the speed and strength line
8 fields
Contrast

"Possibility moves. Your business holds." with Fast by nature and Steady by design in two ruled columns
6 fields
Connection

Dark band with the lit SVG node diagram, Intelligence to operating layer to operation, and the four-step ruled row
10 fields
Standard

"Pass all six. Then call it agentic." with the six conditions in yellow on a dark ruled grid of two columns
21 fields
Possibilities

Four quoted client problems as accordion rows with outcomes; the first opens to the linked rotors image
22 fields · has its own script
How we work

"One process. Built to keep working." with a workbench photo beside three numbered steps
12 fields
CTA

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

Axelby. wordmark and tagline on the left, People. Intelligence. Operations. and the domain on the right
6 fields

Design notes

The first screen is flat yellow. A large photo of a brushed steel gyroscope with a red rotor fills the left, and the right holds "AI moves fast. We build what holds." in heavy, tightly tracked black Inter, the intro and a square black button. A thin black rule and the line "The speed of innovation. The strength to put it to work." close the hero.

The contrast section stays on yellow with "Possibility moves. Your business holds." over two ruled columns. Then the page turns near-black for the connection and the six-condition grid, with yellow headings and pale text. It returns to yellow for four accordion rows of quoted client problems, a workbench photo beside three numbered steps, the contact form and a footer with the Axelby. wordmark.

The connection diagram is the unusual part. It is drawn in SVG with metallic gradients and glows: a red lit node for intelligence, a steel cylinder for the operating layer and a white node for the operation, joined by red incoming lines and white outgoing arrows, with Understand, Coordinate, Deliver and Recover in a ruled row beneath.

Shape and spacing

Square buttons and inputs, thin ink rules between rows and columns, 7px corners on the photographs only, and content at 90% of the window up to 1740px.

Images

3 generated images as WebP (the steel gyroscope with red rotor, hands wiring red cables on a yellow workbench, three linked rotors in the first open problem row). They are generated for the template, with no text, real logos or recognizable people in them.

Typefaces

InterAll text; headings at weight 750 with tight tracking, body and navigation at 400 to 500 (weights 400 to 800 loaded)

Loaded from Google Fonts.

Colors

Signal yellow #FFEB38Main page background and headings on the dark band
Ink #101211Headings, text, rules and buttons on yellow, and the dark middle band
Pale gray #E4E4DFBody text and rules on the dark band

What works on the page

Header links and the button stay on one line on desktop; below 1000px a menu button opens them, and Escape or a link closes it.
Four problem rows work as accordions by click, touch, Enter or Space; the first opens to the rotors image and an Understand, Connect, Resolve or escalate line.
The contact form checks required fields and the email format, then shows an animated thank-you that says the demo has not sent your details and moves focus to it.
Anchor links scroll smoothly, and all transitions turn off under reduced-motion settings.

Who Stable Axis fits

An AI engineering or automation firm that wants to look precise and mechanical, with real objects in place of abstract glow.

A company that wants one loud brand color and heavy type to stand out from the usual blue and purple AI sites.

A team that needs a diagram of how its system sits between AI models and the business, already drawn in SVG.

Anyone who wants a yellow and black page that still reads calmly, thanks to the dark middle band and ruled grids.

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

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

Questions about Stable Axis

Is the connection diagram an image?

The diagram is SVG with HTML labels, using metallic gradients and glows. That keeps the nodes, lines and labels aligned at every width, and you can edit the three labels as text.

Can I use a different color instead of yellow?

The page uses three custom properties at the top of the stylesheet: yellow, ink and paper. Change the yellow value and every yellow section and heading on the dark band follows. Pick a color that keeps black text readable, or swap ink and paper for a dark version.

How many photos would I need to replace?

Three WebP files: the gyroscope (1200 by 1200), the workbench (1400 by 739) and the rotors that appear in the first open accordion row (1100 by 550). None of them contains text, so you can swap them without editing anything else.

Does the contact form send email?

The form validates and shows a thank-you message, and sends nothing. It keeps action="/contact" so you can point it at your own handler, a HubSpot form or a WordPress form plugin.

Is Axelby a real company?

Axelby, axelby.example and all the copy are placeholders for an AI services firm. Replace the wordmark and the words with your own. Free to use and adapt for personal and commercial sites.