# AI Guide — Saas Analytics

- **Slug:** `saas-analytics`
- **Category:** SaaS · Dashboards
- **Vibe:** dark-terminal, precise, calm-dense
- **Format:** desktop web app (sidebar + main panel); responsive to 2-col KPIs
- **Reference implementation:** `reference.html` (same directory, self-contained)
- **Audience:** coding agents reproducing this design in any stack

## Mission

An analytics overview that earns trust through precision. Dark ink, exact mono
numerals, sparse charts, and a lime pulse for "live". The page should feel like an
instrument, not a marketing site: nothing decorative, every pixel has a job.

## Mood & voice

- Calm-dark: deep blue-black background, one electric-lime accent, one teal for
  "good news in a different register" (improving churn).
- Voice: terse, factual, lowercase-friendly. "net, all plans", "updated 4 min ago".
  No exclamation marks. Numbers are the voice.

## Color tokens

| Token | Hex | Use |
| --- | --- | --- |
| bg | `#0b0f14` | app background |
| panel | `#11161d` | cards, sidebar hover, inputs |
| panel-2 | `#0e1319` | sidebar background |
| border | `#1e2630` | card borders, gridlines |
| border-2 | `#26303c` | table row separators, hover states |
| text | `#e8edf2` | primary text |
| muted | `#8a97a5` | secondary text, icons |
| faint | `#5b6775` | labels, axis text, placeholders |
| accent | `#b8f15e` | lime — series, deltas up, active states, logo mark |
| teal | `#4fd1c5` | improving metrics (churn down) |
| warn | `#ffd166` | pending status |
| danger | `#ff6b6b` | failed status |

## Typography

Faces: **system grotesk** for UI labels and names; **mono** (`ui-monospace / SF Mono /
Menlo / Consolas`) for every number, metric, chip, and micro-label.

| Style | Size | Weight | Notes |
| --- | --- | --- | --- |
| h1 (page) | 20 | 700 | −0.02em |
| sidebar group | 9.5 | 600 | +0.12em · uppercase · faint |
| nav item | 13 | 500 | muted; active = text + 1px border + lime dot |
| KPI label | 10 | 600 | +0.1em · uppercase · faint |
| KPI value | 23 | 700 | mono · −0.03em |
| delta | 11 | 600 | mono · up=lime / down=teal |
| panel title | 13 | 600 | + muted mono suffix |
| table th | 10 | 600 | +0.1em · uppercase · faint |
| table cell | 13 | 400 | mono for amounts |
| status chip | 10.5 | 600 | mono · dot + tinted bg |

## Spacing & shape

- Sidebar: 228px, panel-2, right border `#border`. Main padding: 24px.
- Radii: cards 10, inputs 8, logo mark 6, status chips 999, badges 999.
- Borders: 1px `#border` everywhere; table row separators `#border-2`.
- KPI grid: 4 columns (2 ≤1080px), 14px gap, padding 15.
- Panel heads: 13px/16px padding, bottom border. Chart padding 16.
- No shadows. Depth comes from border tones, never from blur or elevation.

## Layout rules

1. **Sidebar:** logo (22px lime rounded square with dark "◢"), nav groups "Workspace"
   (Overview active · Revenue · Users · Reports) and "Manage" (Settings · Billing with
   a lime badge "2"), then an "upgrade" card pinned to the bottom (Usage 82%,
   one-liner, ghost button).
2. **Topbar:** breadcrumb mono ("Northwind / Overview"), spacer, search field (panel bg,
   1px border, radius 8), 30px avatar circle with mono initials.
3. **Head row:** page title + mono subline ("Last 30 days · updated 4 min ago") and a
   segmented control (7D · 30D · 90D · 1Y) — active segment panel bg.
4. **KPIs:** MRR `$128,420` +12.4% · Active users `84,210` +8.1% · Churn `1.9%` −0.4pt
   (teal) · ARPU `$52.00` +3.2%. Each has a 34×12 inline SVG sparkline.
5. **Revenue panel:** legend (2026 lime / 2025 slate), SVG area chart 720×220 with
   dashed gridlines, mono axis labels ($150k/$100k/$50k, months Jul–Dec), the lime
   series on top with a highlighted last point (r=4, 2px bg stroke).
6. **Activity table:** 5 rows — user (name + email mono), event, plan, amount (mono),
   status chip (Succeeded lime / Pending amber / Failed red).

## Copy (exact)

- Crumb: **Northwind / Overview** · Sub: **Last 30 days · updated 4 min ago**
- Segments: **7D · 30D · 90D · 1Y** (30D active)
- KPIs: **Monthly recurring revenue $128,420 +12.4% vs last month** ·
  **Active users 84,210 +8.1%** · **Churn 1.9% −0.4pt improvement** ·
  **Avg revenue / user $52.00 +3.2%**
- Upgrade card: **Usage · 82%** · **8,420 of 10,000 events this cycle.** · **Upgrade plan**
- Table headers: **User · Event · Plan · Amount · Status**; rows: Maya Chen/Scale →
  Enterprise/$1,200/Succeeded · Jonas Weber/Pro annual/$780/Succeeded · Priya Nair/+12
  seats/$360/Pending · Tom Aldridge/Pro → Starter/−$240/Failed · Aiko Tanaka/Scale
  monthly/$400/Succeeded

## Interaction

- Nav hover: text color, panel bg. Active: 1px border + lime dot.
- Segmented control: click switches active segment (panel bg).
- Upgrade button hover: teal border + text.
- No scroll animations, no parallax, no hover lift on cards.

## Responsive behavior

- ≤1080px: KPI grid 2-col. Sidebar can collapse behind a hamburger in an app shell —
  but keep the rest of the layout identical.
- Table: allow horizontal scroll rather than reflowing into cards.

## Do / Don't

- DO set every number in mono with tabular alignment — mixed-width numerals are the
  #1 tell of a sloppy dashboard.
- DO use exactly two data hues (lime, teal) plus semantic status colors.
- DON'T add gradients to panels, glassmorphism, or glowing shadows.
- DON'T animate the chart on load unless explicitly requested.
- DON'T use emoji; status chips use a colored dot + text.

## Reproduction checklist

- [ ] bg `#0b0f14`, panels `#11161d`, borders `#1e2630`
- [ ] All numerals mono; KPI values 23/700 −0.03em
- [ ] SVG area chart with dashed gridlines + lime series + highlighted last point
- [ ] Four KPIs with sparklines and correct deltas (teal for churn improvement)
- [ ] Table with status chips (lime/amber/red) and mono amounts
- [ ] Segmented control with active state

## Stack notes

- **HTML/CSS:** copy `reference.html`; it is fully self-contained.
- **React:** sidebar/topbar/content as layout components; chart = inline `<svg>` (or a
  chart lib, but match stroke widths, gridlines, and colors exactly).
- **React Native:** mono numerals via `fontFamily: Platform.select({ios:'Menlo',
  android:'monospace'})`; sparklines via `react-native-svg`.
- **Tailwind:** extend theme with the five border/bg tones; `font-mono` for numerals.