Status page CSS

The hooks your own CSS can rely on across releases. Everything not listed here may change without notice.

Enter your CSS in Custom CSS under Advanced. Use the editor wherever it has a control: logo, accent colour, header colour for light and dark, background and theme are set there, and the editor derives readable text colours from them. CSS is for what the editor does not offer. How to create the page is in Publish a status page.

How it is applied

Your CSS sits in a style element inside the page, after the layout's own stylesheet, so at equal specificity your rule wins. Nothing scopes it for you: selectors reach the whole page document, so start them with .sp. The layouts' own rules are plain and class-prefixed (.sp .sp-…), so write yours the same way, not shorter. Dark mode is the class dark on the document element: write .dark .sp … for it.

CSS written before the layouts arrived (October 2026) targets markup that no longer exists and has to be rewritten against these hooks.

Attributes on the root

The element .sp carries these attributes, and all values are stable. Status elements carry data-s.

Blocks you can target

Only these blocks are documented. Their inner structure is not.

Variables you may override

All are custom properties on .sp. Defaults are given as light, then dark. Variables marked as set by the editor are replaced by the editor's choices. When you change a background, change the text on it too: nothing re-checks contrast for CSS.

You can read but not change --sp-ok, --sp-warn, --sp-warn-fill, --sp-down, --sp-idle. Status colours are fixed on purpose: green, amber and red mean the same on every page, and the layouts' contrast was checked only with the defaults.

When your variable seems to be ignored

• The editor sets some variables as an inline style on .sp: the accent ones when an accent colour is set, the header ones when a header colour is set. A plain .sp rule loses to an inline style. Either leave that colour unset in the editor, declare the variable on an inner element as in the first example, or add !important, which beats an inline value.
• Dark mode redefines the colour variables with .dark .sp, which is more specific than .sp. For a dark value write .dark .sp or use !important.
• Derived variables follow your change only when you declare the base variable on the same element where they are computed, which is .sp. A variable you redeclare on an inner element does not re-derive the others: set them too.
• The logo file follows the editor's header colour and the theme, not your CSS. If your CSS makes the header dark, upload a logo that works on it, or set the header colour in the editor, which also picks the right logo file.

.sp { --sp-accent: #B3261E !important; --sp-on-accent: #FFFFFF !important; --sp-accent-ink: #B3261E !important; }

Examples

All three ran against the current stylesheet at 1440 and 375 px, light and dark, in all three layouts: header colours, no horizontal overflow.

A navy header in both themes

Declare the variables on the header itself: that beats both the inline style and the stylesheet. Text, secondary text and hairline colours are set with it, because they are not re-derived there.

.sp .sp-head { --sp-head: #14304F; --sp-on-head: #FFFFFF; --sp-on-head-2: #C5D0DE; --sp-head-rule: #3B5576; }
.dark .sp .sp-head { --sp-head: #0E2238; }

Hide the uptime figure

The bars and words stay. In the response-time view the same element carries the latest response time, so that is hidden too.

.sp .sp-svc-uptime { display: none; }

Tighter corners on the cards

Brand and Overview draw their radii as plain lengths, so override the card blocks.

.sp[data-surface="cards"] :is(.sp-group, .sp-msg, .sp-note, .sp-card, .sp-past, .sp-sub, .sp-state) { border-radius: 4px; }

What is not a contract

• Element nesting and tag names inside the blocks above. A span may become a div.
• Any sp-* class or --sp-* variable not listed, for example the layout width, the radius and shadow values, and every part of a service row, message, history, calendar or subscribe block not named above.
• Pixel measures, spacing, radii and type sizes. There is no radius variable.
• The order and presence of blocks, and which layout shows which part.
• The thumbnails and sample data in the editor.