App / Dashboard

Colors & Charting Palette

Brand slate (#7A87A2) and periwinkle (#D0DBF5) are the primary chart series; deep navy is the emphasis line; warm tan is a contrast segment. Status uses conventional green / amber / red so growth and churn read instantly.

Surfaces & Text

Chart Series

Status

Cohort Heatmap Ramp (low → high retention)

Typography

Inter throughout at -0.32px tracking. KPI values run 32px/700 with tabular-nums; table headers are 12px uppercase muted; cells 14px.

Layout

Shared Chrome — Sidebar & Tabbed Report Nav

Left sidebar: workspace switcher up top, grouped nav with icons, a usage meter pinned to the bottom. Tabbed report nav sits under the page title for sub-reports.

Shared Chrome — Filter Toolbar

Date-range preset pills, granularity dropdown, a compare control, and a Configure affordance to rearrange cards. The active range pill goes solid black.

KPI Stat Card

Big-number card: label + info icon, 32px tabular value, a delta badge (green up / red down), a width-spanning sparkline with start/end ticks, and an "Updated…" caption. The default landing surface.

Chart Card

Title + per-card toolbar (info, expand, overflow), a chart body, and a footer caption. Stacked bars show MRR composition by plan/segment; an overlaid navy line shows growth. Legend chips below. Includes a zero/empty state.

Cohort Heatmap Table

Triangular grid: rows are cohort start periods, columns are Month 0..N, cells shaded by retention intensity. Toggle between % and count; pair with a "Most retained" list and an Export CSV action.

Churn Breakdown

A KPI strip plus a cumulative chart with voluntary/involuntary series, and a plain-language narrative summary. Export Data lives top-right.

Donut & Segmented Bar with Legend List

Composition shown as a donut (subscription status) or a single segmented horizontal bar, each paired with a legend list giving value and percentage per segment.

Data Table

Sortable uppercase headers, leading avatar + name/email cell, numeric right-aligned columns, relative-time cells, status pills, a trailing row-action menu, a gear column-config, filter chips, search, and a pagination footer. No row striping.

Segment Builder Row

Row-based builder with inline pill controls for event / property / operator / value / date, add-condition and add-group buttons, a "Valid segment" indicator, and Save / Discard.

Detail Drawer

Right-side drawer over a table row: identity header with copy, a key/value detail section, and a vertical activity timeline. Lets users drill in without leaving the list.

Status Pills

Pill-shaped (32px radius) with a 6px leading dot in the status colour over a 10%-tint background. Used across tables, drawers, and donuts.

.status-pill.active  { color: #16A34A; background: rgba(22,163,74,0.10); }
.status-pill.trial   { color: #D97706; background: rgba(217,119,6,0.10); }
.status-pill.canceled{ color: #DC2626; background: rgba(220,38,38,0.10); }
border-radius: 32px; padding: 3px 10px 3px 8px; font: 600 12px Inter;

Tailwind Reference

Drop the tailwind block from design-system-app.json into theme.extend and use these recipes verbatim. Set letter-spacing: -0.32px globally. The full set of recipes (sidebar, toolbar, KPI, chart, cohort, table, segment builder, drawer, status pills) ships in the JSON.