Getting Started
Overview Quickstart
Monitors
Overview Monitor Types Intervals & Probes Advanced Options
Status Pages
Overview Setup Customization Custom Domains Uptime History
Incidents
Overview Managing Incidents Maintenance Windows
Agent
Installation Configuration Upgrading Uninstallation Requirements Troubleshooting
Plugins
Overview Redis MySQL PostgreSQL MongoDB Nginx Apache PHP-FPM Memcached RabbitMQ Elasticsearch Meilisearch Varnish HAProxy Docker VictoriaMetrics mdadm (RAID)
API
Overview Authentication Monitors Incidents Status Pages Errors
RUM & Replay
Overview Quickstart Session Replay Custom Events Error Tracking Troubleshooting
OTLP & Tracing
Overview Distributed Traces Structured Logs Custom Metrics Language SDKs Troubleshooting
Observability Apps
Overview Creating Apps Quota Management Domain Whitelist Top-Up Credits
Alert Manager
Overview Anomaly Detection Alert Channels Thresholds
Teams
Overview Roles & Permissions Invitations Seats & Billing
Billing
Overview Plans & Quotas Top-up Credits Invoices & Portal
Security
Overview Two-Factor Auth API Tokens Sessions

Customizing a Status Page

Status pages support a primary brand color and a choice of layout. Both are set on the Create and Edit screens and apply to the public page at /status/{slug}.

Primary color

The primary color is your main brand color. It is applied to the public page as the --primary-color CSS variable.

  • Set it with the color picker on the create/edit form.
  • Default: #10b981 (emerald green).
  • Accepts a hex value (#RGB, #RRGGBB, or with alpha). Invalid values fall back to the default #10b981.

Layout

The layout controls the overall visual style of the page. Each style ships in a light and a dark variant, selected from a single dropdown:

Layout value Style Mode
modern-light Modern Light (default)
modern-dark Modern Dark
classic-light Classic Light
classic-dark Classic Dark
compact-light Compact Light
compact-dark Compact Dark

How it renders:

  • The page body gets a layout-<style> class (layout-modern, layout-classic, or layout-compact).
  • Any -dark variant additionally loads the dark theme stylesheet and adds the dark-mode class.
  • The default when nothing is set is modern-light.

Language

A status page can render in a specific locale. Set the language on the create/edit form; the public page uses that locale for its labels (status text, "Uptime history", "Recent incidents", date formats, etc.). Defaults to en.

What appears on the page

The public page is composed of these sections, in order:

  1. Status hero β€” title, description, and the overall status banner ("All systems operational" or "Experiencing issues") with a last-updated timestamp.
  2. Uptime history β€” a per-day grid colored by uptime (excellent β‰₯ 99.9%, good β‰₯ 95%, poor below 95%, plus a "no data" state). See Uptime History.
  3. Services β€” assigned monitors grouped by their monitor group. Each shows its current status and, where available, latest response time. A group is marked "partial outage" if any of its monitors is down.
  4. Recent incidents β€” up to the latest incidents for the assigned monitors, with start time and (if resolved) the resolution duration.

Title and description

  • Title appears in the hero and the page <title>.
  • Description appears under the title and is used as the page meta description for SEO and link previews. It is optional.

What is not configurable

The status page builder exposes the primary color, layout, language, history window, public/private flag, and monitor selection. Per-page custom CSS/HTML and logo/favicon overrides are not exposed in the status page editor β€” use the primary color and layout options for branding, and a custom domain for hostname branding.

Next Steps

On this page