Prometheus Design System v0.2.0 — WIP

Prometheus Design System

A design system proposal for the Prometheus monitoring UI.

Work in Progress — Early Draft
This is a very early version of a design system proposal for the Prometheus UI. It is actively being worked on and not yet ready for review. Feedback is welcome, but nobody is expected to give feedback at this stage.

Every token, component, and pattern here was derived from the actual Prometheus codebase — not invented from scratch. The system documents what already exists in the Mantine 8 + React 19 + TypeScript web UI and resolves inconsistencies where the same pattern was implemented differently across pages.

Explore

Design Tokens

Color, typography, spacing, and elevation values derived from the codebase.

Foundations

Icon Inventory

Tabler icons used across the Prometheus UI with usage context.

Foundations

Components

19 components extracted from the Prometheus UI, with Figma plugin.

Components

UI Patterns

Recurring layout and interaction patterns across Prometheus pages.

Patterns

Action Items

Concrete tasks and PRs to bring the UI into compliance.

Roadmap

Acknowledgements

Created by AndrejKiri by auditing and extracting patterns from the Prometheus web UI. Feedback and suggestions are very much appreciated — please open an issue!

The components, tokens, and patterns documented here are derived from the prometheus/prometheus web UI. Credit and thanks to the Prometheus UI contributors whose work makes this possible: