AI services homepage templateFree9 sections

Fast Steady:bold typographic poster AI services homepage template for Astro, HubSpot and WordPress

An AI services homepage made entirely of type and color. The hero stacks two poster-sized words, an italic serif "Fast." on coral and a heavy upright "Steady." on pale butter, with a navy band between them that carries the headline and the button. The rest of the page keeps the same coral, butter and navy blocks and mixes bold sans headings with italic serif phrases.

Open live demo Downloads

Sections: 9, 3 with their own script
Editable fields: 106 in HubSpot and WordPress
Typefaces: DM Sans, Libre Caslon Text
Image files: 0
Downloads: Astro 17 KB, HubSpot 116 KB, WordPress 114 KB
Look: Light background
Collections: AI services, Agency
Framer: Coming soon

Fast Steady AI services homepage template, first screen on a 1440 pixel wide desktop

Fast Steady 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: Pacelyn, a fictional company that builds and runs AI systems for other businesses.

Download Fast Steady

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

Astro

fast-steady-astro.zip · 17 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 fast-steady-astro.zip; it holds one folder, fast-steady.
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

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

fast-steady-wordpress.zip · 114 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 fast-steady-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 "Fast Steady". 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 fast_steady_ and fast-steady/.

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 Fast Steady

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

Pacelyn wordmark, three section links and an outlined "Bring us the mess" button on a warm-white band
11 fields · has its own script
Hero

Italic "Fast." on coral, the navy band with "AI moves fast. We build what holds.", and heavy "Steady."
7 fields
Connection

"The connection is the capability." with a three-box AI, Pacelyn, Your operation flow on butter
9 fields
How we work

"One process. A working operation." with three coral-numbered steps and the four-verb line
12 fields
Standard

"Six conditions. One operation." in a ruled 3 by 2 grid on navy, closing with a butter strip
21 fields
Possibilities

Four client problems in expandable rows with short outcomes; the first, on coral, is open
15 fields · has its own script
The group

"One group. Close to the work." with three placeholder groups set as a table on butter
11 fields
CTA

"The next connection is yours." on coral with a form card for first name, last name and work email
13 fields · has its own script
Footer

Huge Pacelyn wordmark on navy, the italic tagline, the placeholder domain and Back to top
7 fields

Design notes

Under a slim warm-white header, the first screen is split into horizontal color fields. "Fast." fills the coral field in a huge, stretched Libre Caslon italic, a navy band reads "AI moves fast. We build what holds." with a white button, and "Steady." fills the butter field below in heavy DM Sans.

The connection stays on butter with a three-box AI, Pacelyn, Your operation flow. How we work sits on warm white with big coral step numbers, the six conditions sit on navy in a ruled 3 by 2 grid with a butter closing strip, then come four problem rows with the first highlighted coral, a butter table of three placeholder groups, a coral contact block with a white form card and a navy footer with an enormous wordmark.

There are no images at all: every letter, box, rule and arrow is live HTML and CSS. The display words are real text stretched sideways with CSS, so they stay sharp and editable, and every section heading pairs a bold sans line with an italic serif line to echo the Fast and Steady contrast.

Shape and spacing

Square corners everywhere, thin ruled dividers between columns and rows, and content set at 88 to 90% of the screen width with full-bleed color fields.

Images

0 image files: every drawing is SVG and CSS.

Typefaces

DM SansThe wordmark, "Steady.", headings, body copy, buttons and the big step numbers (weights 400 to 1000)
Libre Caslon Text"Fast." and the italic phrase in each heading and the footer tagline (700 italic)

Loaded from Google Fonts.

Colors

Ink navy #0C2D3BDisplay type, text, the hero band, the standard section and the footer
Coral #FB6548The "Fast." field, step and condition numbers, the open problem row and the contact block
Butter #F9EDB9The "Steady." field, the connection, the group table and the italic subtitles on navy
Paper #F8F7EFThe header, How we work, the problem rows and the form card

What works on the page

Header links jump to sections on the page; below 850px they move into a Menu button that closes with Escape.
The four problem rows open and close by mouse, touch or keyboard with plus and minus controls; the first starts open.
The form uses required fields and email checks, then shows an animated thank-you that says it is a demo and nothing was sent.
A Back to top link sits in the footer, motion is off under reduced-motion settings, and the page stays readable without JavaScript.

Who Fast Steady fits

An AI agency or studio that wants a loud, poster-like page that people remember, with no photography at all.

A team that has no images to source: the whole design is type and color, so new copy is the only real change.

A brand that likes warm, print-inspired colors and a mix of heavy sans and italic serif type.

Anyone who needs a very small download: the Astro version is about 17 KB.

See the whole page as one image (1080 by 3506 pixels, 187 KB)

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

Questions about Fast Steady

Does Fast Steady use any images?

None. The assets folder is empty, and the big words, boxes, rules and arrows are all HTML and CSS. That keeps the Astro download to about 17 KB.

Can I change the words "Fast." and "Steady."?

They are live text, so you can type any word into them. They are stretched sideways with CSS and sized to the screen width, so short words of a similar length fit best.

Which fonts does it load?

DM Sans in weights 400 to 1000 and Libre Caslon Text in bold italic, both from Google Fonts, with Arial and Georgia as fallbacks. The small spaced labels above each section use the system monospace font.

How do I change the coral, butter and navy?

The four colors are custom properties at the top of the stylesheet. Change the hex values there and every color field, number and button follows.

Does the contact form send messages?

The form checks the fields and shows a thank-you that says it is a demo and nothing was sent. Connect it to your own form service, or use the HubSpot or WordPress form tools, to receive messages. The Pacelyn name and the groups are placeholders.