Continuity Splice
Warm ivory page with a looping amber film strip of workplace frames, chocolate serif headings and powder-blue buttons.
- Astro
- HubSpot
- WordPress
- Framer soon
Load Bearing:architectural ivory editorial AI services homepage template for Astro, HubSpot and WordPress
An AI services homepage built like civic architecture. The first screen looks straight down the middle of a sunlit concrete viaduct, with the headline set in the open sky between the piers, and the page then keeps to ivory, sage, olive and one rust accent.
- Sections
- 9, 3 with their own script
- Editable fields
- 106 in HubSpot and WordPress
- Typefaces
- Libre Caslon Display, DM Sans
- Image files
- 2
- Downloads
- Astro 321 KB, HubSpot 1.6 MB, WordPress 1.3 MB
- Look
- Light background
- Collections
- AI services, Consulting, Business
- Framer
- Coming soon
Screenshots of the live demo at 1440 and 390 pixels. The content is placeholder: Beamfield, a fictional company that builds and runs AI systems for other businesses.
Download Load Bearing
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, load-bearing, 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 load-bearing-astro.zip; it holds one folder, load-bearing.
- 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 load-bearing-hubspot.zip, then from the folder that holds load-bearing run hs cms upload load-bearing load-bearing.
- In HubSpot go to Content > Website Pages > Create > Website page, click the theme name under the search box, find Load Bearing and click Set as active theme.
- Choose the template Load Bearing - Home.
More from the HubSpot README
Change the content
- Each of the 9 sections is a module with its own fields, 106 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 Load Bearing - 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 load-bearing-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, 106 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 "Load Bearing". 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 load_bearing_ and load-bearing/.
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 Load Bearing
In page order. In HubSpot each one is a module and in WordPress a block, 106 fields in all; in Astro each is one component file. Remove, reorder or reuse any of them on its own.
-
Header
Beamfield wordmark with a CSS beam mark, three anchor links and an outlined "Bring us the mess" button
11 fields · has its own script -
Hero
Symmetrical viaduct photograph with the centered serif headline, a short intro and the rust "Bring us the mess" button
7 fields -
Contrast
"Two speeds. One operation." with "Fast by nature" and "Steady by design" columns split by a fine rule
8 fields -
Connection
Bearing close-up beside "The connection is the capability.", a link to the standard and four ruled verbs
12 fields -
Standard
Inset sage panel with "Pass all six. Then call it agentic." and the six conditions in a three by two ruled grid
22 fields -
Possibilities
Four expandable rows pairing a category with a serif problem, such as "Our service can't keep up."
16 fields · has its own script -
How we work
"One process. Built to keep working." with three numbered steps separated by vertical rules
8 fields -
Contact
Sage band with "The next connection is yours." on the left and a first name, last name and work email form
11 fields · has its own script -
Footer
Dark olive band with the light wordmark, tagline, placeholder domain and three navigation links
11 fields
Design notes
The first screen is one photograph: a view between two monumental concrete viaducts, pale piers and arches receding to a bright vanishing point. The small kicker, the two-line headline "AI moves fast. We build what holds." in Libre Caslon Display, a short paragraph and a rust button sit centered in the sky between the spans.
Below, the page settles on an ivory ground. A two-column contrast split by a fine vertical rule comes first, then a close-up of a steel bearing beside "The connection is the capability." with four serif verbs on a ruled strip. The six conditions sit in an inset sage panel as a three by two ruled grid, followed by four expandable problem rows, three numbered steps and a sage contact band before a dark olive footer.
The design relies on axial symmetry and fine rules. There are no icons, diagrams or cards, only two photographs, numbered section labels in rust and a small geometric beam mark beside the wordmark, built in CSS.
Shape and spacing
Square corners everywhere, fine gray-green rules, main content at 87% of the page width (92% for wide blocks, 95% for the sage panel) and 20px gutters on phones.
Images
2 generated photographs as WebP (the symmetrical concrete viaduct in the hero, a close-up of a steel bearing on a concrete pier). They are generated for the template, with no text, real logos or recognizable people in them.
Typefaces
- Libre Caslon DisplayHeadline, section headings, the four verbs and problem statements (regular weight)
- DM SansBody copy, navigation, labels, buttons and form fields (weights 400 to 600)
Loaded from Google Fonts.
Colors
- Ivory
#F5F4EBPage background - Sage
#E7E9DDThe standard panel and the contact band - Olive
#30351FHeadings, text and the footer - Rust
#A54C1BButtons, section labels and links - Rule
#A9AD9DFine dividing lines and grid rules
What works on the page
- On phones the links move into a menu whose icon animates from three lines to a close mark; Escape closes it.
- The four problem rows open and close by mouse, touch or keyboard, with a plus and minus marker; the first row starts open.
- The contact form checks the required fields and the email format, then replaces itself with a thank-you that says nothing was sent.
- Transitions run at 320ms and switch off under reduced-motion settings; all content stays readable without JavaScript.
Who Load Bearing fits
An AI consultancy or operations firm that wants to look steady and dependable, with architecture doing the talking.
Infrastructure, engineering or construction-adjacent services where concrete and structure feel natural.
A team that prefers a calm, text-led page: two photographs, square corners and one accent color.
Anyone who wants a short page: nine sections and four expandable rows, quick to rewrite.
See the whole page as one image (1080 by 3250 pixels, 160 KB)
Questions about Load Bearing
Can I replace the viaduct photograph?
Replace viaduct.webp in the assets folder with your own image at the same name. The hero uses object-fit cover, so a wide picture with open space in the upper middle works best, since the headline sits centered there.
How do I change the rust and sage colors?
The colors are custom properties at the top of the stylesheet (ivory, sage, olive, rust and rule). Change the hex values there and every section follows.
What does the contact form do?
The form checks the name fields and the email address, then shows a thank-you message that says no details were sent. It keeps action="/contact", so you connect your own form service before going live.
Which fonts does Load Bearing use?
Libre Caslon Display for headings and DM Sans for text, both free Google Fonts loaded with display=swap.
Can I use Load Bearing for a client site?
Free to use and adapt for personal and commercial sites. Beamfield, its copy and its domain are placeholders to replace with your own.
More AI services templates like Load Bearing
Same content, different designs. Load Bearing is listed in AI website templates, Consulting website templates, Business homepage templates, Landing page templates, Homepage templates, HubSpot themes and WordPress block themes. Or browse the full gallery.
Breakwater
An aerial photo of a curved concrete breakwater fills the first screen, then cream pages with petrol and coral serif type.
- Astro
- HubSpot
- WordPress
- Framer soon
Switchyard
A forest green AI services page built on model railway photos: rails, points and lime wagons, with an ivory middle.
- 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.