Tags
functional colour · compactCompact labels keyed to functional colour. A tag states a status or a category; it is never decoration.
Functional tones
Primary
Success
Warning
Error
Info
Neutral
In context
| Environment | Host | Status |
|---|---|---|
| Production | app.internal | Active |
| Staging | staging.internal | Active |
| Test | test.internal | Paused |
| Legacy | old.internal | Failed |
Rules
Colour is functional, not decorative. Green means healthy, red means failed, amber means held. A tag whose colour carries no meaning should be neutral.
The word carries the meaning. tag--error still reads “Failed”. Colour is the second signal, never the only one.
Compact control radius. Tags use --compact-control-radius so they read as labels rather than buttons.
Avoid decorative status badges. If a row already states its state in text, do not add a tag beside it.