Specimen Badge

Features

• Five variant rows in one committed archival voice: **catalog** (hairline frame + accession code cell), **stamps** (semantic info/success/warning/error inspection stamps), **tags** (dismissible with a working ×), **counts** (knockout ink count blocks in tabular numerals), **status** (square indicator lamps)
• Specimen geometry follows the active design system: chip corners read --badges-radius (falling back to --chips-radius) capped at half the chip's nominal height, so sharp systems stay archival-sharp while pill systems get their signature pill. The 1px ink hairline frames, dashed row separators, and square state marks are unchanged
• The archival mounting board consumes design-system card radius and light/dark elevation without rounding the specimens themselves
• Uppercase tracked monospace labels with numbered row indices in a contrast-safe, hue-preserving accent ink
• Dismissible tags carry a hard offset shadow that collapses on a springy press, then fade + scale away on remove
• Inline dashed "+ Add" button on the tags row appends a chip with a random archival label and a pop entrance
• Fixed toolbar in top-right with a reset button that rebuilds the whole matrix
• Fully respects prefers-reduced-motion

Accessibility

Remove button

Real <button aria-label="Remove …">; Enter/Space activate; focus-visible ring

Add button

Real <button aria-label="Add … badge">; keyboard operable

Reset button

<button aria-label="Reset all specimen badges"> in toolbar

Decorative marks

Stamp squares and status lamps carry aria-hidden="true"

Focus indicators

:focus-visible with contrast-safe --sp-focus-ink outline on all interactive elements

Structure and live feedback

Variant sections use hierarchical headings; add, remove, and reset actions announce through a polite live region; load failures use a visible alert

Reduced motion

prefers-reduced-motion: reduce disables all animations and transitions

Customise it with AI

Open Specimen Badge in Atheros AI Builder, pick a design system and ask the AI assistant to change the layout, copy or behaviour — the badge is regenerated against your tokens. Take the HTML, CSS, JS and React source with you, or pull it into your repo from Claude Code, Cursor or Codex over MCP.