Countdown Pill

Sizes — sm · md · lg

Three sizes scale the value, label, and icon together. Pick sm for inline schedule rows, md for card headers, and lg when the countdown is the hero element (auction page, deadline banner).

Tones — dial urgency up or down

The consumer picks the tone — the component doesn't auto-compute urgency. neutral keeps the icon muted; every other tone matches the icon to the value color so the icon, label, and value read as a single urgency unit.

Hero countdown — full-card focus

At size="lg" the label uses t-overline and the value reaches 36px — enough to anchor a card or banner. Pair with a tone that matches the surface's call to action.

Driven from an ISO timestamp

getCountdownLabel(iso, ongoing) formats an ISO timestamp into the value string. Pick the tone yourself based on the diff — here the consumer maps "< 1 hour" to critical, "< 24h" to warning, otherwise info.