Dark SaaS Dashboard

HTML · CSS

codeinfoweb.com/design-prompts/saas-dashboard-dark

The prompt

Build a dark analytics dashboard for a SaaS product called Northwind, using only HTML and CSS.

Typography:
- Instrument Sans from Google Fonts for the interface, weights 400 to 700
- JetBrains Mono for every number, with font-variant-numeric: tabular-nums so figures do not jitter
- Headings at -0.025em letter-spacing, big numbers tighter at -0.03em

Palette:
- Near-black ground #0A0C10, panels #11141B, hairline borders #1F2530
- A single lime accent #C8F751 with near-black text on it, used only for: the active nav item, the chart line, the upgrade button and one avatar
- Green, amber and rose reserved for status only, never decoration
- Lay a faint 46px grid over the background plus one soft lime radial glow in the top right

Layout:
- Sidebar 252px: wordmark with an icon mark, two labelled nav groups (Workspace, Revenue) with inline SVG icons, a count badge on Reports, and a plan-usage card pinned to the bottom with a progress meter
- Header: page title, one supporting line, a search field, a date-range chip and an avatar
- Four KPI cards: label, large mono value, a coloured delta pill, and a mini sparkline drawn as inline SVG
- A revenue panel with a legend, a dashed previous-period line, a solid accent line with a gradient area fill and a glow, dashed gridlines and a mono x-axis
- Below that a two-column split: a five-row activity table with initial avatars and status pills, beside a top-channels list with animated bars

Motion, all CSS:
- KPI cards rise and fade in, staggered 70ms apart using a --d custom property
- The chart line draws itself with stroke-dasharray and stroke-dashoffset, then the area fill and the end dot fade in after it
- Progress meters grow from zero width, staggered
- Every hover transition 160-200ms, ease
- A prefers-reduced-motion block switches all of it off and shows the final state

Rules:
- One HTML file, one CSS file, no JavaScript at all
- CSS custom properties for every colour and radius
- Use color-mix() for the translucent status and accent tints
- KPI grid drops to two columns under 1080px and one under 620px; the sidebar becomes a scrollable horizontal bar under 900px; the least important table column is hidden under 620px
- Semantic HTML: real table markup with scope on the headers, aria-labels on each section, visible focus states everywhere

Return the complete code, ready to open in a browser.

Edit anything above before copying. Change the first line to rename the build, or the style word to shift the look.

About the dark saas dashboard prompt

An analytics dashboard on a near-black ground with a sidebar, four KPI cards, an area chart and a recent-activity table with status pills.

What you get

A 252px sidebar with two labelled nav groups, inline SVG icons, a count badge and a plan-usage card pinned to the bottom
Four KPI cards with tabular mono figures, coloured delta pills and their own inline sparklines
A revenue panel with a dashed previous-period line, a gradient area fill and a glowing accent line that draws itself
A five-row activity table with initial avatars and colour-coded status pills
A top-channels list with percentage bars that grow from zero on load
A header with a search field, a date-range chip and an avatar

Techniques it uses

Worth knowing whether you run the prompt or write the code yourself.

Tabular figures

font-variant-numeric: tabular-nums forces every digit to the same width, so a value ticking from $248,910 to $249,010 does not shift the layout. Essential for any dashboard.

Self-drawing SVG line

The chart path sets stroke-dasharray and stroke-dashoffset to its own length, then animates the offset to zero. No JavaScript and no charting library.

color-mix() for status tints

Each pill background is color-mix(in srgb, var(--ok) 14%, transparent). One token defines both the text colour and its tint, so they can never drift apart.

Staggered entrance with a custom property

Each card carries style="--d:0" through to 3, and the CSS reads animation-delay: calc(var(--d) * 70ms). Adding a card needs no new CSS rule.

How to adapt it

Change the accent colour

Every colour is a custom property at the top of the stylesheet. Swap --accent and --accent-ink and the nav highlight, chart line, upgrade button and avatar all follow without touching anything else.

Swap the area chart for bars

Ask the model to replace the path element with a row of rect elements on the same 900 by 260 viewBox. The gridlines, axis labels and legend stay exactly as they are.

Add a fifth KPI card

Change .kpis to repeat(5, minmax(0,1fr)) and copy one card, incrementing its --d value so the entrance stagger stays even across the row.

Turn it light

Invert the four surface tokens and keep the accent. The status pills already use color-mix against transparent, so they adapt to the new background on their own.

Frequently asked questions

Which AI tools does this prompt work with?

It is plain text, so it works in Claude, ChatGPT, Cursor, Codex, v0 and any other model that writes code. Paste it as a single message and ask for the complete files.

Does the dashboard use a chart library?

No. The area chart is an inline SVG with a gradient fill, so the whole build stays as one HTML file and one CSS file with no dependencies.

Can I change the colours?

Yes. The palette sits in CSS custom properties at the top of the stylesheet. Change the accent and surface values and the rest of the dashboard follows.

Is the dashboard responsive?

Yes. The sidebar collapses to icons on tablet widths and the KPI cards stack to a single column on phones.

Can I use this with a real data source?

Yes, but the markup is static HTML. You would replace the hard-coded figures with template output from your framework. The CSS needs no changes.

Why does the chart not use Chart.js?

A single area chart is about twenty lines of SVG path data. Pulling in a charting library for that adds a dependency, a bundle and a render pass for no benefit.