Recipe
Status page design
Build a public-facing status dashboard that customers trust.
Overview
A status page is the single source of truth when things go wrong. Customers check it before opening tickets. A well-designed status page reduces support load and builds confidence in your infrastructure.
Core components
System banner
Global state indicator — operational, degraded, outage — pinned to the top of the page with the current incident summary.
Service grid
Each subsystem gets a row: name, status icon, uptime percentage. Color-coded green / yellow / red.
Incident timeline
Reverse-chronological log of past incidents with timestamps, affected services, and resolution notes.
Subscribe CTA
Email or webhook subscription so customers get notified without polling.
Design principles
- Load fast. No frameworks, no SPAs. Static HTML regenerated on incident change.
- Be honest. Show partial outages. Never claim “operational” when degraded.
- Own the brand. Match your product’s visual language — not a generic third-party template.
Implementation
Use a key-value store (Upstash KV or similar) to hold current status and incident history. On incident creation, invalidate the static page via a webhook. The page itself is a single static route with no client-side data fetching — fully cacheable at the edge.