Three status families — good, warn, bad. Each is a solid hue for icons and text paired with a soft -bg surface for fills. Status is never carried by hue alone: every usage below also carries a label and a glyph.
Swatches · solid hue + soft surface
--good
#46b86e · soft --good-bg #0e2b18
--warn
#ebae42 · soft --warn-bg #37290f
--bad
#ec5c52 · soft --bad-bg #3f1916
Status pills · text hue on the soft surface
VerifiedPending reviewFlagged
Interactive filter chips · hover / focus wired live
1st live · 2nd pinned :hover · 3rd pinned :focus-visible
Alert banners · glyph + label, never hue alone
✓
Rescuer approved
The intake form passed all checks and the welcome email has been sent.
!
Consent expiring soon
Data-access agreement renews in 6 days. Prompt the volunteer to re-sign.
×
Sync failed
The WhatsApp groups feed returned 401. Check the BeagleBot API token.
--good / --warn / --bad
The solid status hues (status ramp -500 in dark). Use for icons, chip text and banner accents — good #46b86e, warn #ebae42, bad #ec5c52.
--good-bg / -warn-bg / -bad-bg
The soft surfaces (status ramp -950 in dark). Fill for pills, banners and rows. Always pair a hue with its matching soft surface.
pairing rule
Text hue on its own -bg is the AA-tuned combination; chip border is the hue at 35% via color-mix. Don't mix a hue onto another status' surface.
never color alone
Convey status with a label and a glyph/dot too — color reinforces meaning, it never carries it (colour-blind & low-vision safe).