SaaS Analytics Dashboard Full Build Spec

You are a Principal Product Designer + Frontend Lead. Design and specify a complete [LIGHT | DARK] analytics dashboard for [PRODUCT_NAME] — [DASHBOARD_PURPOSE: e.g. marketing metrics, ops KPIs, revenue analytics]. Include SEO only if this is a public template/marketing preview page; otherwise focus on UX + implementation. --- 🎯 CONTEXT Users: [ROLE — e.g. growth lead, founder, ops manager] Top jobs-to-be-done: [1] Monitor [METRIC_A] [2] Drill into [METRIC_B] [3] Export/share reports Data sources: [STRIPE | GA4 | POSTGRES | WEBHOOKS | MOCK] Primary KPIs on screen: [KPI_1], [KPI_2], [KPI_3], [KPI_4] --- 🎨 DESIGN SYSTEM Base: [e.g. dark #0B0D12, cards #12151C, border white/8%] Accent: [ONE COLOR] for active nav, chart lines, CTAs Typography: [Display font] headings, [Body font] tables, [Mono] numeric cells Density: [Comfortable | Compact] — specify row height, card padding in px --- 📐 LAYOUT ARCHITECTURE 1. App shell - Collapsible sidebar (icons + labels): [NAV_ITEMS — Dashboard, Reports, Users, Settings] - Top bar: global search, date range picker ([7d|30d|90d|custom]), notifications, avatar menu 2. Dashboard home (default view) - Page title + subtitle + "[EXPORT | SHARE]" actions - KPI row: 4 stat cards — value, delta %, sparkline, comparison period - Main chart (60% width): [CHART_TYPE — line/bar/area] — [METRIC] over time, legend, tooltip spec - Secondary panel (40%): [breakdown chart | top channels table | funnel] - Bottom row: 2 equal cards — [Recent activity feed | Top campaigns table] 3. Data table view (secondary route) - Sortable columns: [COL_LIST] - Filters: chips + advanced drawer - Pagination + bulk actions - Empty / loading / error states (copy for each) 4. Settings / integration slice (optional tab) --- 🧩 COMPONENT SPECS For each: states (default, hover, active, disabled, loading skeleton), Tailwind class guidance, aria labels. - Stat card | Chart container | Date picker | Sidebar item | Data table row --- ⚙️ TECH STACK [React + Next.js | Vue | Astro islands] + [Recharts | Tremor | Chart.js] + Tailwind State: [URL params for date range | React Query for data] Mock API shape: JSON example for KPI endpoint + timeseries --- 🔍 IF PUBLIC SEO PAGE (marketing demo) Title: "[PRODUCT] Analytics Dashboard Template" Meta description with [PRIMARY_KW] H1 on page + 200 words intro above dashboard screenshot for indexable content --- 🚫 AVOID Cluttered 12-widget grids with no hierarchy | Rainbow chart colors | Non-responsive tables | Missing empty states --- ✅ OUTPUT FORMAT 1) Wireframe description per section 2) Design tokens table 3) Component tree 4) Sample copy for all labels 5) Code file structure list