Product screens / v1.0.0

Decision-ready analytics overview

A compact analytics screen that moves from current health to explanation and action without turning every number into a card.

Audience

Operators and product leads who check performance repeatedly and need anomalies to be obvious.

Job to be done

Answer what changed, why it changed, and what the user should inspect next.

Design direction

Treat the page as a report, using a clear reading order, a single chart surface, quiet dividers, and dense rows for supporting metrics.

Hierarchy

01Period and scope
02Primary metric
03Trend and comparison
04Main chart
05Contributing segments
06Recommended next action

Required proof

01Visible comparison period
02Data freshness timestamp
03Segment totals that reconcile with the primary metric

Required states

01Loading
02Populated
03No data
04Partial data
05Stale data
06Request failed

Responsive behavior

01Collapse the side rail into a drawer below 1024px
02Keep summary and date controls before the chart on mobile
03Replace wide tables with labelled metric rows below 640px

Constraints

01Use color as a secondary signal, never the only signal
02Limit the overview to one primary chart
03Avoid a card for every statistic

Accessibility

01Expose chart values in a semantic table
02Label date and segment controls
03Announce data refresh and error states without moving focus

Verification

01Reconcile the visible total with table data
02Test chart type controls with keyboard and screen reader output
03Verify empty, stale, and error states at mobile and desktop widths

Tradeoffs

01One primary chart improves scanning but moves secondary analysis to drill-down pages
02Dense supporting rows favor repeat users over presentation-style dashboards

Stack

ReactTailwind CSSRechartsLucide React

Connected UI Grids assets

Metrica template AnalyticsChart FilterBar

Build handoff

Provider

You are an expert design engineer.

Build a responsive product screen: Decision-ready analytics overview.

**Purpose:** A compact analytics screen that moves from current health to explanation and action without turning every number into a card.

**Audience:** Operators and product leads who check performance repeatedly and need anomalies to be obvious.

**Job to be done:** Answer what changed, why it changed, and what the user should inspect next.

**Design style:** Treat the page as a report, using a clear reading order, a single chart surface, quiet dividers, and dense rows for supporting metrics.

**Visual hierarchy:** Period and scope -> Primary metric -> Trend and comparison -> Main chart -> Contributing segments -> Recommended next action

**Responsiveness:** Collapse the side rail into a drawer below 1024px Keep summary and date controls before the chart on mobile Replace wide tables with labelled metric rows below 640px

**Accessibility:** Expose chart values in a semantic table Label date and segment controls Announce data refresh and error states without moving focus

**Required proof:**
- Visible comparison period
- Data freshness timestamp
- Segment totals that reconcile with the primary metric

**Required states:**
- Loading
- Populated
- No data
- Partial data
- Stale data
- Request failed

**Expected technologies:**
- React
- Tailwind CSS
- Recharts
- Lucide React

**Constraints:**
- Use color as a secondary signal, never the only signal
- Limit the overview to one primary chart
- Avoid a card for every statistic

**Verification:**
- Reconcile the visible total with table data
- Test chart type controls with keyboard and screen reader output
- Verify empty, stale, and error states at mobile and desktop widths

**Tradeoffs:**
- One primary chart improves scanning but moves secondary analysis to drill-down pages
- Dense supporting rows favor repeat users over presentation-style dashboards

**Brand inputs:**
- Workspace name
- Primary metric
- Comparison period
- Accent color
- Segment names
- Next action

**Deliver:** A production-ready product screen implementation plus verification notes.

Use React + Tailwind. Keep it accessible and respect prefers-reduced-motion. Return only the component code.