Human Horizon
Near-black AI services homepage opening on a giant black and white eye, with electric cyan serif headlines and fine rules.
- Astro
- HubSpot
- WordPress
- Framer soon
Listening Infrastructure:candy pink editorial AI services homepage template for Astro, HubSpot and WordPress
An AI services homepage in candy pink. A monumental white radio telescope fills the first screen at a diagonal, and one continuous pink canvas carries indigo serif headings, connected line diagrams and acid-yellow markers down the page.
- Sections
- 9, 2 with their own script
- Editable fields
- 95 in HubSpot and WordPress
- Typefaces
- Libre Caslon Display, DM Sans
- Image files
- 2
- Downloads
- Astro 322 KB, HubSpot 1.4 MB, WordPress 1.1 MB
- Look
- Light background
- Collections
- AI services, Agency, Tech
- Framer
- Coming soon
Screenshots of the live demo at 1440 and 390 pixels. The content is placeholder: Hearthline, a fictional company that builds and runs AI systems for other businesses.
Download Listening Infrastructure
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, listening-infrastructure, with a README; the install steps below are condensed from it.
An Astro project: one component per section, design tokens in global.css, images in public/assets.
Needs Node 22.12 or newer.
- Unzip listening-infrastructure-astro.zip; it holds one folder, listening-infrastructure.
- 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/.
More from the Astro README
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).
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 listening-infrastructure-hubspot.zip, then from the folder that holds listening-infrastructure run hs cms upload listening-infrastructure listening-infrastructure.
- In HubSpot go to Content > Website Pages > Create > Website page, click the theme name under the search box, find Listening Infrastructure and click Set as active theme.
- Choose the template Listening Infrastructure - Home.
More from the HubSpot README
Change the content
- Each of the 9 sections is a module with its own fields, 95 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 Listening Infrastructure - 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.
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 listening-infrastructure-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.
More from the WordPress README
Change the content
- Each of the 9 sections is a block with its own fields, 95 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 "Listening Infrastructure". 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 listening_infrastructure_ and listening-infrastructure/.
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 Listening Infrastructure
In page order. In HubSpot each one is a module and in WordPress a block, 95 fields in all; in Astro each is one component file. Remove, reorder or reuse any of them on its own.
-
Header
Hearthline text wordmark, three anchor links and an underlined "Bring us the mess" link over a fine rule
11 fields · has its own script -
Hero
Diagonal white telescope photograph with "Understand first. Then move.", a one-line intro and an acid-yellow button
8 fields -
Connection
"The connection is the capability." with two contrast columns and an Intelligence to Hearthline to operation diagram
9 fields -
Operating layer
"The work moves. The context stays." with a wide telescope pivot photo above four connected steps
12 fields -
Standard
"Pass all six. Then call it agentic." with six conditions in a ruled grid and yellow number squares
20 fields -
Possibilities
Four ruled rows linking each problem to its outcome with an arrow, such as "We see the risk too late."
10 fields -
How we work and examples
"Built with your team." with a three-step arrow sequence and three placeholder example companies
10 fields -
Contact
"The next connection is yours." on the left and a labeled first name, last name and work email form
10 fields · has its own script -
Footer
Thin top rule, Hearthline wordmark with the placeholder domain, and "The work beneath the work." in serif
5 fields
Design notes
The first screen is a close, diagonal photograph of a white radio telescope dish and its steel ribs against a pink sky. The indigo serif headline "Understand first. Then move." sits in the open sky at upper right with a one-line intro and an acid-yellow button.
The page then runs on one pink gradient. A two-column contrast leads into a line diagram (Intelligence, a yellow Hearthline box, Your operation), then a wide photo of the telescope pivot above four connected steps with arrows. The six conditions follow in a ruled grid with small yellow number squares, then four problem-to-outcome rows with arrows, a three-step process with three example companies, a contact form and a plain footer.
Connected diagrams do much of the work: thin indigo lines, arrowheads and square yellow endpoints link the steps, and on phones they turn vertical. The telescope appears once; the second photo is a structural close-up.
Shape and spacing
Square corners, fine indigo-gray rules, fluid gutters from 22 to 96px and square yellow markers; the menu collapses below 1100px.
Images
2 generated photographs as WebP (the diagonal radio telescope hero, a close-up of the telescope pivot and ribs). They are generated for the template, with no text, real logos or recognizable people in them.
Typefaces
- Libre Caslon DisplayHeadlines, section headings, step names and the footer tagline
- DM SansBody copy, navigation, the text wordmark, labels and buttons
Loaded from Google Fonts.
Colors
- Ink indigo
#10133EHeadings, text and diagram lines - Pink
#F8CADDThe main canvas and hero sky - Light pink
#FBE0E9The lighter end of the page gradient - Deep pink
#F6B2CEThe deeper end of the gradient - Acid yellow
#E6FF46Buttons, the Hearthline box and number squares - Rule
#85809FFine dividing lines
What works on the page
- Below 1100px the links move into an animated menu that works by touch, Enter and Escape.
- The diagrams and steps are static, drawn with CSS lines and arrows that turn vertical on phones.
- The contact form validates the required fields and email, then animates to a thank-you that says no details were sent.
- Motion runs at 320ms and is off under reduced-motion settings; with JavaScript off, all content and the native form stay usable.
Who Listening Infrastructure fits
An AI or data company that wants to be remembered: candy pink and acid yellow stand apart from blue technology sites.
A firm whose pitch is listening first, such as research, analytics or customer insight work.
A team that explains its method with simple diagrams, since the connected lines and arrows are already built.
Anyone who wants a short image list: two photographs and no icons to replace.
See the whole page as one image (1080 by 3283 pixels, 186 KB)
Questions about Listening Infrastructure
Can I change the pink to my brand color?
The pinks, indigo, acid yellow and rule are custom properties at the top of the stylesheet, and the page gradient uses them. The telescope photos have pink skies, so a very different color also calls for new images or a recolor of the existing ones.
How are the diagrams built?
The lines, arrows and square endpoints are HTML and CSS, so their text is editable and they turn vertical on phones without losing their endpoints.
Do the problem rows open like accordions?
The four rows show each problem and its outcome side by side, all visible at once, so there is nothing to open. The design has no expandable controls.
What does the form send?
The form validates the names and email, then shows a thank-you that says no details were sent. Point the /contact action at your own form service to receive messages.
Can I use Listening Infrastructure commercially?
Free to use and adapt for personal and commercial sites. Hearthline and the three example companies are fictional placeholders.
More AI services templates like Listening Infrastructure
Same content, different designs. Listening Infrastructure is listed in AI website templates, Agency website templates, Tech website templates, Landing page templates, Homepage templates, HubSpot themes and WordPress block themes. Or browse the full gallery.
Stable Axis
A signal yellow AI services page with a steel gyroscope hero, heavy black type and one dark band holding a node diagram.
- Astro
- HubSpot
- WordPress
- Framer soon
Optical Connection
A near-black and cherry page: a glass slab bends warm peach light into beams, with large ivory Inter type at right.
- Astro
- HubSpot
- WordPress
- Framer soon
Start with one process.
We learn the business and build your first go-to-market process on us this month.