Customise the status page theme

Status pages render against a token-driven theme. Every visible surface (background, foreground, accent, semantic colours, typography, spacing, border radius) is exposed as a CSS variable that a preset or per-page override can change without touching code.

Pick a preset

Open the page in the builder, then Theme. Each preset is a pre-baked combination of colours and typography intended for a particular brand register (warm-light, cool-dark, monochrome, and others). Selecting a preset writes its tokens to the page's page_themes row.

Override individual tokens

The theme editor surfaces every token the public page consumes:

• Background, surface, foreground: page chrome.
• Accent: status pill, primary buttons, link colour.
• Success, warning, danger: status indicators (healthy, degraded, unhealthy).
• Border, muted, muted foreground: dividers and secondary text.
• Heading, body, mono: font families. The page builder picks Google Fonts by default; arbitrary CSS font-family strings are also accepted.
• Spacing scale, radius: layout density.

Every override is persisted on the page and applied at render time. Preview changes in the page builder before saving.

Custom CSS

If a token override is not enough, open Theme, then Custom CSS. The CSS you provide is injected into the rendered page after the preset and token overrides. Use it for narrow corrections (e.g. shifting a margin, hiding a block on small viewports) rather than re-skinning the page.

Preset rollout

A theme preset selected through the Theme picker writes the preset's tokens to the page row. Subsequent updates to the preset itself do not retroactively rewrite pages that already adopted it. To apply a refreshed preset, re-select it on each page that should update.