AI services homepage templateFree8 sections

Operating Score:ivory editorial serif AI services homepage template for Astro, HubSpot and WordPress

A warm ivory homepage that borrows from a printed orchestral score. Loose ink notes at the top left settle into three ordered staves, and the rest of the page keeps that rhythm with staff-like rules, red arcs between steps and a musical repeat sign drawn in vermilion.

Open live demo Downloads

Sections: 8, 2 with their own script
Editable fields: 90 in HubSpot and WordPress
Typefaces: Bodoni Moda, Inter
Image files: 1
Downloads: Astro 147 KB, HubSpot 518 KB, WordPress 397 KB
Look: Light background
Collections: AI services, Consulting, Minimalist
Framer: Coming soon

Operating Score AI services homepage template, first screen on a 1440 pixel wide desktop

Operating Score 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: Stavework, a fictional company that builds and runs AI systems for other businesses.

Download Operating Score

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

Astro

operating-score-astro.zip · 147 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 operating-score-astro.zip; it holds one folder, operating-score.
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

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

Change the content

Each of the 8 sections is a module with its own fields, 90 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 Operating Score - 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

operating-score-wordpress.zip · 397 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 operating-score-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, 90 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 "Operating Score". 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 operating_score_ and operating-score/.

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 Operating Score

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

Header

Stavework. wordmark with a red period, three anchor links and an outlined "Bring us the mess" button
11 fields · has its own script
Hero

Ink music score drawing with a vermilion rule, three-line Bodoni headline, short intro and a vermilion button
7 fields
Connection

Four steps from Understand to Recover joined by red arcs on a staff-like line, with a bracketed caption
13 fields
Standard

"Six conditions. One working operation." in a three-by-two grid, closed by the agentic line in vermilion serif
21 fields
Possibilities

Four static rows: a serif client problem, a red arrow and the outcome in plain sans serif
10 fields
Operating partnership

Red repeat sign, three partnership steps and three fictional clients: Pellow Freight, Cardine and Mossway Health
14 fields
CTA

"The next connection is yours" and a three-field form with underlined inputs, split by a vermilion rule
10 fields · has its own script
Footer

Stavework. wordmark, the serif tagline, a copyright line and People. Intelligence. Operations.
4 fields

Design notes

The first screen is ivory paper. An ink illustration of scattered notes resolving into three staves fills the left, crossed by a thin vermilion vertical rule. On the right, "AI moves fast. We build what holds." is set in large black Bodoni Moda over a short Inter paragraph and a square vermilion button.

The page keeps one continuous ivory canvas. The connection section runs four steps along a staff-like line joined by three red arcs, then a centered serif heading opens the six conditions in a three-by-two grid that ends with "Pass all six. Then call it agentic." in vermilion serif. Four static problem rows follow with red arrows, then the partnership section, three example clients, a contact form split by a red vertical rule and a ruled footer.

The ornaments are the unusual part, and all but the hero drawing are SVG and CSS: the red arcs over the steps, a bracket caption under them ("New intelligence enters. People stay in control.") and a large red repeat sign of two bars and two dots beside "Built for the work that has to hold." There are no photographs anywhere.

Shape and spacing

Square buttons and no rounded cards, thin stone rules between columns and rows, content at 86% of the window up to 1320px, and 64 to 100px between sections.

Images

1 generated image as WebP (the ink music score in the hero); the arcs, repeat sign and inline favicon are SVG and CSS. They are generated for the template, with no text, real logos or recognizable people in them.

Typefaces

Bodoni ModaEditorial headings, step names, problem rows and the vermilion benchmark line (weight 600)
InterBody copy, navigation, labels, buttons and the Stavework wordmark (weights 400 to 600)

Loaded from Google Fonts.

Colors

Paper #F4F1E8The background of the whole page
Ink #11110FHeadings and the wordmark
Graphite #353735Body text
Vermilion #BF432DButtons, the hero rule, connection arcs, numbers, arrows, the repeat sign and the contact divider
Stone #AAA99FThin dividing rules

What works on the page

On phones the header becomes a menu button; the navigation opens with an animated height and closes on a link or Escape.
The problem rows are static statements with arrows, so everything is visible without clicking.
The contact form uses required-field and email checks, then replaces itself with a thank-you that says the demo has not sent your details, without shifting the layout.
Animation and smooth scrolling switch off under reduced-motion settings.

Who Operating Score fits

An AI consulting or advisory firm that wants a calm, printed look with a serif voice and no stock photography.

A firm that sells coordination and discipline, where the score and staff lines make that point without a dashboard.

A small team that wants a page that is simple to maintain: one image, static rows and one color accent.

Anyone who wants a light page with clear reading order that works as well for a law, finance or operations consultancy.

See the whole page as one image (1080 by 3218 pixels, 155 KB)

The full Operating Score homepage template from header to footer at 1440 pixels wide

Questions about Operating Score

Can I swap the music score for my own artwork?

The score is one WebP file, operating-score.webp, 1316 by 1195 pixels. CSS fades its paper edge into the page, so a replacement on a similar ivory background blends best. The vermilion rule that crosses it is CSS and stays in place.

Which fonts does the template load?

Bodoni Moda at weight 600 for headings and Inter at 400 to 600 for everything else, both from Google Fonts. Georgia and Arial are set as fallbacks if the fonts do not load.

Are the problem rows clickable?

The four rows are static statements with an arrow between problem and outcome, so all the text is visible at once. That keeps the section simple to edit in HubSpot or WordPress.

How do I change the vermilion accent?

The colors are custom properties at the top of the stylesheet: paper, ink, body text, vermilion and rules. Change the vermilion value and the buttons, arcs, numbers, arrows and repeat sign all follow.

Does the contact form send anything?

The form validates and shows a thank-you message, and sends nothing. It keeps action="/contact" so you can connect your own handler. Stavework and the three client names are placeholders to replace.