AI services homepage templateFree8 sections

Laminar Layer:scientific alabaster teal AI services homepage template for Astro, HubSpot and WordPress

An AI services homepage built on laboratory microscopy. Turbulent coral dye enters a clear channel and leaves as evenly spaced droplets across the first screen, and the page continues as a clean scientific editorial with one dark teal benchmark panel.

Open live demo Downloads

Sections: 8, 2 with their own script
Editable fields: 103 in HubSpot and WordPress
Typefaces: Libre Caslon Text, DM Sans
Image files: 2
Downloads: Astro 194 KB, HubSpot 909 KB, WordPress 732 KB
Look: Light background
Collections: AI services, One page, Tech
Framer: Coming soon

Laminar Layer AI services homepage template, first screen on a 1440 pixel wide desktop

Laminar Layer 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: Laminary, a fictional company that builds and runs AI systems for other businesses.

Download Laminar Layer

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

Astro

laminar-layer-astro.zip · 194 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 laminar-layer-astro.zip; it holds one folder, laminar-layer.
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

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

Change the content

Each of the 8 sections is a module with its own fields, 103 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 Laminar Layer - 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

laminar-layer-wordpress.zip · 732 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 laminar-layer-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, 103 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 "Laminar Layer". 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 laminar_layer_ and laminar-layer/.

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 Laminar Layer

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

Header

Laminary wordmark with a coral dot, three anchor links and an underlined "Bring us the mess" link over a rule
11 fields · has its own script
Hero

Microfluidic channel photo with "Make possibility flow.", a lower-right caption, coral button and a closing line
8 fields
Connection

"The connection is the capability." with two short statements and four serif verbs marked by coral dots
11 fields
Possibilities

Four quoted problems, such as "We see the risk too late.", each linked to an outcome with a coral arrow
14 fields
Standard

Full-width dark teal panel with "Six conditions. One working operation." and coral-numbered conditions
22 fields
How we work

"One process. Built to keep working." with three numbered steps beside a branching chip photograph
12 fields
Contact

"The next connection is yours." with a three-field form, coral submit button and a closing serif line
12 fields · has its own script
Footer

Dark teal footer with the serif wordmark, tagline, three placeholder group companies and copyright
13 fields

Design notes

The first screen is a top-down photograph of a clear microfluidic channel: coral dye swirls in a chamber on the left and becomes a line of round droplets rising to the right. The large dark teal serif headline "Make possibility flow." sits upper left, a short caption with a coral button sits lower right, and a small closing line sits lower left.

Below, the page stays on alabaster with fine gray-teal rules. The connection section pairs a large heading with two short statements, then four serif verbs with coral dots. Four quoted problems link to outcomes with coral arrows, a full-width dark teal panel holds the six conditions with coral numbers, and a photo of a branching chip sits beside three steps before the form and a dark teal footer.

The two photographs tell one story: disorder becoming order in the hero, then a complete chip with one inlet branching into three outlets for the working system. The outcome arrows link to the contact form.

Shape and spacing

Square corners, fine gray-teal rules, a container at 89% of the page width up to 1700px, and spacing on a 16, 32 and 64px scale.

Images

2 generated photographs as WebP (coral dye becoming droplets in a microfluidic channel, a clear chip branching into three outlets). They are generated for the template, with no text, real logos or recognizable people in them.

Typefaces

Libre Caslon TextHeadlines, section headings, quoted problems and the footer wordmark (400)
DM SansNavigation, body copy, labels, buttons and the header wordmark (weights 400 to 700)

Loaded from Google Fonts.

Colors

Paper #FCFCF7Page background
Ink teal #063644Headings and text
Dark teal #003B49The standard panel and the footer
Coral #F35B4CNumbers, dots and arrows
Button coral #E44C3FButtons
Divider #9BB0B5Fine rules between rows and sections

What works on the page

On phones the links move into a keyboard-accessible menu that opens below the wordmark and closes with Escape.
Every "Bring us the mess" button and the four outcome arrows scroll to the contact form.
The form validates the required fields and the email, then animates to a thank-you that says no details have been sent.
Motion runs at 320ms and is disabled under reduced-motion settings; all content stays readable without JavaScript.

Who Laminar Layer fits

An AI firm serving science, health, biotech or research clients, where lab imagery feels at home.

A team that wants a clean, light page with one strong accent color and plenty of white space.

Anyone who wants a short build: eight sections and the smallest set of interactions, with no accordions to manage.

A company group that wants its sister companies listed quietly in the footer.

See the whole page as one image (1080 by 3230 pixels, 189 KB)

The full Laminar Layer homepage template from header to footer at 1440 pixels wide

Questions about Laminar Layer

Can I swap the microscope photos?

Replace hero-flow.webp and branching-chip.webp in the assets folder with your own images at the same names. The hero works best with a wide image that leaves the upper left and lower right clear for text.

Why are there two coral values?

The brighter coral marks numbers, dots and arrows, and a slightly deeper coral is used for buttons and small text so they keep enough contrast. Both are custom properties in the stylesheet.

Do the possibility rows expand?

The four rows show the problem and outcome side by side and stay open. Each arrow links to the contact form instead of opening a panel.

How does the form behave?

The form validates the names and email in the browser, then shows "Thank you. Your next connection starts here." with a note that no details were sent. Connect your own service to the /contact action to receive messages.

Can I use Laminar Layer for client work?

Free to use and adapt for personal and commercial sites. Laminary, Westcombe Labs, Rennick and Holloway Home are placeholders.