Possibility Shelter
A cut-paper illustrated page on ivory: a coral canopy shields four people at work from a storm of cobalt brush marks.
- Astro
- HubSpot
- WordPress
- Framer soon
Continuity Board:black and ivory industrial AI services homepage template for Astro, HubSpot and WordPress
An ivory and near-black homepage built around a mechanical departure board that spells WORK across the full width of the screen. The letters are live HTML set over a photographed blank board, and the rest of the page alternates ivory and black bands with violet as the only color.
- Sections
- 9, 3 with their own script
- Editable fields
- 97 in HubSpot and WordPress
- Typefaces
- Inter, Anton
- Image files
- 3
- Downloads
- Astro 387 KB, HubSpot 1.0 MB, WordPress 744 KB
- Look
- Light background
- Collections
- AI services, Business
- Framer
- Coming soon
Screenshots of the live demo at 1440 and 390 pixels. The content is placeholder: Fernwright, a fictional company that builds and runs AI systems for other businesses.
Download Continuity Board
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, continuity-board, 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 continuity-board-astro.zip; it holds one folder, continuity-board.
- 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 continuity-board-hubspot.zip, then from the folder that holds continuity-board run hs cms upload continuity-board continuity-board.
- In HubSpot go to Content > Website Pages > Create > Website page, click the theme name under the search box, find Continuity Board and click Set as active theme.
- Choose the template Continuity Board - Home.
More from the HubSpot README
Change the content
- Each of the 9 sections is a module with its own fields, 97 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 Continuity Board - 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 continuity-board-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, 97 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 "Continuity Board". 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 continuity_board_ and continuity-board/.
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 Continuity Board
In page order. In HubSpot each one is a module and in WordPress a block, 97 fields in all; in Astro each is one component file. Remove, reorder or reuse any of them on its own.
-
Header
Fernwright wordmark, Connection, Possibilities and Standard links, and an outlined violet Bring us the mess button
13 fields · has its own script -
Hero
"New intelligence. Work that keeps moving.", the split-flap WORK board, one line of intro and the violet button
8 fields -
Two speeds
"Possibility moves. Your business holds." with AI and Your operation in ruled columns over a violet line
6 fields -
Connection
Black band with steel gears, "The connection is the capability." and the four steps Understand to Recover
10 fields -
Standard
"Pass all six. Then call it agentic." beside the six numbered conditions in ruled rows on black
21 fields -
Real work
Service example beside the paper-feed photo, then three expandable problem rows with category labels
13 fields · has its own script -
How we work
"One process. A working operation." with three numbered steps in columns between rules
9 fields -
CTA
"The next connection is yours." with a first name, last name and work email form behind a vertical rule
11 fields · has its own script -
Footer
Black footer with a large Fernwright wordmark, tagline, violet square, copyright and placeholder domain
6 fields
Design notes
The first screen opens on ivory with a small eyebrow, "The work beneath the work.", and a two-line headline in heavy, tightly spaced Inter: "New intelligence. Work that keeps moving." A small violet square follows the last word. Below it a black split-flap board runs edge to edge, with WORK in giant ivory Anton letters cut by thin flap seams.
Under the board, one line of intro sits left and a solid violet button sits right. The page then moves through a three-column "Two speeds" row over a violet rule, a black band with a close-up of steel gears and the four steps Understand, Coordinate, Deliver, Recover, and a black benchmark with the six conditions in ruled rows. It returns to ivory for real work beside a paper-feed machine, three numbered process columns, and a form behind a vertical rule, then closes on a black footer.
The imagery is all machinery: a departure board, gears and a paper feed, in black and white with no people. The WORK lettering is real text, so it can be changed without editing the image. Numbered labels (01 / TWO SPEEDS to 06 / THE NEXT CONNECTION) give the page the feel of a printed timetable.
Shape and spacing
Square corners everywhere, rectangular buttons, fine gray rules and vertical column separators. Side gutters scale from 22px to 104px.
Images
3 generated images as WebP (the blank split-flap board, close-up steel gears, a paper-feed machine with blank ivory paper). They are generated for the template, with no text, real logos or recognizable people in them.
Typefaces
- InterWordmark, headings, body copy, labels and buttons (weights 400 to 750)
- AntonThe giant WORK lettering on the hero board
Loaded from Google Fonts.
Colors
- Ivory
#F7F5EEMain page background and the board lettering - Ink
#111110Headings, text, the connection and benchmark bands, and the footer - Violet
#6426FFButtons, the small squares, rules and accordion plus signs - Violet on dark
#8952FFNumbers and accents on the black sections - Rule gray
#92928FFine divider lines
What works on the page
- On phones a labelled menu button opens the navigation, and Escape or a link click closes it.
- The three problem rows in Real work open and close one by one, and their plus signs turn to minus.
- The form checks required fields and the email format, then shows a thank-you message and sends nothing.
- Transitions run at 320ms and switch off under reduced-motion settings.
Who Continuity Board fits
An AI operations or automation firm that wants a bold, poster-like first screen built on one word.
A team that likes black and white with a single accent color and no people to photograph.
A business that sells reliability: the timetable and machinery imagery says things run on schedule.
Anyone who wants to change the hero word: WORK is live text, so a new word needs no image editing.
See the whole page as one image (1080 by 3293 pixels, 175 KB)
Questions about Continuity Board
Can I change the word WORK on the board?
The letters are HTML text in Anton placed over a blank board photo, with CSS drawing the flap seams. Change the word in the hero field and keep it to about four letters so it fills the board the same way.
What images does Continuity Board use?
Three generated photos in WebP: the blank split-flap board, steel gears and a paper-feed machine. None of them contain text, so you can swap them for your own machinery or product shots of similar proportions.
Does the contact form send anything?
The form validates the three fields and the email format, then shows "Thank you. Your next connection starts here." and sends nothing. Connect it to HubSpot forms, a WordPress form plugin or your own endpoint to receive messages.
How do I change the violet accent?
The ivory, ink, violet and rule colors are custom properties at the top of the stylesheet. Change the two violet values (#6426FF and #8952FF on dark) and the buttons, squares and numbers follow.
Is the Fernwright content real?
Fernwright, its domain and all the copy are placeholders. Free to use and adapt for personal and commercial sites.
More AI services templates like Continuity Board
Same content, different designs. Continuity Board is listed in AI website templates, Business homepage templates, Landing page templates, Homepage templates, HubSpot themes and WordPress block themes. Or browse the full gallery.
Working Day
Graphite AI services homepage with giant citron headlines and documentary photos of people in service, billing and warehouses.
- Astro
- HubSpot
- WordPress
- Framer soon
Human Handoff
A tangerine campaign page: huge black italic headline over two hands passing an ivory block, then cream and orange bands.
- 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.