Prometheus Design System

Inline Code

Bare <code> inside table cells on /tsdb-status and /flags. Currently browser-default monospace with no bg/padding/border. Should migrate to a Label Badge or adopt the canonical mono stack from INC-008.

DO

Bind to the canonical --font-family-mono stack — fixes INC-008 on every page at once.

DON'T

Use bare <code> for label-like identifiers — use Label Badge instead (INC-003).

Design

default

__name__

Unstyled <code> — monospace text, no surrounding chrome.

Component reference (screenshots)
/tsdb-status
/tsdb-status light
/flags
/flags light

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

Implementation

<code className="inline-code">{name}</code>

Layout

PropertyValue
font-familyvar(--font-family-mono) mono
font-size14px code/inline

Accessibility

Related inconsistencies