Dashboard Layout
Metrics and activity overview for signed-in users — the product home screen.
Layout
Full-width page with left sidebar navigation (240px) + main content area. Main area: 2–4 col metric cards at top, then charts/tables below. Content max-width 1400px.
Content Slots
Page heading
H1 with page title and optional subtitle or date range.
Primary metric cards
2–4 cards with key numbers. Each: label, large value, trend indicator (delta + arrow).
Primary chart
Largest visual element — line chart, bar chart, or activity feed for the most important metric.
Secondary content
Tables, lists, or smaller charts for supporting data.
Quick actions
CTA buttons for the most frequent actions from this screen.
Date range selector
Top-right — controls all metrics on the page simultaneously.
Hierarchy Rules
- Most important metric card = largest visual weight (larger text, accent color)
- Squint test: the key number must remain visible — it's the whole point of the page
- Charts come after key numbers — they explain, not replace, the headline metric
- Quick actions float near the primary metric they relate to
- Never show empty chart axes — use skeleton or "no data" state