> ## Documentation Index
> Fetch the complete documentation index at: https://docs.use.observer/llms.txt
> Use this file to discover all available pages before exploring further.

# Customize the status page theme

> Apply a built-in theme preset or override colors, typography, and spacing on a per-page basis.

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.

> [!WARNING]
>
> **WCAG AA contrast**
>
> Observer 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.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.