15.06Component
Status & signal.
Color never appears alone. Every status surface is a tonal background + saturated text + a literal word.
StatusBadge tones
WonAwaiting evidenceLostReviewingDraftArchived
OrderStatusBadge · semantic mapping
PlacedPaidAt supplierShippedDeliveredDelayedRefundedCancelled
- recipe
- rounded-full · px-2 py-0.5 · 12px medium · tabular-nums
- tonal pair
- bg signal-*-bg · text signal-*
- never
- solid-on-solid fill (signal-red bg + white text)
- always
- paired with a literal status word