Tokens

All design tokens extracted from the Prometheus v3 web UI.

Brand

brand-blue

rgb(34,139,230)

Primary action — Execute button fill, active nav button, tab underline, link color, focus ring, info-Alert icon/title. Mantine blue.6.

nav-slate

rgb(65,73,81)

Top header background — fixed across both themes. The product-brand anchor that keeps the global chrome visually stable when toggling theme.

Status

ok · light

ok · dark

error

error · light

error · dark

info

info · light

info · dark

Surface

page-bg

rgb(255,255,255)

dark: rgb(36,36,36)

card-bg

rgb(255,255,255)

dark: rgb(36,36,36)

input-bg

rgb(255,255,255)

dark: rgb(46,46,46)

code-block-bg

transparent

dark: rgb(31,31,31)

badge-bg

rgb(241,243,245)

dark: rgb(52,58,64)

header-bg

rgb(65,73,81)

dark: rgb(65,73,81)

icon-button-bg

rgb(134,142,150)

dark: rgb(134,142,150)

Text

primary

rgb(0,0,0)

dark: rgb(201,201,201)

secondary

rgb(73,80,87)

dark: rgb(173,181,189)

muted

rgb(134,142,150)

dark: rgb(134,142,150)

inverted

rgb(255,255,255)

dark: rgb(255,255,255)

link

rgb(34,139,230)

dark: rgb(34,139,230)

Border

card

rgb(222,226,230)

dark: rgb(66,66,66)

input

rgb(206,212,218)

dark: rgb(66,66,66)

accordion-ok-left

rgb(140,233,154)

dark: rgb(47,158,68)

accordion-error-left

rgb(255,168,168)

dark: rgb(201,42,42)

Spacing

4px

8px

12px

16px

24px

2xl

32px

Layout semantics

Token	Value
`header-height`	56px
`control-height`	36px
`icon-button-size`	32px
`card-padding`	16px
`alert-padding`	16px
`table-cell-padding-y`	7px
`table-cell-padding-x`	10px
`badge-padding-x`	10px
`tab-padding-y`	10px
`tab-padding-x`	16px
`primary-button-padding-x`	18px
`accordion-left-border-width`	5px

Typography

Families

body-sans — -apple-system, system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'
All UI chrome — body text, buttons, labels, table cells, badge text. The Mantine default system stack.

mono — ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace
Code blocks, inline code, label/flag identifiers. Canonical stack — replaces the bare 'monospace' keyword found on /config and /flags (INC-008).

Styles

The quick brown fox

heading/page

24px · 700 · lh 1.3

The quick brown fox

heading/card-title

18px · 600 · lh 1.4

The quick brown fox

heading/section

16px · 600 · lh 1.4

The quick brown fox

body/default

14px · 400 · lh 1.55

The quick brown fox

body/strong

14px · 700 · lh 1.55

The quick brown fox

label/button-primary

14px · 600 · lh 1.0

The quick brown fox

label/button-secondary

14px · 500 · lh 1.0

The quick brown fox

label/badge

11px · 700 · lh 1.0

The quick brown fox

code/block

16px · 400 · lh 1.5

The quick brown fox

code/inline

14px · 400 · lh 1.4

Border radius

none

0px

4px

pill

1000px

Elevation

card
0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.10)

Breakpoints

Token	Min width
`mobile`	480px
`tablet`	768px
`desktop`	1200px
`wide`	1600px

Motion

Durations

Token	Value
`fast`	100ms
`base`	200ms
`slow`	300ms

Easings

Token	Curve
`ease-in-out`	`cubic-bezier(0.4, 0, 0.2, 1)`
`ease-out`	`cubic-bezier(0, 0, 0.2, 1)`

CSS custom properties

Copy these into your stylesheet. All tokens are prefixed with --doc-.

Variable	Value	Usage
`--doc-brand-blue`	`rgb(34,139,230)`	Primary action — Execute button fill, active nav button, tab underline, link color, focus ring, info-Alert icon/title. Mantine blue.6.
`--doc-nav-slate`	`rgb(65,73,81)`	Top header background — fixed across both themes. The product-brand anchor that keeps the global chrome visually stable when toggling theme.
`--doc-status-ok-bg`	`rgb(211,249,216)`	status bg (light)
`--doc-status-ok-text`	`rgb(43,138,62)`	status text (light)
`--doc-status-error-bg`	`rgb(255,236,236)`	status bg (light)
`--doc-status-error-text`	`rgb(201,42,42)`	status text (light)
`--doc-status-info-bg`	`rgba(34,139,230,0.10)`	status bg (light)
`--doc-status-info-text`	`rgb(34,139,230)`	status text (light)
`--doc-surface-page-bg`	`rgb(255,255,255)`	surface (light)
`--doc-surface-card-bg`	`rgb(255,255,255)`	surface (light)
`--doc-surface-input-bg`	`rgb(255,255,255)`	surface (light)
`--doc-surface-code-block-bg`	`transparent`	surface (light)
`--doc-surface-badge-bg`	`rgb(241,243,245)`	surface (light)
`--doc-surface-header-bg`	`rgb(65,73,81)`	surface (light)
`--doc-surface-icon-button-bg`	`rgb(134,142,150)`	surface (light)
`--doc-text-primary`	`rgb(0,0,0)`	text (light)
`--doc-text-secondary`	`rgb(73,80,87)`	text (light)
`--doc-text-muted`	`rgb(134,142,150)`	text (light)
`--doc-text-inverted`	`rgb(255,255,255)`	text (light)
`--doc-text-link`	`rgb(34,139,230)`	text (light)
`--doc-border-card`	`rgb(222,226,230)`	border (light)
`--doc-border-input`	`rgb(206,212,218)`	border (light)
`--doc-border-accordion-ok-left`	`rgb(140,233,154)`	border (light)
`--doc-border-accordion-error-left`	`rgb(255,168,168)`	border (light)
`--doc-spacing-xs`	`4px`	spacing scale
`--doc-spacing-sm`	`8px`	spacing scale
`--doc-spacing-md`	`12px`	spacing scale
`--doc-spacing-lg`	`16px`	spacing scale
`--doc-spacing-xl`	`24px`	spacing scale
`--doc-spacing-2xl`	`32px`	spacing scale
`--doc-layout-header-height`	`56px`	layout
`--doc-layout-control-height`	`36px`	layout
`--doc-layout-icon-button-size`	`32px`	layout
`--doc-layout-card-padding`	`16px`	layout
`--doc-layout-alert-padding`	`16px`	layout
`--doc-layout-table-cell-padding-y`	`7px`	layout
`--doc-layout-table-cell-padding-x`	`10px`	layout
`--doc-layout-badge-padding-x`	`10px`	layout
`--doc-layout-tab-padding-y`	`10px`	layout
`--doc-layout-tab-padding-x`	`16px`	layout
`--doc-layout-primary-button-padding-x`	`18px`	layout
`--doc-layout-accordion-left-border-width`	`5px`	layout
`--doc-radius-none`	`0px`	border radius
`--doc-radius-sm`	`4px`	border radius
`--doc-radius-pill`	`1000px`	border radius
`--doc-shadow-card`	`0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.10)`	elevation

Domain lexicon

Term	Definition	UI surface
PromQL	Prometheus Query Language — the expression language entered in the /query editor.	`/query expression input`
Scrape pool	A logical grouping of scrape targets sharing the same job/discovery configuration. Drives the accordion grouping on /targets and /service-discovery.	`/targets, /service-discovery (accordion items)`
Target	A single endpoint Prometheus scrapes for metrics. Each renders one row inside its scrape-pool accordion.	`/targets accordion rows`
UP / DOWN	Boolean health of a target's last scrape. UP renders as the ok status pill, DOWN renders as the error status pill.	`/targets Health Status Badge`
Alerting rule	A rule that emits an alert when its PromQL expression matches. Listed on /alerts.	`/alerts`
Recording rule	A rule that pre-computes a PromQL expression and stores the result as a new series. Listed on /rules.	`/rules`
Label	Key=value pair attached to a metric or target. Should always render in the Label Badge component.	`/targets, /service-discovery, /tsdb-status`
Relabeling	Server-side label rewriting at scrape time. Disclosed via the 'show relabeling' link inside a /service-discovery panel.	`/service-discovery`
TSDB	Time-series database — the storage layer. /tsdb-status surfaces head-block health and Top-N label statistics.	`/tsdb-status`
Alertmanager	External component that receives alerts from Prometheus. Discovery state shown on /alertmanager-discovery.	`/alertmanager-discovery`

Known gaps

placeholder-screenshot — Cowork sandbox blocked screenshot export — all 24 files in screenshots/ are 1×1 placeholder JPEGs. Live URLs in component pages compensate.
inferred-value — breakpoints — No responsive breakpoints observed in audit-results.json — values are Mantine v7 defaults (theme.breakpoints) and inferred to keep the design system complete.
inferred-value — motion — No transition durations observed during the static audit. Values are Mantine v7 defaults — use as guidance, not contract.
inferred-value — elevation.card.dark — audit-results.json reports the light boxShadow only. Dark variant darkens the alpha to remain visible against rgb(36,36,36) — derived, not measured.