Reserve status colors

Status hues only mean state, always with icon and label, never a series.

From dataviz (references/palette.md, references/color-formula.md).

Find the outages

Select every Down service, then press Check.

Dot onlyBad
    Icon + label + colorGood
      <span class="status" data-status="critical">
  <svg class="status-icon" aria-hidden="true">…</svg>
  Down
</span>

      A series that looks alarming

      Move the alert and compare SA-East in both charts.

      Status hue as a seriesBad
      series-4: var(--status-warning)
      Labeled statusGood
      series-4: var(--series-4)
      --series-1: #2a78d6; --series-2: #eb6834; --series-3: #1baf7a; --series-4: #eda100;
--status-good: #0ca30c; --status-warning: #fab219;
--status-serious: #ec835a; --status-critical: #d03b3b;

      Same steps on both surfaces

      Check Color only and watch warning fade on light.

      Light surfaceLight
        Dark surfaceDark

          Why it matters, pros and cons

          Why it matters

          Warning vs yellow and critical vs red measure ΔE 4.8, too close for hue alone. The icon and word carry the state.

          Pros

          • Readable under any color-vision deficiency.
          • An orange bar never reads as an alert.
          • Four fixed hexes, both themes.

          Cons

          • Icon plus label costs width in dense tables.
          • Pass/fail series should wear status, not categorical.
          • Four steps only; a fifth severity is a label.