Prometheus Design System

Header

Fixed global top bar. Hosts the brand mark, primary nav buttons, and utility ActionIcons (theme toggle, settings, docs).

DO

Keep the header background constant across themes — it is a brand anchor.

DON'T

Add additional nav buttons to the header; route secondary navigation through the Dropdown Menu.

Design

default

Prometheus
●●

Slate fill in both themes. 56px tall, full viewport width.

Component reference (screenshots)
/query
/query light
/alerts
/alerts light
/targets
/targets light
/rules
/rules light
/service-discovery
/service-discovery light
/status
/status light
/tsdb-status
/tsdb-status light
/flags
/flags light
/config
/config light
/alertmanager-discovery
/alertmanager-discovery light

Placeholder screenshots — the audited app is live at prometheus-e83j.onrender.com.

Implementation

<header class="prom-header">
  <a class="brand" href="/">Prometheus</a>
  <nav class="primary-nav">…</nav>
  <div class="tools"><ActionIcon aria-label="Theme" /></div>
</header>

Layout

PropertyValue
height56px header-height
backgroundrgb(65,73,81) nav-slate
padding0
positionsticky top

Accessibility

ARIAWrap in <header role='banner'>. Each utility ActionIcon has aria-label.
KeyboardTab cycles brand → nav buttons → utility icons. No custom keyboard trap.
ContrastInverted text on slate passes WCAG AA at 14px.