Branding Your Status Page
Last updated: 2026-05-21
Make your status page look like it belongs to your company. Add your logo, match your brand colors, and create a professional appearance that your users will recognize.
Accessing Branding Settings
- Go to Status Pages from the left menu
- Click on your status page
- You’ll find branding options in the Visual tab
Uploading Your Logo
Your logo appears at the top of your status page. You can upload separate logos for light, dark, and default contexts; StatusPage.me automatically serves the right variant based on the visitor’s theme preference.
- Find the Logo section
- Click Upload or drag and drop an image for each variant
- Wait for uploads to complete
- Click Save
Logo Variants
| Variant | When it’s used |
|---|---|
| Default | Shown when no theme-specific logo is set, or when Auto theme is used and no light/dark logo exists |
| Light Theme | Shown when the status page is displayed in light mode |
| Dark Theme | Shown when the status page is displayed in dark mode |
Using theme-specific logos gives you the most polished result; your logo stays visible and properly contrasted whether the page is light or dark.
Logo Requirements
| Requirement | Details |
|---|---|
| Formats | PNG, JPG, JPEG, SVG |
| File size | Maximum 500KB per image |
| Background | Transparent works best |
Show Logo Text
Toggle the Show logo text option to display your status page name next to the logo. This is helpful if:
- Your logo doesn’t include text
- You want to reinforce your brand name
- Your logo is an icon or symbol
Brand Color Palette
The Brand Color Palette section lets you define the colors that shape your status page’s visual identity. You can set separate palettes for light mode and dark mode visitors — each with five independent color roles.
Enable the palette with the Enable toggle at the top of the Brand Color Palette card. The card expands automatically when you turn it on.
Color Roles
Each role controls a specific set of elements on the page:
| Color | Applied to |
|---|---|
| Primary | Navbar brand text, headings, buttons, and links |
| Secondary | Component card borders and muted text |
| Accent | Link hover states and focus rings |
| Background | Page background color |
| Text | Body text, card text |
You can set each color using the color picker or by typing a hex code directly into the text field. The field accepts shorthand (e.g. #3bf expands to #33bbff) and auto-prepends # if you forget it.
Extracting Colors from Your Logo
Instead of choosing colors manually, you can extract a suggested palette directly from your logo:
- Upload a logo (or favicon) in the Logo section above
- Click Extract Colors from Logo
- StatusPage.me analyzes the image using color clustering and returns the dominant colors as swatches, plus a ready-to-use suggested palette for both light and dark mode
- Click any swatch to open the role-assignment menu and apply it to Primary, Secondary, Accent, Background, or Text
- Click Apply Suggested Palette to fill all five light-mode fields at once (dark mode fields are also populated from the dark variant of the suggestion)
- Adjust any individual color if needed
- Click Save Color Palette
Extracting from a logo is faster than choosing colors manually and ensures your palette matches your brand’s actual visual identity.
Dark Mode Colors
Below the light mode color pickers you’ll find a Dark Mode Colors section. These five colors override the light palette automatically when a visitor’s browser or system preference is set to dark theme — you don’t need to do anything extra on the visitor’s side.
| Color | Dark mode default |
|---|---|
| Dark Primary | #3b82f6 |
| Dark Secondary | #64748b |
| Dark Accent | #10b981 |
| Dark Background | #1e293b |
| Dark Text | #f1f5f9 |
The defaults work for most brand palettes. Adjust them if your primary brand color reads poorly on a dark surface, or if you want a completely different look in dark mode.
Why this matters: Without dark mode colors, the light Background color (often white or near-white) would apply even when a visitor’s device is in dark mode, producing a jarring light page inside a dark interface. Setting a dark palette gives visitors a consistent, intentional experience in both contexts.
Live Preview
The Live Preview section shows how your colors will look before you save:
- Toggle between ☀ Light and 🌙 Dark preview modes to check both palettes without switching your device’s theme
- The contrast ratio indicator below the preview shows the WCAG compliance level between your text and background colors in the current preview mode:
| Result | Ratio | Meaning |
|---|---|---|
| ✅ AA contrast (good) | ≥ 4.5:1 | Readable for all text sizes |
| ⚠ Large text only | ≥ 3.0:1 | Only suitable for headings and large text |
| ❌ Fails WCAG AA | < 3.0:1 | May be unreadable for many visitors |
Switch to Dark preview mode and check the contrast ratio for your dark text/background combination before saving. See Custom CSS for Status Pages if you need finer control over accessibility styling.
Saving and Removing
- Unsaved changes — An “Unsaved changes” badge appears whenever you edit colors without saving. Your browser will warn you before navigating away with unsaved changes.
- Save Color Palette — Saves all ten colors (five light, five dark) and enables the palette. The page re-applies the new colors within seconds.
- Remove Palette — Clears all saved colors and resets to the default StatusPage.me appearance. This button is at the far right of the action row to reduce the chance of accidental clicks.
Theme Options
Choose how your status page appears by default:
| Theme | Description |
|---|---|
| Light | White background with dark text |
| Dark | Dark background with light text |
| Auto | Matches the visitor’s system preference |
Most companies choose Auto so their page looks good for everyone regardless of their device settings.
Page Theme Presets
In addition to the light/dark/auto color mode, the Visual > Advanced area includes a Page Theme picker. This changes the page’s visual system without replacing your brand colors.
| Page Theme | Best for |
|---|---|
| Default | The standard status page layout and density |
| Minimal Edge | A flatter, sharper layout with a cleaner modern feel |
| High Contrast | Stronger separators, heavier controls, and maximum readability |
| Soft Cloud | Softer spacing, rounder cards, and a friendlier look |
| Terminal | A tighter, monospaced, squared-off technical style |
Page Theme presets affect typography, card radius, spacing, button feel, and history-tick density. Your Custom CSS still takes precedence if you want to fine-tune the result.
If a downgrade temporarily removed premium branding values, you can review the saved-vs-current diff and restore selected settings from the status page settings screen. See Status Page Settings Snapshots.
If you plan to show the full status page inside an iframe, the same Page Theme also applies in embedded mode. See Embedding a Full Status Page.
If your page is a simple status page with many component groups, you can also switch the overall page structure with Large Layout Mode for Status Pages.
Custom Favicon
The favicon is the small icon that appears in browser tabs. Upload your own to match your brand:
- Find the Favicon section
- Upload a square image (recommended: 32×32 or 64×64 pixels)
- PNG or ICO format works best
- Click Save
Uploading a favicon also makes it available as a source for palette extraction — useful if you don’t have a separate logo image.
Branding Best Practices
| Do | Don’t |
|---|---|
| Use your official logo | Use a low-quality or pixelated image |
| Match your website’s colors | Use colors that clash with your logo |
| Check contrast in both Light and Dark preview | Set colors only for one theme and ignore the other |
| Keep it simple | Overcomplicate with too many elements |
| Test on mobile devices | Forget to check the mobile experience |