Branding

Make your status page match your brand

Customize every visual aspect of your status page - from logos and colors to custom CSS. The Clean Build starts with a blank canvas for your brand identity.

Clean Build Default: All branding fields start empty. You configure everything from scratch for a fully customized experience.

Customization Options

Logo

Your company logo in the header

Colors

Accent colors and theme settings

Typography

Custom fonts via CSS

Custom CSS

Full styling control

Basic Branding

Configure these settings in Admin → Settings → Appearance:

title - Status page name (e.g., "Acme Status")

logoUrl - URL to your logo image (200×50px recommended)

faviconUrl - Browser tab icon (32×32px)

accentColor - Primary color (#hex format)

Logo Guidelines

Asset	Size	Formats
Logo	200×50 px	PNG, SVG, JPEG, WebP
Favicon	32×32 or 64×64 px	ICO, PNG, SVG
Hero Image	1920×400 px (suggested)	JPEG, PNG, WebP

Use SVG for logos when possible - they scale perfectly at any resolution.

Accent Color

The accent color appears throughout your status page:

Links and interactive elements
Buttons and call-to-actions
Loading indicators and progress bars
Selected and focused states

// Set via Admin → Settings → Appearance
accentColor: "#3b82f6"  // Blue
accentColor: "#8b5cf6"  // Purple
accentColor: "#10b981"  // Green

Theme Options

Choose how users see your status page:

Light - Light background with dark text

Dark - Dark background with light text

System - Follows user device preference

Hero Section

Customize the top banner of your status page:

heroImageUrl - Background image for hero section

heroHeight - Height of the hero area

heroOverlay - Overlay color/opacity for readability

Footer

Add links and information to the footer:

footerText - Copyright or custom text

footerLinks - Array of custom links

showPoweredBy - Toggle ATStatus branding

Complete Example

{
  "title": "Acme Status",
  "logoUrl": "https://example.com/logo.svg",
  "faviconUrl": "https://example.com/favicon.png",
  "accentColor": "#3b82f6",
  "defaultTheme": "system",
  "heroImageUrl": "https://example.com/hero.jpg",
  "heroHeight": "200px",
  "footerText": "© 2024 Acme Inc.",
  "footerLinks": [
    { "label": "Support", "url": "https://support.acme.com" },
    { "label": "Privacy", "url": "https://acme.com/privacy" }
  ],
  "showPoweredBy": false
}

Related Features

Custom CSS

Advanced styling options

Multi-Language

Localize your status page

Loading Screen

Custom loading experience