Skip to main content
Status pages render against a token-driven theme. Every visible surface (background, foreground, accent, semantic colors, 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 colors and typography intended for a particular brand register (warm-light, cool-dark, monochrome, and others). Selecting a preset saves its tokens to the page.

​
Override individual tokens

The theme editor surfaces every token the public page consumes:
  • Colors:
    • Accent: links, focus, and primary buttons.
    • Background, Surface: page and card backgrounds.
    • Text, Muted text: primary and secondary text.
    • Healthy, Degraded, Unhealthy: status indicators.
  • Fonts: Heading, Body, and Mono, each chosen from a fixed list: System sans, System serif, System mono, Inter, IBM Plex Sans, IBM Plex Serif, IBM Plex Mono, JetBrains Mono, Roboto, and Roboto Mono. Arbitrary font-family values are not accepted.
  • Spacing: compact, comfortable, or spacious.
  • Corner radius: sharp, subtle, soft, or round.
On the Blueprint layout only background and accent apply. Blueprint uses its own palette and type; surface, text, status colors, fonts, spacing, and corner radius are ignored there. 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, on the Enterprise plan, open the Custom CSS section. 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.
WCAG AA contrastObserver raises muted text and status colours to WCAG AA contrast automatically, and picks readable text for accent and status fills. Check accent and text colours against the background yourself.

​
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.

​
Metric descriptions

Each metric definition carries a description written in the console. By default it stays internal. The page builder’s metrics slot has a “Descriptions” toggle that renders it as a muted line under the metric title on the public page, on every layout. Descriptions were often written as internal notes, so review them before enabling the toggle: whatever the description says becomes visible to every visitor of the page.