Alerts & progress
semantic feedback statesFeedback that reports an outcome. Each alert leads with an icon, states the condition in text, then explains — colour is the third signal, never the first.
Alerts
All design tokens were derived from a single seed colour.
Every value below is available as a --brand-* variable.
Filled surfaces are in use for this theme.
Nothing was changed. Check the address and try again.
Progress
The percentage is printed beside the bar. A bar alone cannot be read precisely, and colour alone cannot report progress.
Rules
Icon, then words, then colour. The alert must still make sense in greyscale.
Errors stay next to the action. A failed save reports beneath the field that failed, not in a global banner.
Use role="alert" only for failures. Success and progress are role="status" so they are announced politely.
Never a silent poll. If something is running, it says so — with an explicit interval or a visible bar.