Alert

Prominent inline messages — info, success, warning, danger.

Notice: Town Hall closes at noon on the day before Thanksgiving.

Saved: Your application was received.

Heads up: Online payments are unavailable Sunday 2–4 am.

Problem: We couldn't process the payment.

Show the markup

<div class="cc-alert" role="note">
  <p><span class="cc-alert__kind">Notice:</span> Town Hall closes at noon on the day before Thanksgiving.</p>
</div>
<div class="cc-alert cc-alert--success">
  <p><span class="cc-alert__kind">Saved:</span> Your application was received.</p>
</div>
<div class="cc-alert cc-alert--warning" role="note">
  <p><span class="cc-alert__kind">Heads up:</span> Online payments are unavailable Sunday 2–4 am.</p>
</div>
<div class="cc-alert cc-alert--danger">
  <p><span class="cc-alert__kind">Problem:</span> We couldn't process the payment.</p>
</div>

Accessibility

The kind prefix ("Notice:", "Problem:") carries the severity in text — color only reinforces (1.4.1).
The danger example above carries no live role, because it is server-rendered — add role="alert" only when you inject urgent content after load; role="status" for confirmations; static notices need no live role.
All wash/text pairings meet 7:1.