AI services homepage templateFree8 sections

Still Point:violet lavender minimalist AI services homepage template for Astro, HubSpot and WordPress

A homepage in two colors, electric violet and pale lavender, that opens on a black and white atrium where everyone blurs past except one person standing in a square of sunlight. The rest of the page is light type, square node diagrams and violet rules on one lavender canvas.

Open live demo Downloads

Sections: 8, 3 with their own script
Editable fields: 97 in HubSpot and WordPress
Typefaces: Inter
Image files: 2
Downloads: Astro 275 KB, HubSpot 996 KB, WordPress 868 KB
Look: Light background
Collections: AI services, One page, Minimalist
Framer: Coming soon

Still Point AI services homepage template, first screen on a 1440 pixel wide desktop

Still Point 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: Calmont, a fictional company that builds and runs AI systems for other businesses.

Download Still Point

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

Astro

still-point-astro.zip · 275 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 still-point-astro.zip; it holds one folder, still-point.
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 (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

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

Change the content

Each of the 8 sections is a module with its own fields, 97 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 Still Point - 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

still-point-wordpress.zip · 868 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 still-point-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 8 sections is a block with its own fields, 97 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 "Still Point". 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 still_point_ and still-point/.

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 Still Point

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

Header

Calmont text wordmark, three anchor links and an outlined Bring us the mess button on a lavender bar
11 fields · has its own script
Hero

Violet column with "Keep moving. Keep control.", intro and pill button beside the monochrome atrium photo
9 fields
Two speeds and the connection

"Two speeds. One working world.", two ruled copy columns and four square nodes from Understand to Recover
14 fields
Standard

"Six conditions. One working operation." in a three by two ruled grid with "Pass all six. Then call it agentic."
21 fields
Possibilities

Colleagues photo beside a customer example, then three expandable rows: Retention, Scale, Research
16 fields · has its own script
How we work

"One process. A working operation." with three numbered steps joined by thin lines
8 fields
CTA

Violet panel with "The next connection is yours." and an outlined first name, last name and work email form
12 fields · has its own script
Footer

Small lavender footer with the Calmont wordmark, tagline, People. Intelligence. Operations. and the domain
6 fields

Design notes

The first screen splits in two: a solid electric violet column on the left with "Keep moving. Keep control." in large, light lavender type, and a black and white overhead photo of a concrete atrium on the right. People blur as they walk through it, and one person stands sharp in a bright square of light. A rounded lavender button sits under the intro.

The page then runs on one lavender canvas with violet text. "Two speeds. One working world." sits over two ruled copy columns and four square nodes joined by lines (Understand, Coordinate, Deliver, Recover). The six conditions follow in a three by two ruled grid, then a black and white photo of two colleagues reviewing papers beside a customer example, three expandable rows, and three connected process steps. A violet panel holds the form, and a small lavender footer closes the page.

The whole page uses one hue in two strengths plus black and white photos, which makes it look calm and deliberate. The only images are the atrium and the colleagues; the node diagram and process lines are CSS. Buttons are full pills, a contrast to the square nodes.

Shape and spacing

Pill buttons (999px radius), square diagram nodes, fine violet rules, desktop gutters of 4.3vw and 24px on a phone.

Images

2 generated images as WebP (the black and white atrium with one still person, two colleagues reviewing papers). They are generated for the template, with no text, real logos or recognizable people in them.

Typefaces

InterWordmark, headings, body copy, labels and buttons (weight 400, with 450 and 500 available)

Loaded from Google Fonts.

Colors

Lavender #E5DFFFPage background, hero type and the hero button
Electric violet #4022DCHero column, contact panel and main text
Dark violet #2913B5Ink for headings and body text
Violet rule #9B8BD3Fine divider lines and outlined fields

What works on the page

On phones a menu button opens the navigation, and Escape closes it.
The three rows in What becomes possible (Retention, Scale, Research) open and close one by one with a plus sign.
The form uses required fields and email validation, then fades into a thank-you that says nothing was sent.
Transitions run at 320ms; reduced-motion settings turn off transitions and the form animation.

Who Still Point fits

An AI consultancy that wants a calm page with one brand color and black and white photography.

A firm whose message is people staying in control, which the still figure in the atrium shows.

A brand with a single strong color: swap the violet and lavender and the whole page follows.

Any small company that wants a short, clear homepage with only two photos to replace.

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

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

Questions about Still Point

Can I use a different brand color instead of violet?

The page runs on four custom properties: lavender, electric violet, dark violet and the rule color. Set them to a light and a strong shade of your own hue and every section, button and rule changes with them.

What is in the hero photo?

A generated black and white overhead photo of a concrete atrium, with about twelve blurred people around one person standing still in a square of sunlight. Any square-ish monochrome photo works as a replacement; the file is 1254 by 1254 pixels.

What do the expandable rows show?

Each of the three rows (Retention and engagement, Scale and process, Research and intelligence) opens to show the problem it answers, such as "We see the risk too late." With JavaScript off they stay open and readable.

Does the form send messages?

The form checks required fields and email format, then shows "Thank you. Your next connection starts here." and sends nothing. Point it at HubSpot forms, a WordPress form plugin or your own /contact endpoint.

Is Calmont a real company?

Calmont, calmont.example and all the copy are placeholders. Free to use and adapt for personal and commercial sites.