Dark
NeutralInverseEmbargoedApprovedNoticePending review
3
Light
NeutralInverseEmbargoedApprovedNoticePending review
3
<span class="doi-tag doi-tag--success">Approved</span>
<span class="doi-badge">3</span>
<span class="doi-badge doi-badge--dot" role="status" aria-label="New"></span>Statuses
Each status pairs a background with a text color that passes AA, and each differs in shape as well as color: Neutral is outlined, Danger is outlined in red, the rest are filled. Success is Ledger Green and Warning is Safety Yellow, both with Department Black text.
| Status | Example | Use for |
|---|---|---|
| Neutral | Draft | Categories, plain metadata |
| Inverse | Classified | Emphasis without implying status |
| Danger | Embargoed | Errors, withheld, anomalous |
| Success | Approved | Approved, filed, complete |
| Info | Notice | News, neutral notices |
| Warning | Pending review | Needs attention soon |
Badges
31299+
The dot is Embargo Red and carries no text, so give it an accessible label like "New".