AI Observability Dashboard
A calm, dark workspace for tracing, scoring and replaying model calls.
Pro template: preview every page free, start a site with Pro.
Overview
About the AI Observability Dashboard template
The page sits on a dark, near-black canvas, so thin lines, small labels and single accent marks carry the colour. A slowly morphing three-dimensional contour sphere fills the hero, tilting toward the pointer as you move; when motion is turned off or WebGL is unavailable it turns into a static ring. Manrope and Plus Jakarta Sans keep the copy warm and readable, while JetBrains Mono marks anything that behaves like a trace, a score or a span. Lucide icons and GSAP transitions keep the rest of the page quiet rather than loud.
Everything lives on one long page. It opens with a headline and a workspace button, then a trace timeline where retrieval, tool calls, guardrails and generations sit together with cost, latency and quality. Evaluations come next, with version-against-version comparison and a note about failing a pull request in CI. A replay panel shows the same customer question answered by two model versions, output by output, with latency noted alongside. Then three monitoring cards, a one-line setup note, plan columns, an FAQ accordion, an email sign-up and a full footer.
This suits teams selling developer or platform software who want the page to feel like the product itself: precise, technical, unhurried. Because the sample business is an observability product for production AI, the copy leans on traces, evaluations and monitors — vocabulary you can swap for your own. Founders and small product teams can publish it without bringing in a designer, and the structure holds up for any tool whose value shows up in a dashboard: a data platform, a monitoring service, an internal analytics product.
What's inside
Every section, ready to make yours
The page from top to bottom.
- 01
Hero and contour sphere
A large headline, a short supporting line, a start button and the animated contour sphere behind the text.
- 02
Trace workspace preview
A timeline showing retrieval, tool calls, guardrails and generations on one trace, scored for cost, latency and quality, with an inspect prompt.
- 03
Evaluations
Scoring every change against real traffic cases, with version-against-version comparison and a CI gate that fails a pull request when a score drops.
- 04
Replay comparison
The same customer question answered by two model versions side by side, with the differences and their effect on latency called out.
- 05
Monitoring cards
Three cards covering guardrails, cost attribution and monitors, each with a short explanation of what it watches.
- 06
One-line setup
A single line of code presented as the way to instrument an existing app and emit standard spans.
- 07
Plan tiers
Three plan columns with a monthly and annual toggle, each listing what it includes and a button.
- 08
FAQ accordion
Five expandable questions about request path, providers, sensitive data, what counts as a trace and going over a plan.
- 09
Email sign-up
A work email field with a short reassurance line, closing the page before the footer.
- 10
Footer
Product, Resources and Company link columns with a one-line description of the business.
Desktop and phone
On every screen
The live home page on a laptop and a phone. Hover over either to scroll through it.
Features
What you get
Animated contour sphere
A slowly morphing hero backdrop that tilts toward the pointer and becomes a static ring when motion or WebGL is unavailable.
Trace timeline preview
A selectable trace view that shows retrieval, tool calls, guardrails and generations with cost, latency and quality scores.
Side-by-side replay panel
Two versions of the same answer displayed together so output differences, and their latency cost, read at a glance.
Three-font type system
Manrope and Plus Jakarta Sans for reading, JetBrains Mono for anything that behaves like a trace, score or span.
Phone-ready layout
The full page, including the workspace preview and plan columns, adapts to smaller screens.
Connected email form
The closing work email field can deliver messages to your address once connected in the editor, with no server to set up.
Make it yours
Customize AI Observability Dashboard
- 1Replace the Northlight name, headline and supporting lines with your own product's language throughout the page and footer.
- 2Rewrite the two sample answers in the replay panel with your own before-and-after responses so the comparison matches what your product actually changes.
- 3Point the menu items at your own sections, or remove sections you don't need — each block stands on its own.
- 4Use the plan columns for your own tiers, or drop the section entirely if you would rather keep the page to a single sign-up.
- 5Connect the work email field in the editor so sign-ups arrive in your inbox.
From template to live site
- 1. Open it in the editor. Every page and file comes with it.
- 2. Make the changes. Click any text or image to edit it, or describe what you want and let the AI do it.
- 3. Publish. Your site goes live at its own address, ready to share.
FAQ
Questions about this template
How many pages does the template include?
One long page, from the hero through to the footer. Navigation links jump to sections on that same page.
Does the animated hero work on phones?
The page adapts to smaller screens throughout. When motion is reduced or WebGL is unavailable, the sphere is replaced by a static ring.
Which fonts does it use?
Manrope and Plus Jakarta Sans carry the headings and body copy, and JetBrains Mono is used for figures and anything that reads like a trace.
Where do email sign-ups go?
Once the form is connected in the editor, messages are delivered to your email address — there is no server to set up yourself.
Can I use it for a product that isn't about AI?
Yes. The layout suits any software product whose value shows up in a dashboard; swap the traces, evaluations and monitor wording for your own.
Can I remove the plan columns or the FAQ?
Both sections are self-contained, so you can delete either one and the page still reads in order from hero to sign-up.
Is this template free?
This is a Pro template. Anyone can preview every page; starting a site from it needs the Pro plan.
How do I start a website from this template?
Select "Use this template". It opens in the htmlhost editor, where you can change text and images visually or ask the AI, then publish your site in one click.
Keep browsing
More dashboard templates
Start with AI Observability Dashboard
A dark, single-page dashboard template for an AI observability product, with trace timelines, evaluation comparisons, replay, plan tiers and an email sign-up.
Updated October 2026