Communicate system health with a readable overall summary and drill-down service history.
Design notes
Surface
Service status
Navigation
Report and subscription actions sit in the top bar.
Layout
A constrained central column stacks overall status, service rows, and a history action.
Density
Headline metrics are spacious; supporting chart labels and rankings use denser alignment.
Color
Charcoal surfaces, green operational indicators, and occasional warm historical incident markers.
Type
Bright service labels and small muted percentages make repeated uptime rows easy to compare.
Pattern
Communicate system health with a readable overall summary and drill-down service history.
States
Capture-time operational summary and per-service uptime bars; conditions may change.
Don't
Adapt the interaction pattern to your own product. Do not copy brand assets, sample identities, proprietary text, or assume unseen states. Specify keyboard behavior, loading, empty, error, and narrow-screen layouts for your implementation.
Make it your own
Turn this reference into a useful brief for your project. Copy it into the AI tool you already use.
Add constraintsPreview & edit promptAssembled in your browser. No API key or AI request needed. Changing the fields refreshes the preview.