Status
Discrete semantic state in charts - success, warning, error, info, neutral.
Status is the scheme for charts that encode state, not quantity. Five tokens with fixed semantics: success, warning, error, info, neutral. The rule is simple: if green in your chart means "good", you need Status - not Categorical. Mixing them produces ambiguous reading.
Tokens
| Amostra | Token | Primitivo | Significado |
|---|---|---|---|
| --color-chart-status-success | emerald-600 | Sucesso, OK, alvo atingido | |
| --color-chart-status-warning | amber-500 | Atenção, próximo do limite | |
| --color-chart-status-error | red-600 | Falha, fora do SLA | |
| --color-chart-status-info | sky-600 | Informação neutra, em andamento | |
| --color-chart-status-neutral | neutral-500 | Inativo, sem dado |
When to use
- System health dashboards - services OK / degraded / down.
- Traffic-light tiles - KPIs with a traffic light (NPS bands, SLA bands).
- Bar charts with performance semantics (above target, on target, below).
- Alert overlays - warning/critical bands on line charts.
Why it differs from the UI semantic Status
The chart status tokens live in the chart layer, not in the
UI semantics (--destructive, etc). The reason: dataviz needs
higher contrast for legibility in small areas (thin lines, pie
slices), and the chart-specific hues are slightly different from
the ones used in component chrome.
| Chart token | UI semantic equivalent | Difference |
|---|---|---|
chart-status-success | accent (green) | Chart uses emerald-600, UI varies per theme |
chart-status-error | destructive | Chart is canonical red-600, --destructive varies |
chart-status-warning | (none) | UI semantics have no explicit warning |
When not to use
For purely categorical charts (regions, products), use Categorical. Applying green or red to categories with no semantics pollutes the reading - the user will infer "good/bad" where there is none.
Anti-patterns
Using Status for continuous gradation. The five tokens are discrete - hard boundaries between states. For gradation, use Sequential or Divergent.
Color alone is never the only channel. For charts using Status, always pair it with a label, icon or hatch pattern - the roughly 8% of the population with color vision deficiency depends on it.
Usage example
const statusToken = (severity: 'ok' | 'warning' | 'error' | 'info') =>
({
ok: 'var(--color-chart-status-success)',
warning: 'var(--color-chart-status-warning)',
error: 'var(--color-chart-status-error)',
info: 'var(--color-chart-status-info)',
})[severity];
<div className="grid grid-cols-3 gap-4">
{services.map((s) => (
<div
key={s.id}
className="rounded-lg p-4"
style={{ borderLeft: `4px solid ${statusToken(s.status)}` }}
>
<span aria-hidden>{statusIcon[s.status]}</span>
<h3>{s.name}</h3>
<p>{s.statusLabel}</p>
</div>
))}
</div>;