Geological Folio
An ice-blue science folio: an engraved geological cutaway with a yellow stratum and red core under a light navy headline.
- Astro
- HubSpot
- WordPress
- Framer soon
Control Tower:dark navy aviation AI services homepage template for Astro, HubSpot and WordPress
An AI services homepage set inside an air traffic control tower at dusk. An operator watches a runway through panoramic glass, and a thin vertical wayfinding line with dots runs down the left gutter of the whole page, past navy sections and one ivory benchmark band.
- Sections
- 9, 2 with their own script
- Editable fields
- 98 in HubSpot and WordPress
- Typefaces
- Libre Caslon Display, DM Sans
- Image files
- 3
- Downloads
- Astro 301 KB, HubSpot 1.7 MB, WordPress 1.3 MB
- Look
- Dark background
- Collections
- AI services, Consulting, Tech
- Framer
- Coming soon
Screenshots of the live demo at 1440 and 390 pixels. The content is placeholder: Towerby, a fictional company that builds and runs AI systems for other businesses.
Download Control Tower
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, control-tower, 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 control-tower-astro.zip; it holds one folder, control-tower.
- 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 control-tower-hubspot.zip, then from the folder that holds control-tower run hs cms upload control-tower control-tower.
- In HubSpot go to Content > Website Pages > Create > Website page, click the theme name under the search box, find Control Tower and click Set as active theme.
- Choose the template Control Tower - Home.
More from the HubSpot README
Change the content
- Each of the 9 sections is a module with its own fields, 98 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 Control Tower - 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 control-tower-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, 98 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 "Control Tower". 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 control_tower_ and control-tower/.
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 Control Tower
In page order. In HubSpot each one is a module and in WordPress a block, 98 fields in all; in Astro each is one component file. Remove, reorder or reuse any of them on its own.
-
Header
Towerby wordmark over the hero photo, three anchor links and an outlined "Bring us the mess" button
11 fields · has its own script -
Hero
Control tower photograph at dusk with "Speed, with a clear way through.", ivory intro and a citrine button
7 fields -
Connection
"AI moves fast." and "The connection is the capability." beside a flight-strip photo, with a four-word sequence
11 fields -
Possibilities
Four outcome cells in a two by two grid, such as "Read the signals. Act while it matters."
15 fields -
Standard
Ivory band with "Six conditions. One working operation." in a three by two ruled grid
21 fields -
How we work
"One process. A working operation." with three numbered steps beside a ground-crew photograph
10 fields -
Group companies
"One group. Connected work." with Towerby and three placeholder companies in four ruled columns
9 fields -
Contact
"The next connection is yours." with a short invitation on the left and a three-field form on the right
10 fields · has its own script -
Footer
Large sans wordmark, the citrine "The work beneath the work." tagline and "People. Intelligence. Operations."
4 fields
Design notes
The first screen is a cinematic photograph from inside a control tower at peach dusk: panoramic windows over a lit runway, a plane in the sky and an operator with a headset at the right. The citrine serif headline "Speed, with a clear way through." sits upper left, with ivory copy and a citrine button over the dark console below.
The page stays dark navy. The connection copy sits beside a photo of a hand arranging flight strips, then four outcome cells in a two by two grid. An ivory band holds the six conditions, then the page returns to navy for a ground-crew photo with three steps, a four-column group of companies, the contact form and a footer with a citrine tagline.
A continuous vertical line with small dots runs through the left gutter like an airport wayfinding mark, tying the sections together. Body text is set in a serif as well as the headings, which gives the page a printed, report-like tone.
Shape and spacing
Square controls, translucent ivory rules, a 6.1vw outer gutter plus a 4vw inset from the wayfinding line on desktop, and 20px plus 18px on phones.
Images
3 generated photographs as WebP (the control tower at dusk, a hand arranging flight strips, two ground technicians checking landing gear). They are generated for the template, with no text, real logos or recognizable people in them.
Typefaces
- Libre Caslon DisplayHeadings and body copy, set large and editorial
- DM SansWordmark, navigation, small uppercase labels and buttons
Loaded from Google Fonts.
Colors
- Navy
#05141CMain page background - Citrine
#FFF49AHeadlines, buttons, the tagline and wayfinding dots - Ivory
#F0ECD9The benchmark band and body text on navy - White
#F0EEE8Wordmark and light text
What works on the page
- On phones a menu button opens the links by touch or keyboard and closes with Escape.
- Header and hero buttons scroll to the contact form; the benchmark cells and steps are static.
- The contact form uses required labeled fields and browser validation, then animates to a thank-you that says nothing was sent.
- Transitions run at 320ms and switch off under reduced-motion settings; content and navigation stay readable without JavaScript.
Who Control Tower fits
An AI operations firm that wants to say "people stay in control", since a human operator is the center of the hero.
A company working with logistics, aviation, transport or other operations-heavy clients.
A consultancy that likes a dark, serious and text-led page with serif body copy.
A group with several companies or divisions, since the four-column group section is ready for them.
See the whole page as one image (1080 by 3293 pixels, 191 KB)
Questions about Control Tower
Can I remove the wayfinding line?
The line is built from separate CSS pieces in each section, so you can hide it section by section or remove the rules for the whole page. The content does not depend on it.
How do I replace the three photographs?
Save your images as control-tower.webp, flight-strips.webp and ground-crew.webp in the assets folder. The hero needs clear space at the upper left for the headline and a dark lower area for the copy.
Is the body text really a serif?
Libre Caslon Display sets both the headings and the body copy, with DM Sans kept for labels, navigation and buttons. Swap the body font in the stylesheet if you want a sans-serif reading text.
What does the contact form do?
The form validates the name and email fields, then shows an animated thank-you that makes clear nothing was sent. Connect a real /contact endpoint or form service before launch.
Who are Kestrel Freight and Lanmore?
Towerby, Kestrel Freight and Lanmore are fictional placeholders, and "The lab" is a generic label. Replace them with your own companies or clients.
More AI services templates like Control Tower
Same content, different designs. Control Tower is listed in AI website templates, Consulting website templates, Tech website templates, Landing page templates, Homepage templates, HubSpot themes and WordPress block themes. Or browse the full gallery.
Listening Infrastructure
A candy-pink page: a white radio telescope dish sweeps in from the lower left under indigo serif type and acid-yellow buttons.
- Astro
- HubSpot
- WordPress
- Framer soon
Laminar Layer
An alabaster page: coral dye resolving into droplets in a microfluidic channel, with dark teal serif and coral accents.
- 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.