The header is the part you see first and most often. It must answer "is everything normal?" in under a second.
The three numbers
| Metric | Normal | Yellow | Red |
|---|---|---|---|
| Active sessions | 1–2 (you) | 3–4 (laptop + phone + tablet) | 5+ or sessions from unknown IPs |
| Failed attempts (last hour) | 0 | 1–3 | 5+ (probable brute force) |
| Blacklisted IPs | 0 | 1–2 | 5+ (something is targeting you) |
The color encoding
Use color, but don't rely on it alone. Each badge should also have an icon (✅ ⚠️ 🚨) and the count, so colorblind / dark-mode / phone-glance scenarios all work.