Design System
Blocks · Dashboard
Application blocks — stat cards, charts, tables, page and sidebar layouts — composed from the kit over mock fixtures.
A four-up KPI row — label, value, delta, and comparison hint per card.
KPI cards pairing a value with a baked mini sparkline trend.
A revenue card wrapping a baked filled-area trend over 12 mock months.
Revenue
Monthly, trailing 12 months (mock)
A visitors card wrapping a baked weekday bar chart (mock series).
Visitors
By day of week (mock)
An acquisition card — baked grouped bars of new vs. returning by channel.
Acquisition
New vs. returning by channel (mock)
A device-share card wrapping a baked donut of session split (mock).
Devices
Share of sessions (mock)
An invoices table with a search/export toolbar and status badges.
Invoices
Recent billing activity
| Invoice | Customer | Date | Status | Amount |
|---|---|---|---|---|
| INV-2043 | LLLoomfield Ltd | Jul 21 | Paid | $4,200 |
| INV-2042 | CACartographer | Jul 20 | Pending | $1,850 |
| INV-2041 | KSKelvin Studio | Jul 19 | Paid | $960 |
| INV-2040 | HCHalcyon Co | Jul 15 | Overdue | $3,120 |
| INV-2039 | MEMeridian | Jul 14 | Paid | $540 |
An activity timeline — who did what, when, as an avatar-led list.
Activity
- MOMaya Ortiz approved invoice INV-20432h ago
- DPDevin Park shipped order #40214h ago
- ANAïsha Nouri left a review on Aurora Lamp6h ago
- LFLeo Faber updated the pricing pageYesterday
A goals card — labelled progress bars with a fraction note each.
Goals
This quarter
- Quarterly revenue$48k of $67k
- New customers270 of 500
- NPS surveys176 of 200
A team members list — avatar, name, role, and a role badge per row.
Team members
An app page header — breadcrumb, title, a range tab bar, and actions.
Analytics
A live look at revenue, traffic, and conversion.
A settings panel — profile fields above toggled notification rows.
Notifications
Choose what lands in your inbox.
A full app shell — sidebar nav, topbar, KPI row, and a chart panel.
A traffic-sources card wrapping a baked 12-month stacked area (mock).
Traffic sources
Stacked, 12 months (mock)
A top-pages card wrapping a baked horizontal bar by views (mock).
Top pages
By views (mock)
A year-over-year card wrapping a baked two-series line (mock).
Revenue vs. last year
Two series (mock)
A task checklist — checkbox, label with done strike-through, and a tag.
Tasks
3 open
A notifications panel — avatar-led rows with an unread dot.
Notifications
Mark all readA compact recent-orders list — ref, date, status badge, and total.
Recent orders
A top-regions breakdown — labelled progress bars with share.
Top regions
Sessions by country
- United States4,210 · 42%
- Germany1,860 · 19%
- United Kingdom1,240 · 12%
- India980 · 10%
- Brazil640 · 6%
An inbox list — avatar, sender, preview, timestamp, and unread dot.
A profile card — avatar, name, a three-up stat strip, and actions.
A quick-actions grid — icon-and-label shortcut tiles.
A storage meter — a segmented usage bar with a per-category legend.
Storage
68 GB of 100 GB used
A this-period-vs-previous pair of metric cards with deltas.
A category-share card wrapping a baked full pie (mock).
Category share
Full pie (mock)
A goal-completion card — a baked arc gauge with a centered percentage.
Goal completion
Quarter to date (mock)
An engagement card wrapping a baked compact single-series area (mock).
Engagement
Daily active, this week (mock)
A net-cash-flow card — a baked diverging in/out bar (mock).
Net cash flow
Monthly in/out (mock)
A six-up KPI grid — value, delta, and comparison hint per cell.
An invoices summary — paid/pending/overdue amounts in tone.
Invoices
This month
A compact month calendar widget with marked event days.
July 2026
A revenue-by-source breakdown as labelled progress bars.
Revenue breakdown
- Subscriptions$29,940 · 62%
- Services$11,590 · 24%
- One-time$6,760 · 14%
A subscription card — plan, price, seats-used bar, and manage actions.
Team plan
Renews Aug 21, 2026
A getting-started checklist with a completion bar and ticked steps.
Get started
2 of 4 complete
An API usage panel — requests, storage, and seats as metered bars.
API usage
Current billing period
- Requests842k / 1M
- Storage68 / 100 GB
- Seats8 / 10
An audit log — timestamped actor/action rows with a category tag.
Audit log
An integrations list with a per-tool connection-status badge.
Integrations
A plan-usage banner — a metered bar and an upgrade CTA.
A feedback card — an emoji rating row and a submit action.
How’s it going?
Rate your experience this week.
A saved-reports list — report name, cadence, and an overflow action.