Component specDesign target · the shipped badge is still a plain button

The badge

A small pill that sits inside someone else's blog. Neutral by default, themable with one accent colour and light or dark. Every state below is the same component with different props. The badge.js that ships today has this behaviour with a plain button; this look is the next step.

Try it Tab to focus · Space/Enter toggles · ← → seek 10 s

States

Each panel: desktop (40 px) then touch (44 px, voice label hidden below 480 px viewport).

Anatomy and measurements

Keyboard and ARIA

Design tokens

Defined as CSS variables in tokens.css for [data-theme="day"] and [data-theme="night"], with prefers-color-scheme as the default.

Colour
Type scale
DisplayNewsreader 600 · 42–86 · lh .96
SectionNewsreader 600 · 36–64 · lh 1
Article bodyNewsreader 400 · 19 · lh 1.6
InterfaceGeist 400–600 · 13–17
LABEL · CODEGeist Mono 400–600 · 10.5–13.5
Spacing
Radii
2 · blocks
8 · terminal
999 · pill
50% · button