Appearance and languages
You can make a status page look like your own product. Set a logo, a favicon, a brand colour, a colour preset, the mode that visitors see first and a font. The page and its subscriber emails can show in six languages.
Change the appearance
Owners, managers and admins can change the appearance.
- In the dashboard, open the status page and go to the Appearance tab.
- Change the settings in Brand, Theme, Colours and Font.
- Check the preview. Use Preview in to see light and dark mode.
- Select Save appearance.
The preview shows the top of the real public page, with your components and uptime.
Brand
| Setting | Formats | Size | Notes |
|---|---|---|---|
| Logo | SVG, PNG, JPG or WebP | 2 MB at most | Shows in the header and in subscriber emails. |
| Logo for dark mode | SVG, PNG, JPG or WebP | 2 MB at most | Optional. Without one, dark mode shows the logo. |
| Favicon | SVG, ICO, PNG, JPG or WebP | 512 KB at most | The browser tab icon. |
| Brand colour | Hex colour, for example #0f766e | Fills the logo mark and the Subscribe button, and tints links. |
Without a brand colour, the page uses Spectate yellow (#ffea00). Email clients do not show SVG images, so subscriber emails show the page name if the logo is an SVG.
The tab icon also shows the status of the page. See share image and status favicon.
Colour presets
A preset sets all colours for light and dark mode. Pick the preset that is closest to your brand, then change single colours if necessary.
| Preset | Value | Colours |
|---|---|---|
| Spectate | spectate | Neutral greys. This is the default. |
| Paper | paper | Warm cream and sepia ink. |
| Graphite | graphite | Soft charcoal, strong lines. |
| Ocean | ocean | Clear blues, navy in dark mode. |
| Forest | forest | Sage greens, deep pine in dark mode. |
| Lavender | lavender | Lilac, aubergine in dark mode. |
| Ember | ember | Peach and terracotta, warm in dark mode. |
| High contrast | contrast | Pure black and white, bold lines. |
Light and dark mode
Visitors see first sets the mode of the page when a visitor opens it:
| Option | Value | Visitors see |
|---|---|---|
| Light | light | Light mode. |
| Dark | dark | Dark mode. |
| Device setting | system | The mode of their operating system. |
Visitors can switch the mode with the button in the header of the page.
Custom colours
Select Customise in Colours to change single colours of the preset. Use Light mode and Dark mode to change each mode separately. Colours that you do not change come from the preset.
| Colour | Value | Used for |
|---|---|---|
| Background | background | Behind everything. |
| Cards | surface | Panels, dialogs and menus. |
| Text | foreground | Headings and body text. |
| Secondary text | muted | Descriptions, labels and times. |
| Lines | border | Borders and dividers. |
| Operational | success | Healthy components and uptime days. |
| Degraded | warning | Degraded performance. |
| Partial outage | partial | Partial outages. |
| Full outage | danger | Full outages and open incidents. |
| Maintenance | info | Planned work. |
Spectate calculates the other colours from these, for example hover states, faint text and empty uptime days.
Readable text
Spectate keeps the page readable for every combination of colours:
- Spectate calculates faint text and text in status colours from your colours. It adjusts these text colours until they have a contrast of at least 4.5:1.
- Spectate does not change the colours that you pick yourself. Instead, the editor warns when Text, Text on cards or Secondary text has a contrast below 4.5:1 against its background.
- The editor warns when a status colour has a contrast below 3:1 against the background. Status dots and bars need 3:1 to be visible.
The warnings show the measured ratio, for example "Text is hard to read (3.2:1, aim for 4.5)". You can save with a warning.
Fonts
The font applies to all text on the page. Numbers and times always use a monospaced font.
| Font | Value |
|---|---|
| Geist (default) | geist |
| Inter | inter |
| IBM Plex Sans | ibm-plex-sans |
| DM Sans | dm-sans |
| Manrope | manrope |
| Space Grotesk | space-grotesk |
| Source Serif | source-serif |
| System | system: the interface font of each visitor's device. |
Spectate serves the fonts itself. Visitors do not load fonts from a third party.
Languages
A status page and its subscriber emails can show in English (en), Dutch (nl), German (de), French (fr), Spanish (es) and Italian (it).
- Go to Settings → Language on the status page.
- Select the Page language. The default is English.
- Select or clear Match the visitor's browser language. It is on by default.
- Select Save language.
Spectate translates its own text: headings, labels, buttons, dates, durations and numbers. Your page name, component names, incident titles, updates and maintenance text show as you wrote them.
Which language a visitor sees
- Match the visitor's browser language is off. Every visitor sees the page language.
- Match the visitor's browser language is on. A visitor whose browser prefers a supported language sees that language. Other visitors see the page language. A language switcher in the footer lets visitors pick another language. Spectate remembers the choice for one year.
The URL of the page does not change with the language. The RSS and Atom feeds and the share image always use the page language. Subscriber emails use the language that the subscriber saw when they subscribed. See subscribers.