Harnessed Wind
A bright sea-glass sky page: a vermilion parafoil kite on taut lines beside a bold burgundy serif headline.
- Astro
- HubSpot
- WordPress
- Framer soon
Operating Certificate:fuchsia bold typographic AI services homepage template for Astro, HubSpot and WordPress
An AI services homepage that opens on its benchmark instead of a metaphor. A tilted, folded paper certificate lists the six conditions with green checks next to an enormous condensed headline on fuchsia, and the rest of the page keeps that bold poster type on warm ivory.
- Sections
- 8, 3 with their own script
- Editable fields
- 126 in HubSpot and WordPress
- Typefaces
- Barlow Condensed, Inter
- Image files
- 2
- Downloads
- Astro 202 KB, HubSpot 1.6 MB, WordPress 594 KB
- Look
- Light background
- Collections
- AI services, Agency, One page
- Framer
- Coming soon
Screenshots of the live demo at 1440 and 390 pixels. The content is placeholder: Sealmark, a fictional company that builds and runs AI systems for other businesses.
Download Operating Certificate
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, operating-certificate, 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 operating-certificate-astro.zip; it holds one folder, operating-certificate.
- 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 (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).
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 operating-certificate-hubspot.zip, then from the folder that holds operating-certificate run hs cms upload operating-certificate operating-certificate.
- In HubSpot go to Content > Website Pages > Create > Website page, click the theme name under the search box, find Operating Certificate and click Set as active theme.
- Choose the template Operating Certificate - Home.
More from the HubSpot README
Change the content
- Each of the 8 sections is a module with its own fields, 126 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 Operating Certificate - 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 operating-certificate-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 8 sections is a block with its own fields, 126 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 "Operating Certificate". 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 operating_certificate_ and operating-certificate/.
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 Operating Certificate
In page order. In HubSpot each one is a module and in WordPress a block, 126 fields in all; in Astro each is one component file. Remove, reorder or reuse any of them on its own.
-
Header
Heavy Sealmark wordmark on ivory, three section links and an outlined "Bring us the mess" button
11 fields · has its own script -
Hero
"Pass all six. Then call it agentic." on fuchsia beside a tilted certificate listing six checked conditions and a seal
21 fields -
The connection
"AI moves fast. We build what holds." with three labeled slabs, then "The connection is the capability." and four verbs
13 fields -
Our benchmark
"Six conditions. One working operation." as six ruled rows with short descriptions and green checks
21 fields -
Possibilities
Four client problems as accordions on ivory; the first open on pale pink with a three-box flow ending in Resolution
30 fields · has its own script -
Built once, kept running
"Built once. Kept running." with a pink left border and three numbered pink steps joined by arrows
11 fields -
CTA
Fuchsia band: "The next connection is yours." beside an ivory panel with name and work email fields
15 fields · has its own script -
Footer
Oversized Sealmark wordmark and tagline on fuchsia with "People. Intelligence. Operations." stacked right
4 fields
Design notes
An ivory header sits above a vivid fuchsia hero. On the left, "Pass all six. Then call it agentic." fills three lines in heavy condensed black type over a short line and a black "Bring us the mess" button. On the right, a warm-white folded certificate tilts across the frame, titled "The Sealmark standard" and listing the six conditions with forest-green checks and a larger seal at the bottom.
Below, the page turns to warm ivory with thin rules. The connection section shows a photo of three stacked slabs labeled AI, Sealmark and Your operation, with the pink slab in the middle, beside the four verbs in condensed type. The benchmark repeats the six conditions as ruled rows with green checks, the possibilities accordion opens on a pale pink panel with a three-box flow diagram, and "Built once. Kept running." shows three numbered pink steps joined by arrows. The contact form and an oversized wordmark footer return to fuchsia.
The certificate is the idea: reliability shown as something checked and signed off. The paper is a generated image, but every word, check mark, rule and arrow on it is live HTML and CSS, so the list stays sharp and editable.
Shape and spacing
Square corners throughout, outlined and solid black rectangular buttons, thin rules between rows, a pink left border on the process block and side margins of 22 to 100px.
Images
2 generated images as WebP (the blank folded certificate with a transparent background, three stacked ivory and pink slabs). They are generated for the template, with no text, real logos or recognizable people in them.
Typefaces
- Barlow CondensedHero headline, section headings, accordion titles and the four verbs (weights 700 and 800)
- InterBody copy, navigation, labels, buttons, form and the Sealmark wordmark (weights 400 to 900)
Loaded from Google Fonts.
Colors
- Fuchsia
#F543AEHero, middle slab, step numbers, the Resolution box, contact band and footer - Warm ivory
#F3F0E6Header, main page background and the form panel - Ink
#080908Headlines, text and the black buttons - Forest green
#07522FCheck marks on the certificate and in the benchmark rows - Panel pink
#F8E6ECThe open accordion panel - Rule gray
#777A70Thin dividing rules
What works on the page
- Header links jump to sections on the same page; below 900px they collapse into a Menu button that works by touch and keyboard and closes with Escape.
- The four problems in What becomes possible are accordions with plus and minus controls; the first starts open with its Request, Context, Resolution flow.
- The contact form uses required fields and email validation, then an animated thank-you replaces it and states that the details have not been sent.
- Transitions run at 320ms and are turned off under reduced-motion settings. Without JavaScript all accordion text stays readable.
Who Operating Certificate fits
An AI agency that wants a loud, poster-like brand with one bright color and big condensed type.
A company that sells a method, checklist or audit, since the certificate puts the standard on the first screen.
Teams that want a strong look with only two images, both easy to keep because the lettering on them is live text.
Anyone who prefers an energetic, campaign feel over the calm dark palettes common to AI firms.
See the whole page as one image (1080 by 3370 pixels, 163 KB)
Questions about Operating Certificate
Can I edit the six items on the certificate?
The paper is a blank image and the title, numbers, conditions and check marks are HTML and CSS on top of it. Change the words in the hero fields and the certificate updates, with no image editing needed.
How do I change the fuchsia to my brand color?
The pink is a custom property at the top of the stylesheet, along with ivory, ink, green, panel pink and the rule color. The middle slab in the connection photo is pink in the image itself, so replace operation-stack.webp if you change the color a lot.
What happens when someone sends the contact form?
The form checks the required fields and email format, then fades to "Thank you. Your next connection starts here." and notes that the details were not sent. Its action is /contact, so connect a real form service before launch.
Which fonts does Operating Certificate use?
Barlow Condensed in heavy weights for the headlines and Inter for text and the wordmark, both from Google Fonts with local fallbacks.
Is Sealmark a real company?
Sealmark and all the copy are placeholders for your own name and words. Free to use and adapt for personal and commercial sites.
More AI services templates like Operating Certificate
Same content, different designs. Operating Certificate is listed in AI website templates, Agency website templates, One page website templates, Landing page templates, Homepage templates, HubSpot themes and WordPress block themes. Or browse the full gallery.
Expansion Joint
Mineral gray and ultramarine page over a macro photo of an orange expansion joint set between two concrete slabs.
- 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.