Developer Website Template
Demo brand: BELLWETHER · Developer tool / CI test selection · 24 routes · Astro 7 + Tailwind 4
Live preview
The demo is a full desktop site. Open it in a new tab ↗
About this developer website template
A complete website for a developer tool or technical SaaS: a hero with a CI run built in code, four feature pages, pricing with three plans, four docs pages, a changelog, a blog, security, about, FAQ and contact. Twenty-four built pages, all driven by content files.
It looks like the tools developers already trust. A near-black ground, one light band for pricing, real photography of desks, keyboards, server racks and fibre cabling, and one electric-violet accent. Host Grotesk for headings and text, Martian Mono only for code, terminal output and the numbers in the demos.
Every section answers what an engineering team asks before trying a new tool: what does it do on each pull request, what will it save us, what does it cost, what data leaves our machines, and how do we set it up. A savings calculator and a pick-the-changed-files demo do that on the page. Motion is one quiet reveal.
The 24 pages you get
- Home
/ - CI run terminal in the hero, promises, feature cards, story band, the four setup steps, savings calculator, changed-files demo, three-way comparison, pricing plans, engineer quotes, changelog and blog, grouped FAQ.
- Features
/features/ - All four features with the comparison table.
- Feature pages
/features/…/ - Four pages. Plan and price, key facts, a terminal example, long description, a quote and the other features.
- Pricing
/pricing/ - Free, Team and Enterprise plans, a plan-by-plan table, the savings calculator and billing questions.
- Docs
/docs/ - Install command and the docs list, with a help card.
- Docs pages
/docs/…/ - Four pages (quickstart, pipeline setup, configuration, reading the report) with side navigation, on-this-page links and previous/next.
- Changelog
/changelog/ - Five releases, newest first, tagged New, Improved or Fixed. Add a Markdown file to publish one.
- Blog
/blog/ - A lead post and a grid. Add a Markdown file and it appears here.
- Posts
/blog/…/ - Three written engineering posts on flaky tests, coverage and sharding.
- About
/about/ - The story, three things the company will not do and the founders, without face photos.
- Security
/security/ - What data is sent and what never is, security questions and a way to report a vulnerability.
- FAQ
/faq/ - Questions grouped under Setup, Security and Billing, with anchor links.
- Contact
/contact/ - A form that pre-selects plan and topic from any "start" or "talk to us" link.
- Privacy and terms
/legal/…/ - Two starter legal pages on a shared layout.
- 404
/404 - Designed, with links back home and to the docs.
What is in the build
- A working savings calculator: five sliders and a select turn suite size, suite time, runs, engineers and runner price into minutes saved, CI spend saved and net cost per month
- A changed-files demo: tick files in a small repository and the list of selected tests, count and run time update
- A CI run terminal in the hero built in HTML, so it stays sharp and edits like text
- Features, docs, changelog and blog as content collections, one Markdown file per entry
- Plans and prices in one file, shared by the pricing cards, the calculator and the contact form
- Real photography, optimised to WebP by Astro, and one accent colour that rebrands the whole site
- Strict security headers (no inline scripts), plus Vitest and Playwright suites
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
- Near-black ground with one light pricing band, Host Grotesk with Martian Mono for code only, real photography of desks, keyboards and server racks, and one electric-violet accent.
- The mechanic
- A CI run terminal in the hero, a working savings calculator (tests, suite time, runs, engineers, runner price → minutes and money saved), a changed-files demo that updates the selected tests, three plans, docs and a changelog. Motion is one quiet reveal.
- Loud channel
- Imagery
- Imagery. Dark desks, keyboards, server racks, fibre cabling
- Type & palette
- Host Grotesk · Martian Mono
-
#0c0d10#f2f2f5#6d28d9
Who it is for
Built for developer tools, APIs, infrastructure and CI products, and a good fit for any technical SaaS with a free tier, per-seat pricing and docs. It suits a small team that sells to engineers and needs pricing, docs and a changelog on day one, not just a landing 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
How do I change the calculator to my own product?
The maths lives in one data file: the rates, overheads and default values. The plans and seat price come from the site file, so the calculator, the pricing cards and the contact form always agree.
Where do the sign-up buttons go?
To the contact form with the plan or topic pre-selected. Point them at your app’s sign-up page or a payment link instead, and set the form’s action to your form backend; the README shows how.
Can I use the photographs?
Yes. They are from Pexels, which allows commercial use, and each one is listed with its source in LICENSING.md. Screens, laptop lids and labels were checked, and three photos were retouched to remove third-party marks.
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
FENWRIGHT
Deterministic log replay
Loud
Imagery
KELVERN
Payments / money movement
Loud
Imagery
HALVARD
Analytics / operations dashboard
Loud
Imagery