Oktavo - AI and SaaS Startup HTML Template

A complete website template for AI and SaaS startups, with 24 home pages for 24 kinds of product: AI agents, AI writing assistant, AI support chatbot, product analytics, CRM, project management, AI image studio, LLM API for developers, AI meeting notes, spend management, AI recruiting, AI voice agent, e-mail marketing, AI code assistant, mobile app, AI video editor, security monitoring, startup waitlist, AI research assistant, AI for online stores, no-code app builder, scheduling, AI translation and an AI automation agency. The design looks like a risograph print: cream paper, ink-black lines, two fluorescent inks printed slightly out of register, halftone dots, hard offset shadows, stamps and registration marks, in pink and teal or any of 12 ink pairs.

Besides the marketing pages you get the pages a software company needs after launch: product pages, pricing, documentation, an API reference, a help center, a changelog, a roadmap, a status page and app screens such as a dashboard, an approvals inbox, settings and billing. Product interfaces are drawn in HTML and CSS, not pasted in as screenshots, so you can edit every label.

Built on Bootstrap 5.3.8 with plain JavaScript. No build step and no jQuery: open index.html and it works.

What's included

• 109 HTML pages, plus a right-to-left copy of every page in the rtl/ folder
• 24 home pages: AI agents platform, AI writing assistant, AI support chatbot, Analytics SaaS, CRM for small teams, Project management, AI image studio, LLM API for developers (dark), AI meeting notes, Spend management, AI recruiting, AI voice agent, E-mail marketing, AI code assistant (dark), Mobile app, AI video editor, Security SaaS (dark), Startup waitlist, AI research assistant, AI for online stores, No-code app builder, Scheduling SaaS, AI translation, AI automation studio
• 6 one-page sites: AI agents, Meeting notes, Support chatbot, Mobile app, Developer API and Automation agency
• 6 landing pages for ads and launches: Free trial, Book a demo, Webinar sign-up, E-book download, Product launch, Switch from a competitor
• Product: Features, Agent builder, Approvals, Knowledge, Integrations, Integration details, Analytics, Security, Models, Agent templates, Template details, Changelog, Roadmap, System status, Compare
• Solutions: Customer support, Finance ops, Sales ops, People ops, IT helpdesk, Marketing ops, Startups, Enterprise
• Pricing: Pricing with a monthly / yearly switch and a seat cost calculator, Usage-based pricing with a cost estimator
• Customers: Customer stories, Case study
• Docs & resources: Documentation, Docs article, API reference, Blog (3 layouts), Article, Guides, Guide, Webinars & events, Webinar, Community, Help center, Help article, AI glossary
• Company: About (2 layouts), Team, Careers, Job details, Press kit, Partners, Contact sales, Offices & contact
• App screens: Dashboard, Agents, Agent details, Approvals inbox, Settings, Billing, printable Invoice
• Account: Log in, Sign up, Reset password, Onboarding
• Utility & legal: UI elements, Search results, Waitlist, 404, Coming soon, Maintenance, Thank you, Privacy policy, Terms, Cookie policy, Data processing agreement
• 12 e-mail templates: welcome, onboarding day 2, team invite, approval needed, weekly report, trial ending, plan upgraded, receipt, payment failed, password reset, webinar invitation, newsletter
• HTML documentation, readable and minified CSS and JS, SCSS sources (25 partials), custom.css for your own styles

Technical details

• Bootstrap 5.3.8 and Bootstrap Icons 1.13.2 (MIT), included in assets/vendor
• Plain JavaScript, no jQuery
• Tested in the latest Chrome, Edge, Firefox and Safari at phone, tablet and desktop widths, in light and dark mode
• The forms need a server with PHP 7.4 or newer and mail(); the mbstring and cURL extensions are optional. All other pages are static HTML.

Good to know

• Demo photos are not included. The live preview uses photos from Unsplash for presentation only. In the download every image is a labelled placeholder (assets/img/placeholder/) showing its size, and a list links to the free Unsplash originals.
• Forms send e-mail only through the PHP files on your own server, after you set your address in them. In the live preview they run in demo mode and send nothing.
• This is a website template, not a working AI product or SaaS back end. Dashboards, agent runs, the status page, analytics, usage figures and calculator results are sample data for you to replace or connect to your own app.
• Security, privacy and DPA pages are layouts with example text. They are not legal advice and do not certify anything: write your own policies and claims with your adviser.
• The template sends no tracking data; the Google Analytics example runs only if you add it and the visitor accepts analytics cookies.
• All company names, people, customers, quotes, prices and figures in the sample content are fictional.

Credits

• Bootstrap 5.3.8, Bootstrap Icons 1.13.2 (MIT)
• Bricolage Grotesque, Instrument Sans, JetBrains Mono (SIL Open Font License 1.1)
• Preview only: photos from Unsplash

Changelog

Version 1.0.0 (20 Oct 2026)

• First release.
• 109 HTML pages: 24 home pages, 6 one-page sites, 6 landing pages, product, solutions, pricing, docs, blog, company, app screens and account pages, with a right-to-left copy of every page.
• App screens with sample data: dashboard, agents, agent details, approvals inbox, settings, billing and a printable invoice.
• Documentation and API reference layouts, help center, guides, webinars, community and an AI glossary.
• Two pricing pages with a monthly / yearly switch, a seat cost calculator and a usage cost estimator.
• 12 ink skins, custom colour picker, light and dark mode, three corner styles, paper grain and a riso / natural photo switch.
• 12 responsive e-mail templates.
• PHP contact and newsletter handlers with spam protection, an optional CSV copy and Mailchimp.
• Cookie consent with categories and Google Consent Mode v2.
• HTML documentation.

Features

• Risograph design system you can reuse anywhere: overprinted highlight words, halftone dot fields, registration marks, stamps, fold lines, stencil numbers, riso avatars and duotone "riso" photos
• Product mock-ups in HTML and CSS: agent runs, approval cards, dashboards, charts, code editors, chat windows and phone screens, all editable text
• An interactive demo on many home pages, for example a support chat demo with a cost calculator, a before / after image slider, a spend savings calculator, a voice call player, a subject line tester and a cited answer explorer
• App screens: dashboard, agent list and details, approvals inbox, settings and billing in an app layout with a sidebar, plus an invoice that prints on white paper. They are front-end layouts with sample data, labelled as such
• Pricing: plan cards with a monthly / yearly switch, a seat cost calculator, a usage-based cost estimator and a comparison table
• Docs and API reference layouts with a sidebar, table of contents, code blocks with copy buttons, language tabs and a docs search
• 12 ink pairs (fluo pink + teal, tangerine + cobalt, sunflower + raspberry, mint + grape, scarlet + lagoon, lagoon + coral, lilac + orange, lemon + indigo, coral + green, grape + gold, forest + pink, ink only), a custom colour picker, cream or black paper (dark mode), three corner styles, a paper grain switch and a riso / natural photo switch in the style panel
• Carousels, ARIA tabs, filters, counters, accordions, countdowns, an animated agent run in the hero, a reading progress bar and a table of contents
• Live site search while you type, and a search results page
• Announcement bar, newsletter popup, back-to-top button with a progress ring
• Cookie consent with categories and Google Consent Mode v2: analytics and marketing scripts run only after consent
• PHP forms with AJAX sending, spam protection (honeypot, time check, rate limit, optional reCAPTCHA v3), an optional CSV copy of every entry and a Mailchimp newsletter
• Sign-in, sign-up, onboarding, settings and billing forms are front-end demos that check the input in the browser; connect them to your own app
• SEO: unique titles and descriptions, Open Graph, schema.org Organization and SoftwareApplication data, sitemap.xml, robots.txt
• Fonts are self-hosted (Bricolage Grotesque, Instrument Sans, JetBrains Mono), so the pages make no requests to Google Fonts
• Accessible markup: one h1 per page, skip link, visible focus, labels on every field, keyboard-friendly menus and tabs, reduced-motion support
• Deferred scripts, lazy-loaded images, minified CSS and JS, an icon font subset and .htaccess with compression and caching

Requirements

• A current web browser. Tested in the latest Chrome, Edge, Firefox and Safari
• A code editor to change the content, for example Visual Studio Code
• Any web hosting for the static pages (Apache, nginx, LiteSpeed or a static host); no database
• PHP 7.4 or newer with mail() only for the contact and newsletter forms (assets/php/); the mbstring and cURL extensions are optional. All other pages are plain HTML and work without PHP
• Optional: a Mailchimp account for the newsletter and a Google reCAPTCHA v3 key for extra spam protection
• Optional: a Sass compiler, only if you want to edit the SCSS sources instead of style.css. It is not needed to use the template
• To run a real product behind the pages (sign-in, dashboards, billing, status data): your own application, authentication and payment provider. The template is the front end only

Instructions

1. Unzip the download. The oktavo/ folder is the template; the documentation is in Documentation/index.html.
2. Open oktavo/index.html in your browser to look around. No build step is needed.
3. Pick your colours: choose one of the 12 ink pairs, or change --brand-base and --second-base in section 02 of oktavo/assets/css/style.css. Put your own CSS in oktavo/assets/css/custom.css.
4. Choose your home page (rename it to index.html), delete the pages you do not need and replace the texts, prices and sample data. Replace the placeholder images in oktavo/assets/img/placeholder/ with your own photos.
5. Put your company name, e-mail and address into every page with find and replace.
6. Set your e-mail address in oktavo/assets/php/contact.php and newsletter.php. Optionally add your Mailchimp and reCAPTCHA keys. The forms send only when these PHP files run on your server.
7. Replace https://oktavo.example with your domain, then upload the contents of the oktavo folder to your web hosting. Using the RTL version? Upload the rtl/ folder too.
8. Optional: switch the pages to style.min.css, main.min.js and the icon subset for a faster site (see the documentation).

The documentation explains every page, component and setting, with a list of what runs on sample data. For help, send us a message through this item page.