Feedback

Alert

Inline banner in the four semantic tones; risk messages are always red.

.alert · .alert--info · .alert--success · .alert--warning · .alert--danger

<div class="grid" style="gap:var(--space-3)">
  <div class="alert alert--info">Scheduled maintenance window: Sunday 02:00–04:00 SGT.</div>
  <div class="alert alert--success">Settlement file processed.</div>
  <div class="alert alert--warning">Certificate expires in 14 days.</div>
  <div class="alert alert--danger">Reconciliation breach, review required.</div>
</div>

Usage

• Any textual risk, alert, or warning message is red (--danger) so risks read instantly, amber is for at-risk metrics, not alert messages.
• Tints and text colours are role tokens; they re-tune in dark mode automatically.