AI services homepage templateFree9 sections

Working World:isometric pixel art AI services homepage template for Astro, HubSpot and WordPress

An AI services homepage drawn like a retro simulation game. The hero is a floating isometric island cut open to show a busy office, with a maintenance crew in the basement keeping it running, which makes "the work beneath the work" literal. Eight smaller pixel-art scenes carry the same world through the rest of the page.

Open live demo Downloads

Sections: 9, 2 with their own script
Editable fields: 125 in HubSpot and WordPress
Typefaces: DM Sans
Image files: 9
Downloads: Astro 877 KB, HubSpot 2.1 MB, WordPress 1.7 MB
Look: Light background
Collections: AI services, Agency, Business
Framer: Coming soon

Working World AI services homepage template, first screen on a 1440 pixel wide desktop

Working World 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: Worldcraft, a fictional company that builds and runs AI systems for other businesses.

Download Working World

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

Astro

working-world-astro.zip · 877 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 working-world-astro.zip; it holds one folder, working-world.
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

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

Change the content

Each of the 9 sections is a module with its own fields, 125 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 Working World - 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

working-world-wordpress.zip · 1.7 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 working-world-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, 125 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 "Working World". 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 working_world_ and working-world/.

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 Working World

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

Header

Worldcraft wordmark, The connection, Real work and Our benchmark links, and an outlined "Bring us the mess" button
11 fields · has its own script
Hero

"One working world." with intro, coral button and the pixel-art office island with its maintenance basement
8 fields
Connection

"AI moves fast. We build what holds." with an AI, Worldcraft, Your operation flow and four verbs
7 fields
Real-world work

Four numbered rows, from customer experience to research, each with two short lines and a pixel scene
26 fields
Standard

"Pass all six. Then call it agentic." with the six conditions in a two-column grid on a forest band
22 fields
How we work

"Start with one process." with three steps over pixel vignettes linked by coral arrows
15 fields
Our group

"One group. Connected work." with four placeholder companies in a two-by-two grid of links
14 fields
CTA

"The next connection is yours." with a garden pixel scene and a first name, last name and work email form
14 fields · has its own script
Footer

Huge lavender Worldcraft wordmark on forest, the tagline, the placeholder domain and Back to top
8 fields

Design notes

The first screen is pale lavender with "One working world." set very large in heavy forest-green DM Sans at upper left and a coral "Bring us the mess" button at upper right. Below it floats a pixel-art island: open-plan offices full of tiny people, a coral path joining the teams, and a basement where engineers tend servers and pipes.

A thin coral line with square markers runs down the left edge and ties the sections together. The connection shows AI, Worldcraft and Your operation as three outlined boxes with coral arrows, four capability rows each end with their own pixel scene, and the six conditions sit on a deep forest band in a two-column grid with coral numbers. Three process steps with pixel vignettes, a two-by-two group grid, a contact form beside a garden conversation scene and a forest footer with a huge lavender wordmark follow.

The page has nine pixel illustrations in one consistent style, so the whole homepage reads like one game world rather than a set of stock images. The pixel scenes show people doing ordinary work at desks, shelves and tables, which keeps the AI story human, and serious, heavy headings balance the playful art.

Shape and spacing

Nearly square 2px corners on buttons, boxes and fields, thin mint dividers, and a coral route line set about 4.8vw from the left edge with 4vw of inner padding.

Images

9 generated pixel-art images as WebP (the office island hero, a support desk, a team at a board, a warehouse worker, a researcher, a meeting table, server engineers, a team at connected desks, a garden conversation). They are generated for the template, with no text, real logos or recognizable people in them.

Typefaces

DM SansEverything: the wordmark, heavy headings, body copy, labels, buttons and form fields (weights 400 to 900)

Loaded from Google Fonts.

Colors

Forest #003F35Headings, text and outlines
Dark section green #004C40The standard band and the footer
Pale lavender #EAE8F5The main page background and type on green
Coral #FF795EButtons, the route line and markers, arrows and condition numbers
Mint #A7C7C3Thin dividers between rows and under the header

What works on the page

Header links jump to sections on the page; on phones a Menu button opens them by touch or keyboard and closes with Escape.
The four group links and the call buttons all lead to the contact form, since the group businesses are placeholders.
The form uses required fields and email checks, then animates to a thank-you that says no details were sent.
A Back to top link sits in the footer; there are no accordions or tabs, and motion is off under reduced-motion settings.

Who Working World fits

An AI agency or studio that wants a playful, memorable page that still reads as a serious business.

A firm that wants to show people at work rather than robots or glowing networks, without sourcing real photos.

A team that has room to commission or generate matching pixel art when it swaps in its own scenes.

A business with several companies or brands, since the group grid already lists four linked names.

See the whole page as one image (1080 by 3532 pixels, 258 KB)

The full Working World homepage template from header to footer at 1440 pixels wide

Questions about Working World

What style are the images in Working World?

All nine are generated isometric pixel-art illustrations saved as WebP: the office island in the hero and eight smaller scenes of people at work. They share one palette and style, so replacements look best if they follow the same pixel-art direction.

Can I use photos instead of the pixel art?

A replacement image of the same proportions goes in the same place in the assets folder. The scenes use CSS darken blending to melt their pale backgrounds into the lavender, so photos with a light, plain background blend best.

Where do the group links go?

All four company links lead to the contact form, because Worldcraft, Lindqvist Home, Ashgrove and Penmarric are placeholders. Point them at real pages when you add your own companies.

Which font does it use?

Only DM Sans, from Google Fonts, in weights 400 to 900, with a plain sans-serif fallback. The heavy weights set the large headings.

Does the contact form send messages?

The form validates the fields and shows a thank-you that says no details have been sent. Connect it to your own form service or the HubSpot or WordPress form tools. Free to use and adapt for personal and commercial sites.