Catalog · Data
Surfaces for records, metrics, and structure.
Display-first components for reading data: compact tables with filters and sorting, Recharts graphs, and a card system for record-level detail.
Sections
3
Charts
Recharts
Type
Display
S-0404 / Charts
Graph and chart system
Recharts is the primary fit for this design: crisp SVG, composable React primitives, and CSS-variable theming.
Charts
Operational signal chart
Responsive Recharts primitives with soft gridlines, neutral surfaces, custom tooltip, and status color as signal only.
Library decision
Keep chart primitives local, theme them through Geist CSS variables, and avoid a second dashboard design system.
Channel share donut
A compact pie variant for proportional category scans.
Compact latency line
Small charts should stay quiet: no loud fills, no oversized legend.
Bar graph direction
Bars should feel like measured instrumentation, not black blocks. Use neutral rails, one primary signal, and a softer comparison series.
Radial
Capacity gauges
A neutral 270° gauge for single-number health; color stays a signal, not a fill.
Model diagnostics
Predicted vs actual
Recharts scatter with custom point coloring, reference line, and hover tooltip.
Classification
Confusion matrix
Confusion matrix heatmap using the MRI analysis grid pattern for dense class comparison.
S-0505 / Cards
Card system
The same card skeleton, with tone, density, and depth controlled separately.
01 / Signal
Live Event Inbox
A compact record card for webhook events, queue jobs, alerts, or approval items.
02 / Advisory
Sync Health
Summarizes pull windows, stale records, retry counts, and the next scheduled run.
03 / Accent
Release Gate
Shows launch readiness, blockers, ownership, and environment-specific checks.
04 / Risk
Transport Watch
Flags adapter drift, packet loss, schema mismatch, and unhandled edge states.
Flag-heavy data card
Signal Runner · Motion Asset
A domain-neutral record card with flag space, a mini table, and a note area for operational metrics, channels, and runtime context.
Reliability
99.97%
Latency
241 ms
Events
273k
Mode
event-driven
Push
webhook intake ready
Pull
scheduled sync slot
Transport
HTTP / TCP / UDP adapters
Runtime budget
$34,590
Monthly placeholder for transport, event volume, and automation cost.
Placeholder metrics are intentionally generic so the template can fit products, dashboards, admin tools, or content systems.
Wide runtime decision card
When no image is needed, the horizontal card feels more operational. It can summarize channels, adapter readiness, and rollout state in one row family.
S-0707 / Tables
Table showcase
A compact table system with filters and sortable column headers.
Hierarchy table
Nested hierarchy table
Expandable rows for taxonomy, folders, routes, permissions, or any parent-child record set.
| Node | Rank | Parent | State | Leafs |
|---|---|---|---|---|
| domain | - | Active | 6 | |
| group | Runtime | Ready | 4 | |
| module | Events | Ready | 2 | |
| module | Events | Ready | 2 | |
| group | Runtime | Ready | 2 | |
| domain | - | Active | 3 | |
| domain | - | Active | 3 |
Template runtime
Runtime operations table
A dense operations table with filters, sorting, risk signals, and progress.
Operational Data Table tpl-010 | Analytics | Data Team | Low | 95% | Done |
Webhook Intake Pipeline tpl-001 | Events / Push | Core Team | Low | 92% | Active |
API Response Contracts tpl-004 | REST / RPC | Backend | Low | 88% | Active |
Realtime Stream Console tpl-005 | SSE / WebSocket | Frontend | Medium | 81% | Done |
Permission-Aware Navigation tpl-009 | Auth / UX | Design Systems | Medium | 76% | Active |
Pull Sync Scheduler tpl-002 | Jobs / Pull | Ops Team | Medium | 74% | Active |
Audit Trail Viewer tpl-007 | Security | Governance | Low | 69% | Active |
Transport Adapter Layer tpl-003 | TCP / UDP | Platform | High | 63% | Draft |
Feature Flag Registry tpl-006 | Config | Product | Medium | 57% | Draft |
Queue Retry Policy tpl-008 | Workers | Reliability | High | 44% | Draft |