Branding

By default, a status page uses UptimeHunt's own brand — colors, font, and a "Powered by UptimeHunt" badge in the footer. Enterprise plans can replace all of it with their own, including support for light and dark appearance modes and custom webfonts.

Appearance modes

Choose how your status page appears to visitors:

When you select Auto, the page will respect the visitor's system appearance preference. Each dark-mode token resolves in three steps: if you set it in the dark-mode section, that value is used; otherwise it falls back to the value you set for that same token in light mode; and only if you left both unset does it fall back to UptimeHunt's built-in dark default. In short: a field you leave blank keeps the color you set above it (in light mode) if you set one, and otherwise falls back to the UptimeHunt dark default — so you only need to customize the modes you care about.

Colors

Branding is applied through CSS color tokens. Set any subset — anything you don't set falls back to the UptimeHunt default for that appearance mode:

Each field in the editor names its own default underneath it, so you never have to look a value up here to know what leaving it blank will give you. Colors accept a hex value, an rgb() or hsl() function, or any CSS color name. CSS keywords such as inherit are rejected — they are not colors, and their meaning would depend on where the token is used.

As you type, the editor checks each color against the two backgrounds it can land on and warns when the worse of them is too low to read. Text colors are held to 4.5:1 and the four status colors to 3:1, because a status color paints a day square or a pill rather than a line of prose.

The status colors also drive the 90-day history strip on every component, so overriding them re-colors the strips too. Status tokens DO have distinct dark defaults — a lightened variant of each light-mode color — because the light-mode values would render low-contrast, near-invisible on a dark background. If you customize a status color, consider setting both the light and dark variant for the same reason.

Setting colors for dark mode

When you choose Auto appearance mode, you can optionally set a separate set of tokens for dark mode. Use the dark-mode color section to customize how your page looks when visitors have dark mode enabled on their device.

Each dark-mode token resolves in three steps, not two: (1) the value you set in the dark-mode section, if any; (2) otherwise, the value you set for that same token in light mode; (3) otherwise, UptimeHunt's built-in dark default.

For example, if you customize --sp-color-bg in light mode but leave the dark-mode --sp-color-bg blank, dark mode will use your light-mode value for that key — not UptimeHunt's tuned dark background. This can look wrong if your light-mode color wasn't chosen with a dark background in mind, so most users should also set a dark value for any token they've customized in light mode.

Fonts

Using a custom webfont

Upload a font file under Font file, and name its family in the --sp-font token (the Font family field). Both are needed: the file loads the font, and the token tells the page to use it.

Accepted formats are .woff2, .woff, .ttf and .otf, up to 2 MB. Stylesheets are not accepted — a Google Fonts CSS link will be rejected, because the page builds its own @font-face from the file rather than importing third-party CSS.

We serve the uploaded file from your status page's own domain. That means there is no CORS to configure, no third-party host observing your visitors, and nothing extra that has to stay online for your typography to render.

A separate font for headings

Upload a second file under Heading font file and name it in --sp-font-heading to use a different typeface for headings. Leave both blank and headings use the body font.

This is the common two-face brand system: a display face for headings, a readable one for body text. There is no per-section font beyond these two — each additional typeface is another file the browser must fetch before it can paint, on a page people are reading precisely because something else is broken.

Your logo needs no font setting of its own. It is an image, so whatever typeface your lockup uses is already part of the file you upload.

Logo

Upload a logo to replace the default UptimeHunt lockup at the top of the page. Accepted formats are PNG, JPG, WEBP and SVG, up to 512 KB.

We host the file, so your logo keeps rendering even when your own site is down — which is exactly when people visit your status page.

If you serve both light and dark appearances, you can upload a second logo for the dark one. Upload only one and it is used for both, whichever one you supply.

SVG logos are checked on upload and refused if they contain scripts, event handlers, embedded frames or references to external files. If yours is rejected, export it as a plain shape-only SVG or upload a PNG.

Hiding the badge

Turn on Hide the "Powered by UptimeHunt" footer badge to remove that footer link entirely.

Related Documentation

• Create and publish a status page
• Availability by plan