Analytics Dashboard Template
Demo brand: HALVARD · Analytics / operations dashboard · 23 routes · Astro 7 + Tailwind 4
Live preview
The demo is a full desktop site. Open it in a new tab ↗
About this analytics dashboard template
A complete website for a SaaS analytics product: a working dashboard demo in the hero, an events-based pricing calculator, five solution pages, an integrations index, pricing, security, docs, a changelog, a journal, an FAQ and a contact form that picks up whatever plan the visitor chose. Twenty-three built pages, all driven by data and content files.
It looks like software people pay for. Cool white pages, white cards, slate type and one teal accent, with a single dark band behind the product demo. Real photography of desks, printed reports, packing tables and shop counters carries the colour. Instrument Sans for everything, IBM Plex Mono for the numbers only.
Every section answers what a buyer asks before signing up for a dashboard tool: what will I actually see, will it connect to what I use, what will it cost at my size, is my data safe, and how long does setup take. The demo and the calculator answer the first and third on the page. Motion is one quiet reveal.
The 23 pages you get
- Home
/ - Headline and CTA pair over a clickable dashboard (Revenue / Orders / Ops tabs, 7d / 30d / 90d range) on the dark band, promises, solutions, integrations, the story, setup steps, the pricing calculator, the plan matrix, metric-led testimonials, changelog and journal, grouped FAQ.
- Product tour
/product/ - The dashboard demo again, what each of the three dashboards shows, alerts, the Monday digest, share links and setup steps.
- Solutions
/solutions/ - Five kinds of business as cards, plus a typical-usage table (events, plan, monthly price) that stacks on phones.
- Solution pages
/solutions/…/ - Online shops, cafés and restaurants, wholesale, subscription boxes and agencies. A headline, usual plan and price, a written page, a result stat, the dashboard tiles and the tools they connect.
- Integrations
/integrations/ - Fourteen kinds of tool grouped by category, each with what it sends, the setup step and the plan it needs. Neutral monograms, no third-party logos.
- Pricing
/pricing/ - The events and seats calculator, the Free / Team / Business matrix, what counts as an event, and billing questions.
- Security
/security/ - Read-only access, UK data storage, access control, uptime figures and a placeholder line for your certification.
- About
/about/ - The founding story, a five-line timeline, beliefs and the team shown as initials, not faces.
- Changelog
/changelog/ - Releases with version, date, tag and notes, read from one data file.
- Docs
/docs/ - A getting-started guide with a sticky contents list and a code example for sending events by API.
- Journal
/journal/ - Article cards. Add a Markdown file and it appears here and on the home page.
- Articles
/journal/…/ - Three written pieces: the five numbers to read on Monday, why two tools disagree about the same day, and setting alerts that do not cry wolf.
- FAQ
/faq/ - Accordions grouped Data, Security and Billing, with jump links.
- Contact
/contact/ - Start free, book a demo or ask for a quote. Plan, events, seats and business type are pre-filled from the calculator and every CTA.
- Privacy and terms
/legal/…/ - Two starter legal pages on a shared layout.
- 404
/404 - Designed, with links back to the tour and pricing.
What is in the build
- An interactive dashboard demo built in HTML, CSS and SVG: KPI tiles, a line chart against the previous period, bars and a table, all from one data file you can replace with your own numbers
- Keyboard-usable tabs and a range switch that change the dashboard instantly, and it still shows the first view without JavaScript
- An events-based pricing calculator (events a month and seats → plan, monthly price, extra-event cost, yearly price) that hands its answer to the contact form
- Plans, prices and the comparison matrix defined once in a data file and shared by every page
- Solutions, integrations and journal articles as content collections
- Real office and small-business photography, optimised to AVIF and WebP by Astro
- One accent colour and two fonts in one CSS file, with contrast checked by the tests
- Vitest and Playwright suites included, with tests for the pricing logic, the dashboard tabs and the form pre-fill
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
- Cool white pages and white cards with slate Instrument Sans type, real office and small-business photography, one dark demo band and a single teal accent.
- The mechanic
- A dashboard demo built in code switches Revenue, Orders and Ops across 7, 30 and 90 days from one data file, and an events-and-seats pricing calculator picks the cheapest plan and pre-fills the contact form. Motion is one quiet reveal.
- Loud channel
- Imagery
- Imagery. Desks, printed reports, packing tables, shop counters
- Type & palette
- Instrument Sans · IBM Plex Mono
-
#f8fafc#0f172a#0d9488
Who it is for
Built for SaaS founders and small software teams selling an analytics, reporting, monitoring or operations product, and a good fit for any usage-priced B2B tool that needs a live product demo on the home page. It suits a product sold to small and mid-sized businesses on a free plan and self-serve pricing, with a sales conversation for bigger accounts.
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 show my own product in the demo instead?
Yes. The dashboard reads every number, label and table row from one data file. Change the tabs, tiles and series there, or replace the component with screenshots of your app if you prefer.
How do I change the plans and prices?
Edit the plans in the site data file: base price, included events, seats and the price per extra 1,000 events. The calculator, the plan matrix, the solution pages and the contact form all follow, and the tests check the calculator still picks the cheapest plan.
Why are the integrations not named after real products?
So you are not shipping other companies' trademarks. Each integration is a category with a neutral monogram. If you have permission to name specific tools, add them to the integrations file.
Where do sign-ups and demo requests go?
The contact form posts nowhere by default. Point it at your form backend or CRM, or change the "Start free" links to your app's sign-up page. The README shows both.
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
BELLWETHER
Developer tool / CI test selection
Loud
Imagery
KELVERN
Payments / money movement
Loud
Imagery