Design Tokens

Color, typography, spacing, motion, and elevation tokens derived from the Prometheus codebase.

Health Status Colors

The five-state health color system. Each state has light and dark mode variants for both badge backgrounds/text and panel borders.

Badge Colors — Light Mode

Badge Colors — Dark Mode

Panel Border Colors (Light / Dark)

Live Badge Examples

Brand & Surface Colors

Codebox Background Scale

A 10-step gray scale registered as a custom Mantine color:

PromQL Syntax Colors

Token	Light	Dark	Light	Dark
keyword / function	#008080	#14bfad
labelName	#800000	#ff8585
string	#a31515	#fca5a5
number / duration	#09885a	#22c55e

Typography

Token	Value	Usage
fontFamilies.body	System UI stack	All body text, headings, UI elements
fontFamilies.mono	"DejaVu Sans Mono", monospace fallback	PromQL, code, metric values, config YAML
fontFamilies.completionTooltip	"Open Sans", "Lucida Sans Unicode"	CodeMirror autocomplete tooltip

Font Sizes (Mantine scale)

Token	CSS Variable	Default
xs	--mantine-font-size-xs	12px
sm	--mantine-font-size-sm	14px
md	--mantine-font-size-md	16px
lg	--mantine-font-size-lg	18px
xl	--mantine-font-size-xl	20px

Font Weights

Token	Value	Usage
regular	400	Body text
medium	500	Emphasis, empty states
semibold	600	Card titles, table headers
bold	700	Page headings

Line Heights

Token	Value
tight	1.25
normal	1.5
relaxed	1.75

Text Styles

Register these as Figma text styles with the naming convention shown below.

Figma Text Style Name	Font Family	Size	Weight	Line Height	Usage
heading/page	System UI	20px (xl)	700 (bold)	1.25	Page titles (h1)
heading/section	System UI	18px (lg)	600 (semibold)	1.25	Section headings (h2)
heading/card	System UI	16px (md)	600 (semibold)	1.25	Card titles, panel headers
body/default	System UI	14px (sm)	400 (regular)	1.5	Default body text
body/emphasis	System UI	14px (sm)	500 (medium)	1.5	Empty-state messages, emphasis text
body/small	System UI	12px (xs)	400 (regular)	1.5	Secondary text, table cells, descriptions
label/badge	System UI	11px	600 (semibold)	1.25	Status badges, label badges
label/section	System UI	11px	700 (bold)	1.25	Section labels (uppercase + letter-spacing 0.08em)
label/nav	System UI	13px	500 (medium)	1.5	Nav links, active state is 500 weight
code/default	DejaVu Sans Mono	13px	400 (regular)	1.6	Code blocks, inline code
code/metric	DejaVu Sans Mono	13px	500 (medium)	1.5	Metric names in SeriesName
code/label	DejaVu Sans Mono	11px	400 (regular)	1.5	Label badge text, key-value pairs
stats/badge	System UI	11px	600 (semibold)	1.25	Stats badges (e.g., "3 / 3 active")

Spacing

Uses Mantine's default spacing scale. No custom overrides.

Semantic Spacing

Token	Value	Usage
headerLogoNavGap	xl (32px)	Gap between logo and navigation
headerNavLinksGap	sm (12px)	Gap between nav links
logoGroupGap	xs (8px)	Gap inside logo group
mainPadding	md (16px)	AppShell main area padding
cardPadding	md (16px)	Card / InfoCard padding
infoPageMaxWidth	1000px	Max width of info pages
pageSectionGap	lg (20px)	Gap between page sections
filterToolbarGap	sm (12px)	Gap in filter toolbar
healthPanelBorderWidth	5px	Health panel left border
actionIconSize	32px	Standard action icon size

Border Radius

Token	CSS Variable	Usage
default	--mantine-radius-default (4px)	Default component radius
sm	--mantine-radius-sm	Nav links, small elements
md	--mantine-radius-md	Medium elements
lg	--mantine-radius-lg	Large containers
xl	--mantine-radius-xl	Rounded containers
pill	calc(62.5rem * var(--mantine-scale))	Status badges, label badges

Elevation / Shadows

Mantine shadow scale with light and dark mode values. Shadows are softer in dark mode using higher opacity.

Token	Light Value	Dark Value	Usage
none	none	none	Inline code blocks, rule definition cards
xs	0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)	0 1px 3px rgba(0,0,0,0.2), 0 1px 2px rgba(0,0,0,0.25)	InfoCard, AlertsPage card, RulesPage card
sm	0 1px 3px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.06)	0 1px 3px rgba(0,0,0,0.3), 0 2px 6px rgba(0,0,0,0.2)	Light elevated surfaces
md	0 2px 8px rgba(0,0,0,0.09), 0 4px 12px rgba(0,0,0,0.07)	0 2px 8px rgba(0,0,0,0.35), 0 4px 12px rgba(0,0,0,0.25)	Popovers, menus, notifications, SettingsPanel
lg	0 4px 16px rgba(0,0,0,0.1), 0 8px 24px rgba(0,0,0,0.08)	0 4px 16px rgba(0,0,0,0.4), 0 8px 24px rgba(0,0,0,0.3)	Modals, heavy overlays
xl	0 8px 32px rgba(0,0,0,0.12), 0 16px 48px rgba(0,0,0,0.1)	0 8px 32px rgba(0,0,0,0.5), 0 16px 48px rgba(0,0,0,0.35)	Maximum elevation

Border Tokens

Token	Light Value	Dark Value	Usage
border-default	1px solid #dee2e6	1px solid #373a40	Card borders, table borders, inputs
border-light	1px solid #e9ecef	1px solid #2c2e33	Subtle dividers, table cell borders
border-heavy	2px solid #dee2e6	2px solid #373a40	Table header bottom borders
health-panel-border	5px solid <status-color>		HealthPanel left accent border

Elevation Usage Map

Component	Elevation Token
InfoCard	xs
HealthPanel	none (border-only)
CodeBlock	none
SettingsPanel	md
Dropdown / Popover	md
Modal	lg
Notification	md

Motion / Transitions

Token	Value	CSS Shorthand	Usage
hoverReveal	100ms ease-in-out	opacity 100ms ease-in-out	Inline control reveal on hover
accordionChevron	200ms ease	transform 200ms ease	Accordion chevron rotation
backgroundTransition	150ms ease	background-color 150ms ease	Accordion item bg change
interactiveHover	100ms ease	all 100ms ease	General hover state changes
dataTransition	200ms ease	—	Loading state changes

Breakpoints

Token	Value	Pixels	Usage
xs	36em	576px	Action icons visibility threshold
sm	48em	768px	Nav collapse, burger visibility
md	62em	992px	Logo text visibility
lg	75em	1200px	—
xl	88em	1408px	—

Responsive Patterns

Pattern	Breakpoint	Behavior
Navbar collapse	sm (768px)	Below sm: drawer mode. Above sm: inline
Navbar width	—	300px (mobile drawer)
Logo text	md (992px)	Hidden below md
Action icons	xs (576px)	Hidden below xs
Burger menu	sm (768px)	Hidden above sm

CSS Variable Reference

All --prom-* CSS custom properties proposed by this design system:

Variable	Value
--prom-brand-orange	#e6522c
--prom-header-bg	rgb(65, 73, 81)
--prom-header-text	#ffffff
--prom-header-height	56px
--prom-nav-link-color	gray-0
--prom-nav-link-hover-bg	gray-6
--prom-nav-link-active-bg	primary-color-filled
--prom-nav-link-active-color	#ffffff
--prom-nav-link-radius	radius-sm
--prom-badge-ok-bg	light-dark(green-1, green-9)
--prom-badge-ok-color	light-dark(green-9, green-1)
--prom-badge-err-bg	light-dark(red-1, darken(red-9))
--prom-badge-err-color	light-dark(red-9, red-1)
--prom-badge-warn-bg	light-dark(yellow-1, yellow-9)
--prom-badge-warn-color	light-dark(yellow-9, yellow-1)
--prom-badge-info-bg	light-dark(blue-1, blue-9)
--prom-badge-info-color	light-dark(blue-9, blue-1)
--prom-badge-unknown-bg	light-dark(gray-2, gray-7)
--prom-badge-unknown-color	light-dark(gray-7, gray-4)
--prom-badge-stats-bg	light-dark(gray-1, gray-8)
--prom-badge-stats-color	light-dark(gray-7, gray-5)
--prom-label-badge-bg	light-dark(gray-1, gray-8)
--prom-panel-border-width	5px
--prom-panel-border-ok	light-dark(green-3, green-8)
--prom-panel-border-err	light-dark(red-3, red-9)
--prom-panel-border-warn	light-dark(orange-3, yellow-9)
--prom-panel-border-info	light-dark(blue-3, blue-8)
--prom-panel-border-unknown	light-dark(gray-3, gray-6)
--prom-font-mono	"DejaVu Sans Mono", monospace stack
--prom-logo-font-size	1.25rem
--prom-info-page-max-width	1000px
--prom-card-bg	light-dark(white, dark-6)
--prom-accordion-item-bg	light-dark(gray-0, dark-5)
--prom-codebox-bg	light-dark(gray-1, gray-9)
--prom-promql-keyword	light-dark(#008080, #14bfad)
--prom-promql-label-name	light-dark(#800000, #ff8585)
--prom-promql-string	light-dark(#a31515, #fca5a5)
--prom-promql-number	light-dark(#09885a, #22c55e)
--prom-transition-hover-reveal	opacity 100ms ease-in-out
--prom-transition-bg	background-color 150ms ease
--prom-transition-chevron	transform 200ms ease
--prom-transition-interactive	100ms ease