Contentstable

Tag

A pill that names a topic or category, colored by register — human (terracotta), digital (teal) or neutral. Can be a link, a toggle, or removable.

Examples

Tones

Pedagogy Community TypeScript Multi-agent systems 45 min

HTML for “Tones”

<div class="mp-cluster" data-gap="2">
  <span class="mp-tag" data-tone="human">Pedagogy</span>
  <span class="mp-tag" data-tone="human">Community</span>
  <span class="mp-tag" data-tone="digital">TypeScript</span>
  <span class="mp-tag" data-tone="digital">Multi-agent systems</span>
  <span class="mp-tag">45 min</span>
</div>

Interactive

#design-tokens OKLCH

HTML for “Interactive”

<div class="mp-cluster" data-gap="2">
  <a class="mp-tag" data-tone="digital" href="#components">#design-tokens</a>
  <button class="mp-tag" type="button" data-tone="human" aria-pressed="true">Educators</button>
  <button class="mp-tag" type="button" aria-pressed="false">Developers</button>
  <span class="mp-tag" data-tone="digital">
    OKLCH
    <button class="mp-tag__remove" type="button" aria-label="Remove OKLCH">×</button>
  </span>
</div>

Guidance

Tags classify. The tone encodes the membrane metaphor: human for education, community and ethics topics; digital for tech stack and systems; neutral (default) for everything else, like durations or formats.

Tag vs. Badge: a tag is a topic (sentence case, pill, can be interactive); a badge is a status (uppercase, compact, never interactive).

Accessibility

Filter tags are <button aria-pressed>; the pressed state shows a ring, not just a color change.
The remove button needs a specific label ("Remove OKLCH"), not just "×". It's 24×24px (WCAG 2.5.8).
Tag text on its tint is gate-checked at ≥4.5:1 for every tone in both modes.

API

Tag classes
Class	Kind
`.mp-tag`	root
`.mp-tag__remove`	part of `.mp-tag`

Tag attributes
Attribute	Values
`data-tone`	`human` · `digital`

States styled: :focus-visible :hover [aria-pressed="true"]. Set the native attribute or ARIA state; there are no state classes.

Tag component tokens
Token	Default	Light · dark
`--mp-tag-bg`	`var(--color-bg-tertiary)`	`#E2DCD2` · `#2E2E34`
`--mp-tag-fg`	`var(--color-text-secondary)`	`#5C564E` · `#A39D93`

Design tokens consumed: --border-width-medium --border-width-thin --color-bg-hover --color-bg-tertiary --color-digital-bg --color-digital-text --color-human-bg --color-human-text --color-text-secondary --focus-ring --focus-ring-offset --font-sans --leading-label --radius-full --space-1 --space-2 --space-3 --text-small --text-xs --transition-fast --weight-medium

Verified contrast

The build measures each pair for the defaults and for every tone, variant and state that reassigns a token, over page and card surfaces. The ratios below are the worst case in each mode; a pair below its minimum stops the build.

Tag contrast pairs
Use	Pair	Light	Dark	Minimum
tag label	`--mp-tag-fg` on `--mp-tag-bg`	5.02	4.95	4.5

Source

README on GitHub CSS on GitHub Manifest (JSON)