WebsiteAI startup website
Tessera
AI startup website with a scripted product demo in the hero, a usage-based pricing estimator, docs and a changelog.
More screenshots
Plans with a monthly or annual toggle 
Usage estimator that recommends a plan 
Use case with fields, confidence and routing rules 
Quickstart docs with code blocks
About Tessera
A marketing and docs site for an AI agent startup, shown here as a fictional platform that reads, checks and routes business documents. The hero plays a demo built in HTML, SVG and CSS: an invoice is read field by field with confidence scores, an uncertain field goes to a human review lane, then JSON and a routing decision appear. Product page with UI fragments, four use-case pages, pricing with a monthly or annual toggle and a usage estimator, a quickstart with code blocks, changelog, security and trust, blog, about with open roles, contact and waitlist. Dark by default with a designed light mode. Astro and Tailwind CSS 4.
Best for AI and machine learning startups, document automation and agent platforms, API-first SaaS products and the studios that build their launch sites.
Features
Hero product demo
An invoice is read field by field with confidence scores, one uncertain field waits for a reviewer, then the JSON and routing decision appear. HTML, SVG and CSS with the timeline in data attributes, a Replay button, and the final state shown without JavaScript or with reduced motion.
Pricing and estimator
Three plans from one JSON file with a monthly or annual toggle, and a usage estimator: a documents-per-month slider from 200 to 100,000 that recommends a plan and breaks down the base price and overage.
Product and use cases
A product page told through small HTML and SVG interface fragments (schema, confidence calibration, review queue, routing rules, audit log) and four use-case pages driven by Markdown front matter.
Docs and changelog
A quickstart in five steps with code blocks and copy buttons, an endpoints table, and a changelog of eight releases tagged new, improved or fixed.
Trust and company
Security and trust page with retention, controls and a disclosure policy (no certification badges), about page with team and open roles, a blog with three posts.
Contact and waitlist
Both forms validate in the browser with inline errors and a honeypot, and post JSON to Formspree or your own webhook once you set an endpoint.
Dark and light
Dark by default with a mineral teal accent and a paper light mode designed on its own, following the system and saved before first paint. Mona Sans with its width axis used on purpose, Fragment Mono for data.
SEO built in
Organization, SoftwareApplication with offers from the plans, FAQPage, BreadcrumbList and BlogPosting structured data, Open Graph and a sitemap.
What's included
- Home with the hero demo
- Product
- Use cases and 4 use-case pages
- Pricing with usage estimator
- Quickstart docs
- Changelog
- Security and trust
- Blog and 3 posts
- About and careers
- Contact
- Waitlist
- Legal notice and privacy
- 404
Tech stack and fit
Built with
- Astro 5
- TypeScript
- Tailwind CSS 4
- Content collections
Who it's for
AI and machine learning startups, document automation and agent platforms, API-first SaaS products and the studios that build their launch sites.
Tags
Tessera FAQ
Does Tessera include an AI model or an API?
No. It is the marketing and docs site of a fictional product. The hero demo is scripted in HTML and CSS, and the API in the quickstart is fictional; point the docs at your own product.
How do I change the hero demo?
The timeline is declared in the markup of src/components/Demo.astro in milliseconds (data-scan, data-done, data-fix, data-show, data-lit) and played by src/scripts/demo.ts. Edit the invoice text, field rows and JSON there to tell your own story.
Where do the plans and prices come from?
From src/content/plans.json: name, monthly and annual price, included documents and overage. The pricing cards and the usage estimator both read it; a plan without a public price is estimated from an indicative base you set in src/pages/pricing.astro.
Do the contact and waitlist forms send anything?
Not in the demo: they validate and show a success state. Set data-endpoint on each form to a Formspree form or your own webhook and the script posts the fields as JSON.
Can I use it for a product that is not about documents?
Yes. Use cases, changelog entries, blog posts, team, roles and FAQ are content collections; the product fragments and the demo are plain HTML and SVG components you rewrite for your product.
Is there a light mode?
Yes. Dark is the default; the header toggle switches to a separately designed light mode, follows the system setting until the visitor chooses, and is applied before the page paints.
Are the images included?
Yes, four abstract generated images (the social image and three blog covers), with the prompts in src/assets/PROMPTS.md. Product visuals are HTML and SVG, so there are no screenshots to replace.
How much does Tessera cost, and are updates included?
$29 USD, a one-time purchase on Gumroad with instant download. There is no subscription and every future update of Tessera is free.
Can I use Tessera for a client project?
Yes. The license covers personal and commercial projects, including client work. Reselling or redistributing the template itself is not allowed.
Related templates
Close in purpose or features to Tessera. Browse all 31 templates.
Tessera, $29 once. Click through the whole demo before you decide.