Branding Your Status Page
Last updated: 2026-05-11
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 Colors
The Brand Colors section lets you set five colors that define your status page’s visual identity:
| Color | Used for |
|---|---|
| Primary | Main headings, emphasis text |
| Secondary | Subheadings, supporting text |
| Accent | Buttons, interactive elements, links, status highlights |
| Background | Page background color |
| Text | Body text color |
You can set each color manually using the color picker or by entering a hex code (like #3B82F6).
Extracting Colors from Your Logo
Instead of setting colors manually, you can extract a suggested palette directly from your uploaded logo:
- Upload a logo image (default logo)
- Click Extract Palette
- StatusPage.me analyzes the logo and generates suggested values for primary, secondary, accent, background, and text colors
- Review the suggestions; click any color to edit it if needed
- Toggle Use extracted palette to apply the suggestions
- Click Save
Extracting from a logo is faster than picking colors manually and ensures your status page matches your brand’s actual visual identity.
Accent Color
The accent color is used for:
- Buttons and interactive elements
- Links and highlights
- Status indicators
To set your accent color:
- Click on the color picker
- Choose your brand’s primary color
- Or enter a hex code (like
#3B82F6) - Click Save
Tip: Use a color that contrasts well with both light and dark backgrounds.
Theme Options
Choose how your status page appears:
| 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.
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: 32x32 or 64x64 pixels)
- PNG or ICO format works best
- Click Save
Preview Your Changes
Before saving, you can preview how your status page will look:
- Make your branding changes
- Click the Preview button
- See how visitors will experience your page
- Go back and adjust if needed
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 |
| Keep it simple | Overcomplicate with too many elements |
| Test on mobile devices | Forget to check the mobile experience |