AI services homepage templateFree8 sections

Working Day:graphite citron documentary AI services homepage template for Astro, HubSpot and WordPress

A dark graphite homepage that puts people at work first: a giant citron headline over three photos of customer service, billing and frontline staff. Every section uses heavy Inter in citron yellow, and the page ends on a bright citron contact panel.

Open live demo Downloads

Sections: 8, 2 with their own script
Editable fields: 118 in HubSpot and WordPress
Typefaces: Inter
Image files: 7
Downloads: Astro 385 KB, HubSpot 1.2 MB, WordPress 835 KB
Look: Dark background
Collections: AI services, Agency, Business
Framer: Coming soon

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

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

Download Working Day

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

Astro

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

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

Change the content

Each of the 8 sections is a module with its own fields, 118 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 Day - 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-day-wordpress.zip · 835 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 working-day-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, 118 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 Day". 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_day_ and working-day/.

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

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

Header

Underlined Daywright wordmark, three anchor links and an outlined citron Bring us the mess button
11 fields · has its own script
Hero

"AI, in the working world." in giant citron type, intro, button and three captioned photos of people at work
16 fields
Connection

"The connection is the capability." with an Intelligence, Daywright, Your operation diagram and citron arrows
10 fields
Real work

Three ruled rows for customer service, billing and frontline staffing, each with a photo, copy and arrow
20 fields
Standard

"Six conditions. One working operation." in a two-column grid with large citron numbers
22 fields
Working with Daywright

"One process. A stronger operation.", a team photo, three steps and three placeholder group companies
17 fields
CTA

Citron panel with "The next connection is yours." and a first name, last name and work email form
11 fields · has its own script
Footer

Citron strapline, Daywright wordmark and tagline, a Bring us the mess link, copyright, domain and Back to top
11 fields

Design notes

The first screen is graphite. "AI, in the working world." fills the upper left in very heavy citron Inter, with a short intro below and a citron rectangular button at right. Under it sit three documentary photos side by side, a specialist with a headset, two colleagues at a laptop and two warehouse staff with a tablet, each captioned in small citron type.

The connection section shows a three-node diagram: Intelligence, a filled citron Daywright box in the middle, and Your operation, joined by citron arrows. Real work follows as three ruled rows, each with a wide photo, a heading and a citron arrow to the form. Then the six conditions in a two-column grid with large citron numbers, a team photo beside three process steps and three placeholder companies, and a citron contact panel that reaches slightly past the normal margins.

The page carries seven photos of people in offices and warehouses instead of objects or metaphors. The type is huge and black weight (up to 121px in the hero), so headings work like posters. The citron arrows in the work rows all lead to the conversation form.

Shape and spacing

Square corners, rectangular citron and graphite buttons, thin rules, gutters of 4.85%, with the contact panel stepping out beyond the gutters.

Images

7 generated photos as WebP (three hero photos of service, billing and warehouse work, three wider work-row photos of the same jobs, and a team of four at a table). They are generated for the template, with no text, real logos or recognizable people in them.

Typefaces

InterEverything: heavy headings (up to weight 900), body copy, labels, buttons and the underlined wordmark (weights 400 to 900)

Loaded from Google Fonts.

Colors

Graphite #24281DPage background and text on the citron panel
Citron #E9FB56Headings, buttons, numbers, the diagram box and the contact panel
Off-white #F3F3EBBody copy and small headings
Rule #797D70Divider lines between rows and columns

What works on the page

Below 1100px the navigation becomes an animated menu that opens by click or keyboard and closes with Escape.
The many Bring us the mess buttons and work-row arrows jump to the contact form; Back to top sits in the footer.
The form checks required fields and email format, then swaps in an animated thank-you saying no data was sent.
Reduced-motion settings turn off transitions and smooth scrolling.

Who Working Day fits

An AI services company that wants to show real people and real jobs instead of abstract imagery.

A firm serving operations teams such as customer service, billing or warehouses, with a row for each.

A creative or marketing agency that likes dark pages, huge type and one loud accent color.

A business that wants many paths to the contact form, since every row and button leads there.

See the whole page as one image (1080 by 3345 pixels, 208 KB)

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

Questions about Working Day

How many photos do I need to replace?

Seven: three hero photos at 840 by 560, three work-row photos at 1040 by 370 and one team photo at 1400 by 480. They are all generated documentary-style WebP files of fictional people, so swap them for your own team or stock photos of the same proportions.

Can I change the work rows to other jobs?

Each row has its own label, heading, short line and image, so you can rename Customer service, Billing and Frontline staffing to your own services. Change the three hero captions to match.

Is the citron and graphite color pair easy to change?

The four colors are custom properties at the top of the stylesheet: graphite #24281D, citron #E9FB56, off-white #F3F3EB and the rule color. Keep a strong contrast between the background and the accent, because the headings are set in the accent color.

What happens when someone submits the form?

The form checks the required fields and email, then replaces itself with an animated thank-you that says this demo sends no data. Connect it to HubSpot forms, a WordPress form plugin or a /contact endpoint to receive messages.

Are Daywright, Kinross Home and Palisade real?

All the company names, people and copy are placeholders. Free to use and adapt for personal and commercial sites.