Data-Dense Dashboard demo
Data-Dense Dashboard

A high-density dashboard style packed with metrics, charts, and grid-arranged data panels for maximum information display.
Category: Data & Engineering
Era: 2020s Modern
Prompt: 13.8 KB · 1967 words
# BUILD PROMPT — LANDING PAGE: "DATA-DENSE DASHBOARD" (BI/ANALYTICS · DATA & ENGINEERING)

## 1. MISSION & CREATIVE BRIEF

**1.1 Role.** Act as a Senior Frontend Engineer and Expert UI Designer. Deliver a complete, production-quality landing page in a single first attempt — no stubs, no TODOs, no lorem ipsum.

**1.2 Product & Audience.** The page markets a fictional BI/analytics platform built for data and engineering teams (Data & Engineering category). Invent a concise, plausible product name. All user-facing copy must be written in **English**, technically credible, and specific to data pipelines, query performance, and dashboards.

**1.3 Style Definition.** "Data-Dense Dashboard" — BI/Analytics, 2020s Modern, full Light + Dark support. Keywords: multiple chart widgets, KPI cards, data tables, minimal padding (8–12px), space-efficient 12-column grid, dense but readable typography (12–14px), maximum information density. The landing page must feel like the product itself: the Hero embeds a working dashboard preview, and every marketing section uses compact, widget-style cards.

**1.4 Page Sections (exact order).** 1) Hero with live dashboard preview · 2) Features (3 cards) · 3) How It Works (3 steps) · 4) Testimonials (3 quotes) · 5) Pricing (3 tiers, middle featured) · 6) FAQ (5–6 items) · 7) Final CTA with email capture · 8) Footer with secondary links.

## 2. STRICT RULES & ARCHITECTURE

**2.1 CSS-First Architecture & Zero Inline CSS**
- All styling lives in `style.css`. **Forbidden:** `style="..."` attributes, `<style>` blocks in HTML, and presentational HTML attributes.
- Target everything via class/ID selectors. HTML stays semantic and style-agnostic — re-theming the site must require edits to `style.css` only.

**2.2 CSS Variables & Theme Tokens** — define in `:root`, override under `.dark`:

| Token | Light | Dark |
|---|---|---|
| `--primary` / `--primary-hover` | `#2563EB` / `#1D4ED8` | `#60A5FA` / `#3B82F6` |
| `--secondary` | `#6B7280` | `#9CA3AF` |
| `--bg-primary` | `#F5F5F5` | `#0F1117` |
| `--bg-secondary` | `#FEFEFE` | `#181C24` |
| `--bg-subtle` (hover rows, chips) | `#EBEDF1` | `#21262F` |
| `--text-primary` | `#333333` | `#E6E8EB` |
| `--text-secondary` | `#6B7280` | `#9CA3AF` |
| `--text-success` | `#15803D` | `#4ADE80` |
| `--text-error` | `#DC2626` | `#F87171` |
| `--border-default` | `#E2E4E8` | `#2A2F3A` |
| `--border-error` / `--border-success` | `#DC2626` / `#15803D` | `#F87171` / `#4ADE80` |

- **Chart tokens:** `--chart-blue: #2563EB`, `--chart-green: #22C55E`, `--chart-amber: #F59E0B`, `--chart-red: #EF4444`, `--chart-grey: #9CA3AF` (lighten amber/red variants in dark mode for contrast).
- **Never use `#ffffff`** — near-white surfaces are `#FEFEFE`.
- **Contrast pairing is mandatory in both themes:** every light background token pairs with dark text tokens and every dark background token pairs with light text tokens; body text ≥ 4.5:1, large text/UI ≥ 3:1 (WCAG AA). Use `#22C55E`/`#EF4444` for chart fills only, never for small text.
- **Shape & depth:** `--radius-sm: 4px`, `--radius-md: 6px`, `--radius-lg: 8px`, `--shadow-sm`, `--shadow-md` (subtle — fits the dense BI aesthetic).
- **Rhythm & motion:** `--spacing-gap: 8px`, `--transition-fast: 120ms`, `--transition-normal: 200ms`, `--ease-standard: cubic-bezier(0.4, 0, 0.2, 1)`.
- **Stacking:** `--z-sticky: 40`, `--z-dropdown: 100`, `--z-modal: 1000`, `--z-toast: 1100` — layered components must never conflict.

**2.3 Mandatory Dark Mode**
- Provide tokens under both a `.dark` class (on `<html>`) and `@media (prefers-color-scheme: dark)` (the media query applies only when no stored preference exists).
- Visible toggle in the sticky header: Material Symbols `light_mode`/`dark_mode`, `aria-pressed` reflecting current state, and an `aria-label` that updates ("Switch to dark theme" / "Switch to light theme").
- Persist the choice in `localStorage`; first visit falls back to `prefers-color-scheme`; apply before first paint (no flash of wrong theme). Switching swaps variables only — no HTML restructuring.

**2.4 Layout System — Flexbox First, Grid for the Data Canvas**
- Every flex container defaults to `align-items: center` unless a deviation is explicitly justified in a CSS comment.
- Mobile-first: multi-column layouts collapse to a single column on small viewports; **zero horizontal overflow at any width**.
- **Explicit exception (theme mandate):** macro layouts use CSS Grid — `display: grid; grid-template-columns: repeat(12, 1fr); gap: 8px;` with 12px canvas padding; widgets span columns (KPI cards span 3, charts span 4–8, table spans 12) and reflow 12 → 6 → 1 columns across breakpoints. Flexbox remains mandatory for all component-internal alignment (buttons, nav, cards, KPI rows, table toolbar).

**2.5 Framework — Tailwind CSS (CSS-first usage)**
- Load Tailwind via an external CDN `<script src>` reference. Use its utilities solely for structural primitives (flex, grid, gap, responsive prefixes).
- All visual/theme styling lives in `style.css` as clean custom CSS, organized with native `@layer` (tokens → base → layout → components) and exposed as generic reusable classes: `.btn`, `.card`, `.input-group`, `.widget`, `.kpi-card`, `.data-table`. Never scatter hex values across utilities; theming flows exclusively through the CSS variables.

**2.6 Typography & Icons — Google Only**
- Google Fonts: **Inter** (400/500/600/700) bound to `--font-base`; **JetBrains Mono** (500/700) bound to `--font-mono` for KPI values, prices, table figures, and IDs (`font-variant-numeric: tabular-nums`).
- Dense type scale: base 14px; secondary/data text 12–13px; KPI values 20–24px; H1 32–40px; compact line-height (1.3–1.45).
- Icons: **Google Material Symbols (Outlined)** via the official stylesheet. **Forbidden:** raw inline `<svg>`, local icon files, emoji as icons. (Charts are not icons — see §3.5.)

## 3. COMPONENT DESIGN SPECIFICATIONS

**3.1 Buttons — every state as a CSS class**
- **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` minimum touch target 44×44px. Variants: `.btn--primary` (filled `--primary`), `.btn--secondary` (bordered), `.btn--danger` (visually distinct red in both themes, for any destructive action).
- **Hover:** brightness/shadow shift, `cursor: pointer`.
- **Focus:** distinct ring via `box-shadow`/`outline` built from `--primary` — keyboard focus must never be invisible.
- **Active/Pressed:** `transform: scale(0.97)`.
- **Loading (`.is-loading`):** pointer events disabled, double-clicks prevented, CSS border spinner (or animated Material Symbol) replaces the label; button dimensions must not change.
- **Disabled:** `opacity: 0.5`, grayscale filter, `cursor: not-allowed`.
- **Success/Error (`.is-success` / `.is-error`):** temporary feedback driven by `--text-success` / `--text-error` (e.g., CTA flips to a `check` icon + "Request sent" for ~2s, announced via `aria-live`).

**3.2 Cards & Widgets**
- **Default:** compact flexbox card — `--bg-secondary`, 1px `--border-default`, `--radius-md`, `--shadow-sm`, 12px internal padding.
- **Hover:** `transform: translateY(-2px)` + shadow shift (feature, pricing, testimonial cards).
- **Focus-within:** border highlights in `--primary` when a child link/button receives focus.
- **Skeleton (`.is-skeleton`):** shimmer animation for dashboard-preview widgets during simulated initial load — no layout shift.
- **Empty state:** Google Icon + one line of guidance text (used when table filters match nothing).

**3.3 Forms & Inputs** (Hero/Final-CTA email capture, filter controls)
- **States:** empty · focused (outline ring) · filled · valid (`--border-success` + check icon) · invalid (`--border-error`, `--text-error` message, error icon) · disabled · read-only.
- **Structure:** flex container → `<label>` (bound via `for`), control, dedicated error element wired with `aria-describedby` + `aria-invalid`; errors announced in an `aria-live="polite"` region.

**3.4 Modal — Chart Zoom**
- Clicking any chart widget opens a zoom modal: enlarged chart, title, caption, and a data summary.
- **States:** opening (fade + scale) · open · loading (spinner while "rendering") · success/error · closing — all animated via CSS transitions.
- Centered flex overlay (`align-items: center; justify-content: center`), dimmed backdrop at `--z-modal`, close button with Material Symbol `close`, keyboard focus trapped inside, close via `Esc` and backdrop click, focus returned to the trigger. `role="dialog"`, `aria-modal="true"`, `aria-labelledby`.

**3.5 Dashboard Components (Hero preview)**
- **KPI cards (4):** label, mono value, delta chip pairing a `trending_up`/`trending_down` Material Symbol with colored text (never color alone), plus a mini CSS sparkline.
- **Charts — CSS only:** bar chart as grid/flex columns filled with `--chart-*` tokens; donut via `conic-gradient` with a legend (color chip + label + %). No hand-written inline SVG; a CDN charting library rendering to `<canvas>` is the only permitted alternative.
- **Interactivity:** hover tooltips (value + label) that also appear on keyboard focus, with content exposed via `aria-describedby`; **clicking any chart opens the zoom modal (§3.4)**.
- **Data table:** semantic `<table>` "Recent jobs" — mono job ID, source, status chip (icon + label: Success/Running/Failed), duration, rows. Sticky `<thead>` inside an `overflow: auto` scroll container (max-height ≈ 320px); sortable headers as buttons updating `aria-sort`; **row highlighting on hover**; `tabular-nums` figures.
- **Filter sidebar:** slim rail beside the table (status filter chips + source `<select>`); **smooth filter animations** (fade/height transitions on rows); live result count in an `aria-live` region; zero matches → §3.2 empty state.
- **Toolbar:** widget title, time-range `<select>`, refresh icon button that shows a spinner and re-triggers the skeleton → data sequence.
- **Tooltips:** CSS-only, `--bg-secondary` + border + `--shadow-md`, `--z-dropdown`, visible on hover and focus, never blocking the pointer.

## 4. CORE UX & MICRO-INTERACTION RULES

- **Responsive by default:** fluid sizing and breakpoints (~640/768/1024/1280px); no horizontal overflow anywhere.
- **Smooth animations:** `transition: var(--transition-normal)` on all state changes; **respect `prefers-reduced-motion`** (disable transforms, shimmer, and spinners; keep simple opacity fades).
- **Accessibility:** WCAG AA contrast in both themes; never rely on color alone for status; semantic HTML5 landmarks (`header`/`nav`/`main`/`section`/`footer`) with a logical heading order; skip-to-content link; full keyboard operability (nav, theme toggle, filters, sorting, chart zoom, modal, FAQ); `aria-live` regions for loading, filtering, form, and toast feedback.
- **Mandatory visual feedback:** every click, hover, and submission produces a visible state change (CTA loading → success, chips toggle, sort arrows flip, rows highlight, refresh spins).
- **Sticky headers (both senses):** compact (≤56px) sticky page header at `--z-sticky` (logo, anchor nav — Features, How It Works, Pricing, FAQ — theme toggle, primary CTA) with `scroll-margin-top` on anchored sections; sticky table header per §3.5.

## 5. SECTION-BY-SECTION SPECIFICATION

**5.1 Hero.** Compact two-zone layout: left — headline (positioning every metric on one screen), subhead, `.btn--primary` "Start free trial" + `.btn--secondary` "Book a demo", and a trust strip (mono stats or text logos). Right/below — the full dashboard preview per §3.5, which loads with skeleton shimmer (~600 ms) then populates, announced via `aria-live`.

**5.2 Features — 3 cards.** 12-column grid, each card spans 4 (→ 12 on mobile): Material Symbol icon, title, 2–3 lines of copy, "Learn more" link. Suggested angles: real-time pipelines, query engine performance, governed self-service.

**5.3 How It Works — 3 steps.** Numbered step cards (01 Connect sources → 02 Model metrics → 03 Share dashboards) with icons and a connecting rule on desktop; each spans 4 columns, stacking on mobile.

**5.4 Testimonials — 3 quotes.** Quote cards with CSS initials-avatar circles, name, role (data-engineer personas), and a mono metric highlight (e.g., "−38% query latency").

**5.5 Pricing — 3 tiers.** Free / Pro (featured: `--primary` border, "Most popular" badge, slight elevation) / Enterprise. Each tier: mono price, 4–6 short feature rows with `check` icons, CTA button. The featured CTA demonstrates the loading → success button states.

**5.6 FAQ — 5–6 items.** Native `<details>/<summary>` (keyboard-accessible by default) styled as compact rows; chevron Material Symbol rotates on open; smooth open/close animation.

**5.7 Final CTA.** Full-width band: headline + email capture built per §3.3, with a submit button demonstrating loading → success/error states, confirmed in an `aria-live` region.

**5.8 Footer.** Secondary links in a 4-column grid (Product, Resources, Company, Legal), social icons as Material Symbols, copyright line; collapses to a stacked layout on mobile.

## 6. DELIVERABLE & OUTPUT FORMAT

- **Files:** exactly `index.html`, `style.css`, `script.js`. External references only (Google Fonts, Material Symbols, Tailwind CDN, deferred `script.js`); **no inline `<script>` logic and no inline CSS**.
- **Naming:** one convention — **BEM** (`.hero__title`, `.kpi-card__value`, `.pricing-card--featured`, `.widget--chart`); Tailwind utilities only for structural primitives; never mix conventions; never define classes for elements that don't exist in the markup.
- **Copy:** all user-facing text in English, product-specific and realistic; placeholders only where content was genuinely unspecified.
- **JavaScript contract:** theme toggle + persistence + FOUC guard; skeleton → data simulation; table sorting (`aria-sort`); filtering with animated rows + live count + empty state; chart zoom modal (focus trap, `Esc`, backdrop click, focus return); form validation + loading/success states; refresh spinner. All behavior must degrade gracefully and respect `prefers-reduced-motion`.
- **Output the complete, runnable code for all three files on the first attempt** — no truncation, no omitted sections.