Analytics Metric Flow demo
Analytics Metric Flow

A modern SaaS analytics landing page with continuous scroll, fullscreen hero, and clean data-driven visuals showcasing metrics, dashboards, and integration tools.
Category: Corporate & SaaS
Era: 2020s Modern
Prompt: 15.5 KB · 2185 words
# CODING AGENT PROMPT — "ANALYTIC METRIC FLOW" LANDING PAGE

**Role:** Act as a Senior Frontend Engineer and Expert UI Designer. Your task is to code a complete, production-ready Landing Page on the first attempt — full code, single response, no follow-up questions, no placeholders where real copy is specified below.

**Project:** "MetricFlow" — an analytics SaaS landing page in the **Analytics Metric Flow** style (2020s Minimal Analytics Flow): continuous vertical scroll, generous whitespace, off-white canvas, large metrics, functional cards, an integrations grid, an alternating-row transactions table, and green as the single action color.

---

## 1. PROJECT BRIEF & SECTION MAP

**1.1 Art Direction (binding)**
- Continuous off-white background across the entire scroll; clean vertical flow; large-scale metrics; cards with subtle 1px borders and minimal shadow; solid green CTAs; alternating table rows.
- Binding values from the style spec: page background `#F7F8F3`, body text `#111827`, global `letter-spacing: -0.02em`, card `border-radius: 14px`, card shadow `0 18px 45px rgba(15,23,42,0.04)`, card border `1px solid #E5E7EB`, section padding `clamp(2rem, 8vw, 6rem)`.
- Full light/dark theme support is required (see §2.3).

**1.2 Section Map — build exactly these, in this order:**

1. **Navbar (sticky):** wordmark "MetricFlow" (text + Material Symbol `monitoring`), links: Features, How it works, Pricing, FAQ; theme toggle; primary button "Get started". On mobile, a hamburger (Material Symbol `menu`) toggles a dropdown panel.
2. **Hero (fullscreen, ~90vh):** two-column flex (stacks on mobile). Left: eyebrow badge "Analytics, simplified" (tinted pill), `h1` **"Every number that matters. All in one place."** (verbatim), subheadline: "MetricFlow pulls every metric from your stack into one clean, real-time view — no dashboards to build, no data to wrangle.", CTA pair: primary "Start free trial" + secondary "See how it works" (anchor to `#how-it-works`). Right: an abstract **dot-cloud illustration of green data points** built in pure CSS (see §3.7). Below the hero content: a **KPI strip** with three large metrics — **1,845** "Teams onboarded", **$125K** "Revenue tracked monthly", **92%** "Reporting accuracy" (numerals in `--primary-strong`, fluid `clamp()` sizing).
3. **Features — 3 cards:** "Live dashboards" (icon `monitoring`), "Automated reports" (icon `event_repeat`), "Privacy-first analytics" (icon `verified_user`), each with 2–3 sentences of realistic copy. Followed by an integrations sub-block: heading **"Connects with every tool."** (verbatim) + one supporting line + a responsive grid of 8 rounded integration cards, each with a Material Symbol icon + tool name (Stripe `payments`, Shopify `storefront`, Slack `forum`, Notion `description`, HubSpot `hub`, Salesforce `cloud_sync`, Zapier `bolt`, Google Ads `ads_click`). Do not attempt brand logos.
4. **How It Works — 3 steps:** numbered steps 01 "Connect your tools", 02 "Watch metrics flow", 03 "Share insights", each with icon, title, description. The section culminates in a product-preview card containing the **"Recent transactions" table** (see §3.5) with columns Date / Customer / Amount / Status and these rows: Mar 14 — Northwind Labs — $2,400.00 — Paid; Mar 13 — Bright & Co — $1,150.50 — Pending; Mar 12 — Vertex Studio — $890.00 — Paid; Mar 11 — Helio Health — $3,720.25 — Paid; Mar 10 — Kite Digital — $460.00 — Refunded.
5. **Testimonials — 3 cards:** quote, 5-star rating (Material Symbol `star`), initials avatar (CSS circle, no images), name, role/company. Write three realistic quotes (e.g., "MetricFlow replaced four dashboards with one. Our weekly report takes minutes, not days." — Ana Ribeiro, Head of Growth, Loopwise).
6. **Pricing — 3 tiers:** Starter $0, Growth $29/mo (highlighted with a "Most popular" badge and tinted border), Scale $99/mo. Feature lists with `check` icons; per-tier CTA (primary on Growth, secondary on the others).
7. **FAQ — accordion:** 5–6 realistic Q&As (free plan limits, setup time, integrations, GDPR/CCPA compliance, cancellation). See §3.4.
8. **Final CTA:** full-bleed deep-green panel (`--secondary` background) with heading **"Your data is waiting."** (verbatim), supporting line "Connect your first data source in under five minutes. Free to start, no credit card required.", and an email-capture form (label + input + primary button "Start free trial") implementing all form states (see §3.3).
9. **Footer:** brand block with one-line description, four secondary link columns (Product: Features, Integrations, Pricing, Changelog · Company: About, Blog, Careers, Contact · Resources: Docs, Help center, API reference, Status · Legal: Privacy, Terms, Security, Cookies), and a copyright line. Links may use `href="#"` but must be keyboard-focusable with a visible focus ring.

---

## 2. STRICT RULES & ARCHITECTURE

**2.1 CSS-First Architecture & Zero Inline CSS**
- All styling lives in `style.css`. **The `style="..."` attribute is forbidden anywhere in the HTML.**
- Target all design properties, layout, and states exclusively via class/ID selectors.
- Keep HTML semantic and style-agnostic: a full re-theme must be achievable by editing `style.css` only.

**2.2 CSS Variables & Theme Tokens**
Store every visual token in `:root` and the `.dark` class. **No hardcoded hex, rgb, or rgba color values may appear outside these token blocks** — use `color-mix()` for translucency (e.g., navbar backdrop). Define exactly:

| Token | Light | Dark |
|---|---|---|
| `--primary` | `#16A34A` | `#22C55E` |
| `--primary-strong` | `#15803D` | `#15803D` |
| `--secondary` | `#14532D` | `#DCFCE7` |
| `--bg-primary` | `#F7F8F3` | `#0B100D` |
| `--bg-secondary` | `#FEFEFE` | `#121A15` |
| `--bg-table` | `#FEFEFE` | `#121A15` |
| `--bg-table-alt` | `#F3F4F6` | `#18221B` |
| `--accent-tint` | `#DCFCE7` | `#14532D` |
| `--text-primary` | `#111827` | `#F7F8F3` |
| `--text-secondary` | `#6B7280` | `#9CA3AF` |
| `--text-on-primary` | `#FEFEFE` | `#FEFEFE` |
| `--text-success` | `#15803D` | `#4ADE80` |
| `--text-error` | `#DC2626` | `#F87171` |
| `--border-default` | `#E5E7EB` | `#233029` |
| `--border-success` | `#16A34A` | `#22C55E` |
| `--border-error` | `#DC2626` | `#F87171` |

- **Contrast pairing (mandatory, both themes):** every light background token pairs with a dark text token and vice versa. `--accent-tint` backgrounds always pair with `--secondary` text (pre-validated in both themes). **Never use `#ffffff` — the nearest white is `#FEFEFE`.**
- **CTA contrast rule:** `#16A34A` under white text is only 3.3:1 (fails WCAG AA for normal text). Therefore solid CTA button backgrounds use `--primary-strong` (`#15803D`, 5.0:1 with `#FEFEFE` labels); reserve `--primary` for icons, links, focus rings, badges, and hover accents.
- Structural tokens: `--radius-sm: 8px; --radius-md: 14px; --radius-lg: 24px;` `--shadow-sm: 0 1px 2px rgba(15,23,42,0.05); --shadow-md: 0 18px 45px rgba(15,23,42,0.04);` (dark theme overrides shadows to `rgba(0,0,0,0.4)` / `rgba(0,0,0,0.45)`); `--spacing-gap: 1.5rem; --spacing-section: clamp(2rem, 8vw, 6rem);` `--transition-fast: 150ms; --transition-normal: 250ms; --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);` `--z-dropdown: 100; --z-modal: 1000; --z-toast: 1100;` `--container-max: 1120px;` `--font-base`.
- Apply `letter-spacing: -0.02em` globally per the style spec.

**2.3 Mandatory Dark Mode Support (full, both mechanisms)**
- Define dark tokens under **both** `@media (prefers-color-scheme: dark)` **and** a `.dark` class on `<html>` (media query handles first paint; class handles manual override).
- Theme switching must require zero HTML restructuring — only variable reassignment.
- Persist the user's choice in `localStorage` (key: `metricflow-theme`), falling back to `prefers-color-scheme` on first visit. Set the `color-scheme` property accordingly.
- Provide a visible toggle (Material Symbols `dark_mode` / `light_mode`) with correct `aria-pressed` and dynamic `aria-label` ("Switch to dark mode" / "Switch to light mode").

**2.4 Flexbox Layout & Mobile-First Alignment**
- Build every layout structure with Flexbox. **Every flex container defaults to `align-items: center`** unless an exception is explicitly justified in a CSS comment (e.g., multi-line card body text may use `flex-start`).
- Mobile-first: rows convert to columns at defined breakpoints; fluid `clamp()` typography (hero `h1` ≈ `clamp(2.5rem, 6vw, 4.5rem)`); **zero horizontal page scroll at any viewport ≥ 320px**.

**2.5 Framework Default & Tailwind CSS Integration**
- Use Tailwind CSS (CDN acceptable) or hand-authored CSS organized with Tailwind-style `@layer` / `@apply` discipline. Either way, generic reusable component classes (`.btn`, `.card`, `.input-group`) must exist and map back to the CSS variables — no theme values hardcoded in utilities.

**2.6 Typography & Icons (Google Fonts Mandatory)**
- Load **Google Font "Inter"** (weights 400–800) via `<link>`/`@import` and bind it to `--font-base`.
- Icons: **Google Material Symbols (Rounded)** via the official stylesheet. **Forbidden:** raw inline SVGs, local icon files, emoji as icons. The hero dot-cloud illustration must also be CSS-only (§3.7).
- *Exception clause:* the source spec requested a system-UI stack (`system-ui, -apple-system, 'SF Pro Text', 'Segoe UI'`) — satisfy that aesthetic with Inter as the primary typeface and keep the system stack strictly as fallbacks after Inter; system fonts must not be the primary typeface.

---

## 3. COMPONENT DESIGN SPECIFICATIONS

**3.1 Buttons**
- `.btn` base: `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` minimum touch target 44×44px. Variants: `.btn--primary` (solid `--primary-strong` bg + `--text-on-primary` label), `.btn--secondary` (bordered/ghost), `.btn--danger` (see §4).
- **Hover:** brightness/shadow shift, `cursor: pointer`. **Focus-visible:** distinct ring via `outline: 2px solid var(--primary); outline-offset: 2px`. **Active:** `transform: scale(0.97)`. **Loading (`.is-loading`):** disables pointer events, prevents double-submits, renders a CSS spinner without changing button dimensions, sets `aria-busy="true"`. **Disabled:** `opacity: 0.5`, grayscale, `cursor: not-allowed`. **Success/Error (`.is-success` / `.is-error`):** temporary feedback states using `--text-success` / `--text-error`, announced via `aria-live`.

**3.2 Cards**
- `.card` base: `--bg-secondary` background, `1px solid var(--border-default)`, `--radius-md`, `--shadow-sm`, flex layout.
- **Interactive cards only** (pricing tiers, integration cards): hover lifts with `transform: translateY(-2px)` and `--shadow-md`; **focus-within** highlights the border when a child control receives focus.
- Define `.skeleton` shimmer keyframes in `style.css` (for future dynamic content; not rendered on first paint) and an empty-state pattern (Material Symbol + guidance text) for dynamic slots.

**3.3 Forms & Inputs (Final CTA email capture)**
- `.input-group`: flex column wrapping a `<label>`, the input, and a dedicated error-feedback element with `aria-live="polite"`.
- Implement all states via CSS classes: empty, focused (outline ring), filled, valid (`--border-success` + `check` icon), invalid (`--border-error`, red error text, `error` icon), disabled, read-only.
- On submit: validate the email in JS → invalid shows inline error + `aria-live` announcement; valid shows button loading spinner → success state ("You're on the list") announced via `aria-live`. Never rely on color alone — pair every state with an icon and/or text.

**3.4 FAQ Accordion**
- Each item: `<h3><button aria-expanded="true|false" aria-controls="…">` + panel `id` match. Animate open/close with CSS only (prefer `grid-template-rows: 0fr → 1fr`). Chevron Material Symbol rotates 180° on open; open state is also indicated by border/weight change, not color alone. Fully keyboard operable with visible focus.

**3.5 Transactions Data Table**
- Semantic `<table>` with `<caption>` ("Recent transactions", visually styled but available to screen readers) and `<th scope="col">`.
- Alternating rows via `nth-child` using `--bg-table` / `--bg-table-alt`.
- Status badges: text label + Material Symbol — Paid (`check_circle`, success tone), Pending (`schedule`, neutral), Refunded (`undo`, error tone). **Never color-only.**
- Responsive: the table must never cause page-level horizontal scroll — wrap it in an `overflow-x: auto` container scoped to the preview card, or reflow rows into stacked records below 640px using `data-label` attributes.

**3.6 Modal / Popup (conditional)**
- If you implement any overlay (optional — e.g., a demo modal from the Hero's secondary CTA; if skipped, these rules still govern any future overlay): animated opening/open/loading/success-error/closing states via CSS transitions; centered flex container (`align-items: center`); backdrop overlay; Material Symbol `close` button; keyboard focus trapping; close via `Esc` and backdrop click; layered at `--z-modal`.

**3.7 Hero Dot-Cloud Illustration (CSS-only)**
- Build the abstract green data-point cloud with pure CSS: positioned dot elements styled via `nth-child` rules, or layered `radial-gradient` backgrounds on a single element. Dots vary in size (6–28px) and opacity using `--primary`, `--accent-tint`, and `--secondary`-family greens, arranged to suggest an ascending data trend.
- Add a subtle staggered float animation (translateY ±6px), disabled under `prefers-reduced-motion`. Mark the container `aria-hidden="true"` (decorative). Scale down or relocate below the hero text on small screens.

---

## 4. CORE UX & MICRO-INTERACTION RULES

- **Responsive by default:** fluid sizing, defined breakpoints, zero horizontal overflow; `scroll-margin-top` on sections to offset the sticky navbar; smooth anchor scrolling (`scroll-behavior: smooth`, disabled under reduced motion).
- **Smooth animations:** `transition: var(--transition-normal) var(--ease-standard)` on all state changes; fully respect `prefers-reduced-motion: reduce` (disable float/scale/transform animations, keep simple opacity).
- **Accessibility (a11y):** WCAG AA contrast in both light and dark modes; never communicate state by color alone; semantic HTML5 landmarks (`header`, `nav`, `main`, `section[aria-labelledby]`, `footer`); correct ARIA roles/labels on custom widgets; logical DOM/focus order; full keyboard operability (no mouse-only interactions); `aria-live` regions for form feedback and loading states; a skip-to-content link.
- **Mandatory visual feedback:** every click, hover, and submission triggers a visible state change (nav links, buttons, accordions, form submission, theme toggle).
- **Destructive actions:** `.btn-danger` must be visually distinct in both themes (not used on this page by default, but the class must exist and be themed for both modes).

---

## 5. DELIVERABLE & OUTPUT FORMAT

- **Files:** separate `index.html`, `style.css`, `script.js`. No inline `<style>` blocks and no inline `<script>` blocks beyond a single deferred entry point (`<script defer src="script.js">`).
- **Naming convention:** BEM throughout (`.nav`, `.nav__link`, `.btn--primary`, `.card__title`, `.pricing-card--featured`, `.faq__panel`). Never mix conventions.
- **Copy:** all user-facing copy in **English**. Use the verbatim headlines and figures provided in §1.2 ("Every number that matters. All in one place.", "Connects with every tool.", "Your data is waiting.", 1,845 / $125K / 92%). Write realistic copy everywhere else — **lorem ipsum is prohibited**.
- **JS scope (vanilla):** theme toggle + `localStorage` persistence, mobile nav, FAQ accordion, email form validation with loading/success/error feedback, smooth anchor scrolling. No frameworks required.
- **First attempt must be complete:** all nine sections, all component states, both themes, in a single response containing the full contents of all three files.