Badge system

Tiny mono-uppercase chips that carry meaning per surface. Every badge has strict semantics — they communicate status, not decoration.

Badge variants

.chip-orange · Live · Closing Soon · Sponsored

Time-sensitive or commercial signal. Always paired with the orange anchor color.

.chip-success · Verified · Open

Editorial verification or open application status. Green.

.chip-primary · Sector · Stage · Topic

Editorial taxonomy chip. Light purple background, purple text.

.chip-muted · Closed · Past · Archived

De-emphasized status. Muted background + foreground.

.chip-outline · Filter chips · Filter state

1px border, transparent background. Used for filter strips and language indicators.

.chip-accent · Featured · Editorial

Editorial elevation marker. Accent color (warm amber). Reserved for featured / spotlight contexts.

Typography rule for every badge

When NOT to use a badge

• For category names that are part of the content hierarchy — use a heading or eyebrow, not a chip.
• For decorative emphasis — badges carry semantic weight, do not waste them on visual interest.
• For user-generated tags — those go in `.chip-outline` with explicit "tag" framing, not as status chips.