AI services homepage templateFree8 sections

Operating Atlas:mint swiss cartographic AI services homepage template for Astro, HubSpot and WordPress

An AI services homepage drawn like a transit atlas. A fine etched city map fills the right of the first screen with a vermilion route through four numbered checkpoints, and that same red line keeps winding down the page, linking each section until it ends at the contact button.

Open live demo Downloads

Sections: 8, 5 with their own script
Editable fields: 116 in HubSpot and WordPress
Typefaces: Anton, Barlow Condensed, Inter
Image files: 1
Downloads: Astro 322 KB, HubSpot 1.4 MB, WordPress 1.3 MB
Look: Light background
Collections: AI services, Tech
Framer: Coming soon

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

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

Download Operating Atlas

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

Astro

operating-atlas-astro.zip · 322 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-atlas-astro.zip; it holds one folder, operating-atlas.
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-atlas-hubspot.zip · 1.4 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.

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

Change the content

Each of the 8 sections is a module with its own fields, 116 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 Atlas - 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-atlas-wordpress.zip · 1.3 MB

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-atlas-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, 116 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 Atlas". 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_atlas_ and operating-atlas/.

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 Atlas

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

Header

Heavy Meridell wordmark, three section links and an outlined "Bring us the mess" button on a thin rule
11 fields · has its own script
Hero

Huge "Possibility, put to work." beside the etched city map with a red route through four numbered checkpoints
16 fields
The connection

"Fast intelligence. Solid ground." with AI versus your operation, then dotted inputs converging on four checkpoints
16 fields · has its own script
Our benchmark

Near-black band: "The Meridell standard", the six conditions in two numbered columns and "Pass all six."
22 fields
Possibilities

Four ruled rows pairing a client quote with its outcome, each tied to the winding red route by a black junction
19 fields · has its own script
Built and operated

"One process. Built, then operated." with a three-step route and two fictional clients, Ashcombe Freight and Torvane
13 fields · has its own script
CTA

"The next connection is yours." beside first name, last name and work email fields, with the route ending at submit
12 fields · has its own script
Footer

Large Meridell wordmark and tagline, meridell.example and a Back to top link in one ruled row
7 fields

Design notes

The first screen is a flat pale mint field. "Possibility, put to work." stacks down the left third in enormous black Anton type, above a short intro and a black "Bring us the mess" button. The right two thirds hold a detailed etched map of a fictional city and river, with a thick vermilion route passing four black numbered checkpoints: Understand, Coordinate, Deliver, Recover.

The connection section sets "Fast intelligence. Solid ground." against two short columns, then dotted inputs on the left converge into one red line through the four checkpoints. A near-black benchmark band titled "The Meridell standard" lists the six conditions in two columns, four editorial rows pair each client quote with its outcome, and a three-step route introduces two fictional example clients before the contact form and a ruled footer.

The red route is the unusual part. After the hero it bends down the right edge, passes hollow checkpoints beside the benchmark, snakes through black junctions next to each possibility, and stops beside the submit button. It is drawn in SVG and recalculated by script so it meets each section's dots at any screen width.

Shape and spacing

Square buttons and fields, hairline rules, round black and hollow checkpoint markers on the route, gutters of 22 to 80px and a 32px base spacing.

Images

1 generated image as WebP (the etched fictional city atlas in the hero). The route, checkpoints, labels and the other diagrams are SVG, CSS and HTML. They are generated for the template, with no text, real logos or recognizable people in them.

Typefaces

AntonLarge display headings such as the hero, section titles and the closing headline
Barlow CondensedSecondary headings, condition names, checkpoint numbers and map labels (600 to 800)
InterBody copy, navigation, buttons, form fields and the Meridell wordmark (400 to 900)

Loaded from Google Fonts.

Colors

Mint #D1EEE2Page background and the type on the benchmark band
Ink #080F0DHeadlines, text, checkpoints, buttons and the benchmark band
Vermilion #FF532DThe continuous route line and its arrows
Divider #7D9B8EHairline rules between rows and columns

What works on the page

Header links scroll smoothly to sections on the same page; below 1000px a Menu button opens the links, closes with Escape and finishes closing before it scrolls.
The vermilion route redraws itself whenever the layout changes so it stays joined to the junction dots in each section.
The contact form checks the required fields and email format, then animates to a thank-you that says the demo has not sent your details. The route then ends beside the message.
Transitions run at 320ms and are off under reduced-motion settings. The footer has a Back to top link.

Who Operating Atlas fits

An AI firm that wants a confident, graphic-design-studio look with huge type and a single strong accent.

A company that talks about routes, flows and handoffs, where one line running through the page tells the story.

Teams that want only one image to replace, since the map is the single picture and the rest is code.

Operations, logistics or automation services that would feel at home with map and transit references.

See the whole page as one image (1080 by 3256 pixels, 211 KB)

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

Questions about Operating Atlas

How does the red line follow the page?

Each section draws its own part of the route in SVG, and a small script measures the junction dots and redraws the path whenever the layout or fonts change. You can edit the rows and steps freely and the line will still meet them.

Can I replace the city map?

Swap atlas.webp in the assets folder for your own image of about 1200 by 800 pixels. The checkpoint labels and the hero route are HTML and SVG on top, so you may want to adjust their positions to suit a new picture.

Which fonts does Operating Atlas load?

Three Google Fonts: Anton for the largest headings, Barlow Condensed for secondary headings and numbers, and Inter for text and the wordmark. All use display swap with local fallbacks.

Are Ashcombe Freight and Torvane real clients?

Both names are fictional examples, like Meridell itself and all the copy. Replace them with your own clients or remove the row. Free to use and adapt for personal and commercial sites.

What does the contact form do on submit?

It checks the fields and email format, then animates to "Thank you. Your next connection starts here." with a note that nothing was sent. The form action is /contact, ready for your own form service.