Tag
A pill with no border that marks a status, a category or an id. Dark is black with yellow type; light is newsprint with black type; white is for newsprint and color backgrounds; accent is magenta, for the one thing that’s new.
White
On newsprint or any color, use the white tag (.sys-tag--white) so it stands off the background. A light tag inside a newsprint panel (table, card) or a notification turns white on its own.
Accent
The accent tag (.sys-tag--accent) is magenta with white type. It marks what’s new or featured, and it’s the loudest tag, so use one per group and never for status.
Sizes
Small (24px) is the default. Medium (.sys-tag--md, 32px) is the height of a small content switcher, for a tag in a row with one.
Use for one short status, category or id: New, Vol. 1, Case Study #5487, SVG.
Use as a button or for sentences. A tag never takes a click.
Status levels
When a page needs more than one level of status, step down in weight instead of adding colors: Critical is the dark tag, Warning a pill outline, Working the light tag.
Parts
| Variant | Class | Look |
|---|---|---|
| Dark | .sys-tag | Black pill, yellow caps |
| Light | .sys-tag--light | Newsprint pill, black caps; white inside a newsprint panel (table, card) |
| White | .sys-tag--white | White pill, black caps; on newsprint or a color |
| Accent | .sys-tag--accent | Magenta pill (--accent), white caps; works on white, newsprint and black |
| Warning | .sys-tag--outline | Thin black outline, black caps |
| Small | default | 24px tall, 12px type |
| Medium | .sys-tag--md | 32px tall, 13px type |
Stipulations
- Tags are pills. Only tags and the toggle are rounded; everything else stays square, so a tag can never be mistaken for a button.
- No border on dark, light or white tags. The Warning outline is the one exception.
- Light on white, white on anything else. On a white page use the light tag; on newsprint or a color use the white tag, so the tag always shows against what’s behind it. Dark works on any light background.
- One accent at a time. The accent tag follows the one-highlight rule: at most one per card or row, for New or Featured. It never marks a status, so it can’t compete with Critical.
- Critical is always the dark tag: black, yellow type. Magenta type on black or a magenta block were tried and dropped.
- The count of missing items next to a chart (“2 not recorded”) uses the dark tag too, because it’s part of the critical alert.
- A critical tag in a notification sits inside the inline notification container (yellow rule on pale yellow).
- Small everywhere by default; medium only beside a small content switcher or another 32px control.
.sys-tag--plainis the 2.x name for the light tag and still works.