name	dashboard
description	Internal tool / analytics dashboard — sidebar nav, KPI cards, charts placeholder, a data table.
metadata	{"mode":"prototype","platform":"desktop_web","scenario":"app","default_for":["dashboard","admin panel","internal tool","ops console"],"example_prompt":"An analytics dashboard for a billing ops team — MRR, churn, latest invoices","design_system_required":false}

Dashboard / tool UI

Information density is the feature, not vibes. You are a systems designer here, not a brand designer.

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).

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.

Más de este repositorio

mismo repositorio

Long-form editorial article — opinionated typography, byline, hero image, generous reading column.

Single-page coming-soon / waitlist page with email capture and one decisive piece of art.

Technical documentation page — sidebar TOC, in-page anchor TOC, prose with code blocks.

Single mobile app screen rendered inside a real device frame (iPhone or Pixel).

Personal or studio portfolio — bold typographic intro, project grid, case-study links, contact.

Standalone pricing + comparison page with tier cards and an itemized feature table.

name	dashboard
description	Internal tool / analytics dashboard — sidebar nav, KPI cards, charts placeholder, a data table.
metadata	{"mode":"prototype","platform":"desktop_web","scenario":"app","default_for":["dashboard","admin panel","internal tool","ops console"],"example_prompt":"An analytics dashboard for a billing ops team — MRR, churn, latest invoices","design_system_required":false}

Information density is the feature, not vibes. You are a systems designer here, not a brand designer.

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).

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.