Tags
Tags are compact, inline labels that add quick context to headings, sentences, or list items. They carry lightweight metadata—status, category, ownership—without interrupting the reading flow, so dense views stay scannable.
Keep copy short and pair wording with color or icons only when it reinforces meaning. Place tags immediately next to the element they describe so assistive tech maintains the right reading order and readers can parse intent at a glance.
Regular
Default tags provide a neutral chip for inline annotations like “Draft”, “Beta”, or “New”. Use them to call out state, ownership, or taxonomy without overwhelming the surrounding content, and keep the label to a couple of words for rhythm.
Header H1 with tag Tagtastic
Header H2 with tag Tagtastic
Header H3 with tag Tagtastic
Header H4 with tag Tagtastic
Header H5 with tag Tagtastic
Header H6 with tag Tagtastic
A piece of text with a trailing tag Tagilicious
Accessibility: keep tag text legible at small sizes, avoid conveying meaning through color alone, and position the tag directly after the item it qualifies so screen readers present it in context.
<h1>... <span class="tag">...</span></h1>
<h2>... <span class="tag">...</span></h2>
<h3>... <span class="tag">...</span></h3>
<h4>... <span class="tag">...</span></h4>
<h5>... <span class="tag">...</span></h5>
<h6>... <span class="tag">...</span></h6>
<p>... <span class="tag">...</span></p>Colors
Rosewater Flamingo Pink Magenta Mauve Purple Red Maroon Peach Orange Salmon Yellow Lemon Green Forest Olive Teal Sky Sapphire Cyan Blue Royal Lavender Navy Chocolate Lightgray Alt Darkgray Black
Rosewater Flamingo Pink Magenta Mauve Purple Red Maroon Peach Orange Salmon Yellow Lemon Green Forest Olive Teal Sky Sapphire Cyan Blue Royal Lavender Navy Chocolate Lightgray Alt Darkgray Black
Rosewater Flamingo Pink Magenta Mauve Purple Red Maroon Peach Orange Salmon Yellow Lemon Green Forest Olive Teal Sky Sapphire Cyan Blue Royal Lavender Navy Chocolate Lightgray Alt Darkgray Black
Rosewater Flamingo Pink Magenta Mauve Purple Red Maroon Peach Orange Salmon Yellow Lemon Green Forest Olive Teal Sky Sapphire Cyan Blue Royal Lavender Navy Chocolate Lightgray Alt Darkgray Black
Rosewater Flamingo Pink Magenta Mauve Purple Red Maroon Peach Orange Salmon Yellow Lemon Green Forest Olive Teal Sky Sapphire Cyan Blue Royal Lavender Navy Chocolate Lightgray Alt Darkgray Black
Rosewater Flamingo Pink Magenta Mauve Purple Red Maroon Peach Orange Salmon Yellow Lemon Green Forest Olive Teal Sky Sapphire Cyan Blue Royal Lavender Navy Chocolate Lightgray Alt Darkgray Black
Color system: most hues come from the Catppuccin palette to keep status cues consistent; the remaining tones are legacy Nausikaa colors for backward compatibility. The text on every tag color reaches 4.5:1, also on hover. Still pair color with a clear label: not everyone can tell the colors apart.
<span class="tag red">...</span>
<span class="tag yellow">...</span>
<span class="tag blue">...</span>
<span class="tag green">...</span>
<span class="tag purple">...</span>
<span class="tag orange">...</span>E-ink: in the e-ink theme a tag has one of three looks. A regular tag is outlined. Dark colors (mauve, purple, red, maroon, teal, blue, navy, darkgray, chocolate, black, forest, royal and alt) are black with white letters; all other colors are light grey. Tags of the same look can only be told apart by their text.
Icons
Icon tags mix a glyph with a short label to signal severity, category, or state without adding another line of text. Use icons to reinforce meaning—info, warning, success—rather than as decoration, and prefer concise wording that fits on a single line.
Regular
Alt
Rosewater
Flamingo
Pink
Magenta
Mauve
Purple
Red
Maroon
Peach
Orange
Salmon
Yellow
Lemon
Green
Forest
Olive
Cyan
Sky
Teal
Sapphire
Blue
Royal
Lavender
Navy
Chocolate
Lightgray
Darkgray
Black
Accessibility: supply text alongside icons or add an accessible label when an icon stands alone; set decorative icons to aria-hidden="true" and ensure focus styles remain visible on colored tags.
<span class="tag">
<svg class="icon"></svg>
</span>Links
Linked tags turn chips into navigation or filter controls while keeping their inline footprint. Use them for category filters, related content, or contextual shortcuts where a standard link feels too small and a button would be too heavy.
Interaction: ensure linked tags keep the standard focus ring, provide enough padding for touch targets, and avoid relying solely on color to communicate purpose—combine hue with copy or an icon.
<a class="tag">...</a>Badges
Badges are tags tailored for counts and status chips—unread totals, notifications, or compact labels. Keep numbers short, abbreviate large values, and pair icons only when they clarify what the count represents.
52 7438 6 1 24 99 883
74 56 99 22 4 61 21
9998 New message 6 1 24 99 88
3 12 6 87897 45 43 4
575 3135 54 88 79 8 88
1 1 1 1 1 1 1
36 2 55 78 98 7 0
Readability: provide an aria-label that spells out what the badge counts (e.g., “2 unread messages”), and avoid squeezing long words; truncate or abbreviate so badges remain legible next to their parent link or heading.
<span class="tag badge">...</span>Labels
A tag with the class label is turned a quarter, so it reads from bottom to top. It names a block from the side, which takes far less room than a heading above it. That helps where several small blocks sit next to each other: the customer, publisher and supplier of an order, for example.
Put the label first in an element with the class with-label. The label goes on the left edge and everything else is placed next to it. Colors work as on any other tag.
<div class="with-label">
<span class="tag label">Customer</span>
<strong>Alcinous University Library</strong>
<span>Palace Road 1</span>
<span>491 00 Scheria, Greece</span>
</div>
<div class="with-label">
<span class="tag forest label">Publisher</span>
...
</div>Keep it short: text that is turned is harder to read, so use one or two words. The label comes first in the HTML, which means a screen reader reads it before the block it names.