Dashboard surfaces are the most-trafficked screens in any operational product, and the most prone to becoming kitchen sinks of charts and numbers. The systems that document them well treat the dashboard as a designed surface, not a metric dump — clear hierarchy, scannable single-glance values, deliberate use of color to indicate state, and patterns for empty / loading / error.
These references handle the recurring problems: how to combine summary tiles with deeper charts, how to handle date-range scoping, how to make charts accessible for screen readers, and how to degrade when data is missing.
- 01Single-glance summary tiles at the top with the most important metric, trend indicator, and date range.
- 02Date-range scoping is global and consistent across the dashboard.
- 03Charts have explicit empty / loading / error states designed in.
- 04Color is used semantically (green up, red down) but with redundant non-color signals for accessibility.
- 05Tabular numerics in mono font so columns of numbers visually align.
- 01Six charts laid out as a grid with no information hierarchy — every chart fights for attention.
- 02Loading state is a generic spinner over the entire dashboard, blanking out context for several seconds.
- 03Charts use color alone to encode state — red/green only — failing the colorblind population.
Carbon
IBM
Carbon Charts
Comprehensive data-viz library with documented chart types, accessibility expectations, and motion-aware loading states.
Stripe Design System
Stripe
Dashboard surface
Financial-reconciliation dashboards with summary tiles, time-series charts, and dense detail tables — the reference for fintech monitoring.
Geist
Vercel
Deployment Card + metrics
Restrained dev-tool dashboards — single-glance status, key metric, sparkline. The minimum-viable dashboard pattern done right.
PatternFly
Red Hat
PatternFly Charts
Time-series infrastructure metrics built for Kubernetes-grade observability — log viewers, gauge charts, donut breakdowns.