Dark mode status badges

Presence and incident labels as pills: a dot plus label pattern so color is not the only cue (copy reinforces state).

Operational Degraded Incident Offline

Widely Supported

colorno-js

Quick implementation

.dmsbad {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.28rem 0.55rem;
  border-radius: 999px;
  border: 1px solid transparent;
}
.dmsbad--ok { background: oklch(0.22 0.05 155); border-color: oklch(0.55 0.12 155 / 0.45); }

Prompt this to your LLM

Status page mapping and i18n.

You are building status badges for a dark-themed ops console.

Goal: Pill per state with leading dot + text; green / amber / red / gray ramps in oklch.

Technical constraints:
- Text must name the state (not color alone).
- Dots use nested span with aria-hidden; parent carries readable text.

Return HTML + CSS.

Why this matters in 2026

Uptime rows and team directories repeat these chips hundreds of times — tokenized ramps keep them legible without neon overload.

The logic

Chroma peaks on the dot; the pill fill stays low-chroma so rows stay calm.

Accessibility & performance

Pair with aria-label on parent rows when the badge is the only status indicator in a table cell.