jhd3197 Dashboard / tool UI
Information density is the feature, not vibes. You are a systems designer here, not a brand designer.
Required surfaces
- Sidebar nav — 240px wide, icons + labels, current section highlighted. Sections grouped (Overview / Reports / Settings).
- Topbar — workspace name, search, notifications, account menu.
- Header row — page title + breadcrumbs on the left; primary action (e.g. "Export") on the right.
- 4 KPI cards in a row — large number, label, delta vs last period (green/red). Tabular numerics, mono for IDs/hashes.
- Main visual area — one large chart placeholder (SVG with grid lines + labelled mock data is fine) OR a heatmap grid OR a multi-line area.
- Data table — sortable column headers, hairline row borders (no zebra striping), pagination at the bottom. Include status pills (success / warn / danger) with restrained tinted backgrounds.
- Empty / loading / error states — at least one of them should be visible (e.g. a banner or a placeholder row).
Quality rules
- No marketing copy. No oversized headlines. No hero images.
- Hairline borders only (1px), no shadows except on dropdowns/modals.
- Inline status pills, never giant alert banners for routine signals.
- Sidebar collapses to icon-only at <1024px; full-screen drawer at <768px.
- Avoid warm beige / peach backgrounds — neutral surface, brand accent for one signal color only.