Kairo: Astro SaaS Template
Dark-cinema AI & SaaS website template
About This Template
Kairo is a premium dark-cinema SaaS template built for AI platforms, automation tools, and developer products. Eighteen production-ready pages cover features, pricing, integrations, documentation, API reference, changelog, blog, case studies, careers with individual job postings, about, contact, status, and legal pages. Signature hero with animated SVG chronometer and iris-reveal dashboard, GSAP SplitText character scramble, bento feature grid, DrawSVG timeline, and sticky technical specs with an animated terminal.
Signature
The hero features an animated SVG chronometer with three concentric rotating arcs, paired with an iris-reveal dashboard that expands from a zero-radius clip-path circle as the user scrolls — like a camera shutter opening to reveal the product interface beneath.
Features
- 18 complete pages — Home, Features, Pricing, Integrations, Docs, API Reference, Changelog, Blog, Post, Case Studies, Case Study, About, Careers, Job Posting, Contact, Status, Privacy, Terms, 404
- Animated SVG chronometer hero with three rotating arcs driven by GSAP
- Iris reveal — dashboard image expands via clip-path circle like a camera shutter on scroll
- SplitText character scramble headline animation on load
- Bento feature grid — asymmetric 6-card magazine layout
- DrawSVG animated connector line on 3-step timeline
- Sticky technical specs with animated terminal code block
- 12 integration tiles with hover glow — Slack, GitHub, Stripe, etc.
- 3-tier pricing cards with feature matrix
- Documentation layout with sidebar navigation
- 6 content collections — blog, case studies, changelog, integrations, jobs, team members
- Infinite logo marquee trust bar with 8 brand logos
- Lenis smooth scroll + GSAP ScrollTrigger on all sections
- Self-hosted fonts — Syne Variable (headings) + Geist (body) via Fontsource
- TypeScript strict mode — zero any
Need a CMS?
Every template can be delivered on EmDash, Cloudflare's open-source CMS and our main one, or as a WordPress or Sanity build. Your content team edits copy and images without touching code. Tell us which one you need and we will quote the conversion.
Deployment
Tech Stack
Typography
Variable geometric heading (Syne) + modern sans body (Geist) — self-hosted
Color Palette
Dark cinema — deep near-black (#0A0A08), amber/bronze accent (#C97B2E), steel-blue primary (#8BA8BE)
Details
Kairo in detail
Last updated:
Who it’s for
AI startups, automation tools, developer platforms and B2B SaaS teams that need a marketing site with pricing, docs, changelog and status pages.
What makes it different
- Covers the pages a software company actually needs beyond the homepage: docs, API reference, changelog, status, careers and legal.
- Pricing shows three plans side by side with a checklist of what each one includes.
- Blog posts, case studies, changelog entries, integrations, job openings and team members are each stored as their own content collection.
Pages included
- 01Home: chronometer hero, dashboard reveal, bento features, timeline and terminal specs
- 02Features: product capabilities one by one
- 03Pricing: three plans with a feature comparison
- 04Integrations: tiles for connected tools
- 05Documentation and API reference with sidebar navigation
- 06Changelog: release history
- 07Blog index and post
- 08Case studies index and case study detail with results
- 09About, Contact and Status pages
- 10Careers index and individual job postings
- 11Privacy policy and terms of service
What’s in the download
- README.md, DOCUMENTATION.md, CUSTOMIZATION.md and DEPLOYMENT.md guides
- LICENSE.md and IMAGE-CREDITS.md
- Six content collections: blog, case studies, changelog, integrations, jobs and team members
- Self-hosted Syne and Geist fonts via Fontsource
Inside the template
