SaaS Website Template
Demo brand: FENWRIGHT · Deterministic log replay · 21 routes · Astro 7 + Tailwind 4
Live preview
The demo is a full desktop site. Open it in a new tab ↗
About this saas website template
A complete marketing site for a developer tool or technical SaaS: an install command in the hero, a live product demo, how-it-works, pricing with a usage calculator and a page per plan, docs pages, security, a journal, an FAQ and a contact page. Twenty-one built pages, all driven by content files.
It looks like a serious engineering product. Light, docs-like pages in cool white, one dark code band for the interactive demo, graph-paper and concrete textures, quiet engineering photography, and one emerald accent. Mona Sans set wide for headings, Hanken Grotesk for everything else, and the system monospace for code.
Every section answers what an engineer checks before installing: how fast is setup, what does it actually do, what will it cost at my volume, and where do existing tools stop. The replay demo lets them use the product on the page. Motion is one soft reveal.
The 21 pages you get
- Home
/ - Headline with a copyable install box, the interactive replay timeline, promises, plans, the story, how it works, the usage calculator, a yes/partial/no comparison, metric-led quotes, journal and FAQ.
- How it works
/how-it-works/ - From install to root cause, step by step, with the product views.
- Pricing
/pricing/ - Events per month and retention give a price for every plan, with the cheapest marked.
- Plan pages
/pricing/…/ - Free, Team and Enterprise, each with limits and what is included.
- Docs
/docs/ - Documentation index. Add a Markdown file and it appears here.
- Docs pages
/docs/…/ - Quickstart, SDKs and the Replay API as written pages.
- Security
/security/ - Data handling, redaction and hosting options.
- About
/about/ - The company and why it was built.
- Journal
/journal/ - Tagged posts with a docs sidebar. Add a Markdown file and it appears here.
- Articles
/journal/…/ - Three engineering articles.
- FAQ
/faq/ - A searchable question list that shows everything without JavaScript.
- Contact
/contact/ - Demo and sales form that pre-selects plan and topic from the page you came from.
- Privacy and terms
/legal/…/ - Two starter legal pages on a shared layout.
- 404
/404 - Designed, with a way back.
What is in the build
- An interactive product demo: scrub a recorded timeline and watch the event log and state update, with a static fallback without JavaScript
- A usage-based pricing calculator that picks the cheapest plan, with rates in one data file
- A copyable install command, plan pages and docs pages as content collections
- A searchable FAQ and a feature comparison with yes, partial and no states
- Engineering photography with logos removed, optimised to AVIF and WebP by Astro
- All company details in one file, and one accent colour that rebrands the whole site
- Vitest and Playwright suites included, with tests for the demo and the calculator
The design decision
Every template in this catalog is loud in exactly one channel and deliberately quiet in the other three. That single rule is what stops 65 different worlds reading as one design system in different paint.
- The world
- A light, docs-like developer product: cool white pages, one dark code band for the live demo, graph-paper and concrete textures, quiet engineering photography, and one emerald accent.
- The mechanic
- A developer-tool site built to convert engineers: an install command with copy button, a replay timeline you can scrub through event by event, a usage calculator that picks the cheapest plan, plan pages, docs pages, a yes/partial/no comparison and metric-led quotes. Motion is one quiet reveal.
- Loud channel
- Imagery
- Imagery. Quiet engineering photography, no faces
- Type & palette
- Mona Sans · Hanken Grotesk
-
#fafbfc#0f1720#047857
Who it is for
Built for developer tools, APIs, observability, data and infrastructure products, and any technical SaaS that sells to engineers. It suits a product with a CLI or SDK install, usage-based pricing and a demo worth trying on the page.
Under the hood
- Astro 7 · static output, zero client framework
- Tailwind 4 · one @theme block holds the palette
- MDX content collections for the blog
- GSAP + Lenis for the scroll work, reduced-motion aware
- Self-hosted woff2 — no Google Fonts request
- Sitemap, canonicals and per-route meta wired
- Vitest + Playwright suites in the repository
- Zero third-party requests · strict CSP-ready
How to get started
- 01 Accept the repository invite and clone it.
- 02 Run
npm install, thennpm run dev. - 03 Replace the content in
src/data/with your own — that is where the brand, the copy and every list live. - 04 Swap the images in
public/images/and the palette in the@themeblock. - 05 Run
npm run buildand deploydist/anywhere static.
Questions
Can I replace the replay demo with my own product?
Yes. The demo is one component fed by a data file of events and state. Replace the data and the panels with your own product’s, and the page around it stays the same.
Can I change the pricing formula?
Yes. Plans, included volume, overage rates and retention prices live in one data file. The calculator, the plan pages and the tests follow.
Can I use the photographs?
Yes. They are from Pexels, which allows commercial use, and each one is listed with its source and any retouching in LICENSING.md. Device and server logos were removed.
What exactly do I get for $49?
Access to a private GitHub repository holding the complete Astro source of this template — every route you see in the preview, the content model, the images and the tests. Updates arrive in that same repository.
How many sites can I build with one licence?
As many as you like, for yourself or for clients. The licence is per buyer, not per project. The one thing you may not do is resell or redistribute the source as a template, theme or starter kit.
Do I need to know Astro?
It helps, but the common case is editing content and colour. Content lives in typed objects under src/data, colour lives in one @theme block, and npm run dev shows the result. Deploying is a static folder — Cloudflare Pages, Netlify and Vercel all take it as-is.
Is anything loaded from a third party?
No. Fonts are self-hosted woff2, there is no analytics, no tag manager, no CDN script and no external CSS. The build ships static HTML under a strict Content-Security-Policy.
More software & saas templates
WRACKLINE
Tide prediction app
Loud
Imagery
MIDSHIFT
Shift scheduling app
Loud
Imagery
BELLWETHER
Developer tool / CI test selection
Loud
Imagery
KELVERN
Payments / money movement
Loud
Imagery
HALVARD
Analytics / operations dashboard
Loud
Imagery