Status Page Branding

Customize your status page to match your brand identity. Upload logos, set colors, add custom CSS, and use your own domain.

Logo Upload

Upload your company logo in multiple formats:

Uploading Logos

1. Go to Status Pages → Select your page
2. Click Branding tab
3. Upload logo files (PNG, SVG, JPG supported)
4. Preview on light/dark backgrounds
5. Save changes

Color Customization

Primary Color

Sets the accent color for links, buttons, and status indicators:

Primary Color: #387CE9

Used for:
- Links and buttons
- Component status bars (when operational)
- Header accents
- Focus states

Status Colors

Customize colors for each status (optional, defaults provided):

Custom Domain

Setup Process

1. Go to Branding → Custom Domain
2. Enter your domain: status.example.com
3. Add DNS record:

   Type: CNAME
   Name: status
   Value: blacktide.xyz
   TTL: 3600

4. Wait for DNS propagation (5-60 minutes)
5. Verify domain in dashboard
6. SSL certificate auto-provisioned

Supported Domains

• status.example.com ✅
• uptime.example.com ✅
• health.example.com ✅
• example.com ❌ (subdomain required)

Custom CSS

Add custom CSS for advanced styling:

/* Custom fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700');

body {
  font-family: 'Inter', sans-serif;
}

/* Custom header */
.status-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 2rem;
}

/* Component cards */
.component-card {
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

/* Operational status */
.status-operational {
  background-color: #10b981;
  color: white;
}

CSS Limitations

• Max file size: 50 KB
• External resources allowed (fonts, images via CDN)
• No JavaScript execution
• Scoped to status page only

Page Metadata

SEO Settings

Page Title: Example Status - System Status
Meta Description: Real-time status and uptime monitoring for Example services.

Open Graph:
  og:title: Example Status
  og:description: Check the current status of Example services
  og:image: https://cdn.example.com/og-image.png

Twitter Card:
  twitter:card: summary_large_image
  twitter:title: Example Status
  twitter:image: https://cdn.example.com/twitter-card.png

Theme Modes

Light Theme

• Default for most visitors
• White background, dark text
• Use primary logo (dark version)

Dark Theme

• Optional dark mode toggle
• Dark background, light text
• Use dark logo (light version)
• Auto-detects user preference

Branding Examples

Example 1: Tech Startup

Logo: Gradient wordmark
Primary Color: #667eea
Fonts: Inter, system-ui
Theme: Light with dark mode toggle
Domain: status.startup.com

Example 2: Enterprise SaaS

Logo: Corporate logo (blue)
Primary Color: #0066cc
Fonts: Helvetica Neue, Arial
Theme: Light only (corporate standard)
Domain: uptime.enterprise.com

Example 3: Web3 Platform

Logo: Animated gradient logo
Primary Color: #f59e0b (crypto gold)
Fonts: Space Grotesk
Theme: Dark mode default
Domain: status.protocol.xyz
Custom CSS: Glassmorphism effects

Best Practices

1. Use SVG Logos

• Scalable to any size
• Crisp on retina displays
• Small file size
• Supports animations

2. Accessible Colors

• WCAG AA contrast ratio (4.5:1 minimum)
• Test with color blindness simulators
• Don't rely on color alone for status

3. Mobile Optimization

• Test logo on small screens
• Ensure text is readable
• Touch targets >44px

4. Load Performance

• Optimize images (compress PNG/JPG)
• Use CDN for assets
• Minimize custom CSS
• Lazy load OG images

Plan Limits

Troubleshooting

Custom Domain Not Working

Possible Causes:

• DNS not propagated yet (wait 24-48h)
• CNAME record incorrect
• Cloudflare proxy enabled (should be DNS only)

Solution:

1. Verify DNS with dig status.example.com
2. Check CNAME points to blacktide.xyz
3. Disable Cloudflare proxy (gray cloud, not orange)

Logo Not Displaying

Solution:

• Ensure file size <2 MB
• Use supported formats (PNG, SVG, JPG)
• Check file permissions (publicly accessible)
• Clear browser cache

Next Steps

• Components: Add services to status page
• Subscriptions: Email notifications
• Status Pages Overview: Full guide