Tags
Tags are pill-shaped labels used to categorize content by topic, subject, or keyword. Unlike Badges — which communicate transient state such as success, warning, or error — Tags represent stable attributes of a piece of content. A tinnitus article tagged “CBT” and “Sleep” carries those topics indefinitely; a badge reading “Completed” describes the state of a single user action. The two components exist for fundamentally different semantic purposes, and should not be interchanged.
The pill shape (full border-radius, 9999px) signals approachability and grouping, consistent with the calm, non-clinical brand direction. The pale-wheat background is deliberately low-contrast against the warm-white surface — Tags should annotate without dominating.
Token source: tokens/component/tag.json
Specifications
Section titled “Specifications”| Property | Token | Resolved value |
|---|---|---|
| Font size | component.tag.font-size → primitive.font-size.13 | 13px |
| Font weight | component.tag.font-weight → primitive.font-weight.regular | 400 |
| Border radius | component.tag.border-radius → primitive.radius.full | 9999px |
| Padding Y | component.tag.padding-y → primitive.spacing.4 | 4px |
| Padding X | component.tag.padding-x → primitive.spacing.12 | 12px |
| Background | component.tag.background → semantic.color.tag.background → primitive.color.pale-wheat | #F5EFE8 |
| Text | component.tag.text → semantic.color.tag.text → primitive.color.warm-dark | #3D2E2A |
Showcase
Section titled “Showcase”Single tag
Tag group
In context — research article card
Cognitive behavioural therapy for tinnitus: a systematic review of outcomes
A meta-analysis of 18 randomised controlled trials examining the efficacy of CBT-based interventions on tinnitus distress, sleep quality, and habituation rates over 12-month follow-up periods.
Usage Guidelines
Section titled “Usage Guidelines”Tags are for categorization, not status. When content needs a label describing what it is about — a topic, therapy type, or subject area — use a Tag. When content needs a label describing what has happened to it — a session completed, an action pending, a validation failing — use a Badge.
Tag text should be short: one to three words. The 13px regular-weight type is comfortable at short lengths but becomes hard to scan in longer strings. Avoid using Tags for sentences or descriptive phrases.
In grouped contexts, Tags work well in flex-wrapped rows with 8px gaps. There is no hard limit on group size, but more than six or seven tags in a single group starts to fragment the reading experience. If a piece of content carries many tags, consider whether all of them need to surface in the UI at once.
Tags are read-only. They are not interactive filters or toggles. If you need a tappable tag for filtering or selection, build a separate chip or filter component with appropriate interactive states.
Tag vs Badge — quick reference
Section titled “Tag vs Badge — quick reference”| Tag | Badge | |
|---|---|---|
| Purpose | Categorization | Status |
| Examples | ”CBT”, “Sleep”, “Research" | "Completed”, “Warning”, “Missed” |
| Shape | Pill (full radius) | Rounded rect (4px radius) |
| Weight | Regular (400) | Semibold (600) |
| Colors | Single warm neutral | Variant-specific (success/warning/error/neutral) |
| Persistence | Stable attribute of content | Transient state |
WordPress integration
Section titled “WordPress integration”The WordPress theme uses these same tokens for its TagPill and TagStrip components. The WP showcase (TagPillShowcase.astro) previously referenced semantic.color.tag.* directly; component-tier references now map through component.tag.*, which resolves to the same underlying primitive values. Visual output is identical.