Analytics Dashboard Template
Demo brand: HALVARD · Analytics / operations dashboard · 10 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 marketing site for a data product: ten built routes covering the platform, integrations, pricing, a changelog, a demo booking route and a three-post notes section.
Brushed-steel instrument chrome carrying a sunk near-black readout screen. Everything is steel, ink and screen, in Geologica against Overpass Mono. One signal colour — lime — spent only where it is a fill or a stroke: the live trace, the active tab, the CTA. Never as text on the ground.
The signature move is the acquisition sweep. Scroll drives a phosphor sweep bar across a pinned near-black scope; the live 72-sample trace is revealed only behind the head, and each KPI tile latches its figure the instant the sweep crosses its column. It behaves like a monitoring instrument writing its trace on a clock — and scroll is the clock.
The 10 pages you get
- Home
/ - The acquisition sweep, the console, and the demo close.
- Platform
/platform/ - The panels the console draws. For a data product this is the substance page.
- Integrations
/integrations/ - The warehouses and tools it reads. The page that answers "will it work with our stack" before a call.
- Pricing
/pricing/ - Team, Scale and Enterprise. Where every B2B visit ends.
- Changelog
/changelog/ - What shipped. The cheapest possible proof that the product is alive — and the page most SaaS sites never build.
- Book a demo
/demo/ - A working form plus live tel: and mailto: paths.
- Notes
/blog/ - A wired content collection — add an .mdx file and it appears here and in the sitemap.
- Two worked articles
/blog/… - A chart should morph, not cut; define the metric once and let two panels agree. Both are product arguments with opinions in them.
- 404
/404 - Designed, not default. Keeps the navigation.
What is in the build
- A scroll-driven phosphor sweep across a pinned scope, revealing a live 72-sample trace only behind the head
- KPI tiles that latch their figure at the instant the sweep crosses their column, rather than counting up on load
- One signal colour used only as fill or stroke and never as text on the ground — a rule enforced across the build
- A changelog route, the cheapest proof of life a software product has
- An integrations route that answers the stack question before a sales call happens
- Series, KPI, breakdown, tier, integration and release data as typed structures in
src/data - Geologica with Overpass Mono, both self-hosted; a working demo form plus live tel: and mailto:
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 62 different worlds reading as one design system in different paint.
- The world
- Brushed-steel instrument chrome carrying a sunk near-black readout screen. Everything is steel, ink and screen; one signal colour — lime #aee000 — is spent only where it is a fill or stroke (the live trace, the active tab, the CTA), never as text on the ground.
- The mechanic
- "The Acquisition Sweep": scroll drives a phosphor sweep bar across a pinned near-black scope; the live 72-sample trace is revealed only behind the head, and each KPI tile latches its figure the instant the sweep crosses its column — a monitoring instrument writing its trace on a clock, scroll being the clock.
- Loud channel
- Moving set-piece
- Imagery. Desaturated steel monitor feed
- Type & palette
- Geologica · Overpass Mono
-
#c9d0d7#171c22#aee000
Who it is for
Built for analytics, observability, BI and operations-console products selling to teams. It suits a product whose screenshot is the pitch. For developer infrastructure the devtool build speaks that audience more directly; for a payments or fintech product, the fintech one.
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 put my own product screenshots in?
Yes, and you should — but note that the scope is drawn from data rather than being a screenshot, which is why it animates honestly. Most data products are better served by a real drawn panel than by a PNG of the app.
Why is the accent never used as text?
Because a lime at that saturation does not hold contrast as body copy on a steel ground. Restricting it to fills and strokes keeps the signal meaning "live" rather than meaning "brand colour", and keeps the page legible.
Is a changelog page worth building?
For a B2B data product, yes. It is the page a prospect checks to find out whether the company is still shipping, and it costs one .mdx file per release.
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
Moving set-piece
MIDSHIFT
Shift scheduling app
Loud
Display type
FENWRIGHT
Deterministic log replay
Loud
Moving set-piece
BELLWETHER
Developer tool / CI test selection
Loud
Display type
KELVERN
Payments / money movement
Loud
Moving set-piece