Branding
Configure the status page header logo, name and accent colours.
The header brand is separate from the page's title: title identifies the
site in metadata, feeds and notifications, while branding controls what
visitors see in the header. Configure both in heyo-status.config.ts.
Logo and name
| Configuration | Header |
|---|---|
{ logo: "/logo.svg" } | Logo only. |
{ logo: "/logo.svg", name: "Acme" } | Logo and label. |
{ name: "Acme" } | Text only. |
{} | No brand element. |
Generated projects ship a replaceable mark at public/heyo.svg and set
branding: { logo: "/heyo.svg" }. Replace that file, or point logo to an
asset served by your application. The logo renders as an image, so SVG and
raster formats both work. Keep it legible at header size.
Accent colours
Both values are optional CSS colours applied as tokens to the status page. They change accents, not the semantic colours for up, degraded, down and maintenance states. Check legibility in light and dark modes when choosing brand colours.
For more control, add CSS after the bundled stylesheet in the generated
styles/status.css and use the stable data-slot selectors described in
Themes.