Prometheus Design System

Migration Guide

A suggested order for rolling these changes into the Prometheus web UI. Each phase is independently shippable.

Phase 1. Tokenization

4 action item(s). Start here before moving to the next phase.

  1. AI-006 — Stabilize highlight.js role-to-color across themes easy
  2. AI-008 — Define --font-family-mono and apply everywhere easy
  3. AI-012 — Tokenize hardcoded spacing in page layouts medium
  4. AI-018 — Introduce --doc-status-warn for pending states easy

Phase 2. Component unification

7 action item(s). Start here before moving to the next phase.

  1. AI-001 — Drop duplicate body on empty-state Alerts easy
  2. AI-003 — Replace bare <code> with Label Badge on /tsdb-status and /flags medium
  3. AI-005 — Unify Card title treatment — always icon + text easy
  4. AI-007 — Parameterize empty-state copy per rule type easy
  5. AI-009 — Fix Stats Badge uppercase mismatch easy
  6. AI-013 — Responsive review — header collapses below 768px medium
  7. AI-014 — Deprecate Card Title without Icon easy

Phase 3. Accessibility

6 action item(s). Start here before moving to the next phase.

  1. AI-002 — Promote Health Status Badge to every boolean-state field medium
  2. AI-004 — Make every Table sortable by default medium
  3. AI-010 — Add Copy Button to the Flags table easy
  4. AI-011 — Add focus-visible outline to Icon Buttons in the header easy
  5. AI-015 — Add aria-sort to Sortable Table headers easy
  6. AI-016 — Add :hover underline to Link component easy

After the migration