26. Subtle Semantics — Rounded Badge Variants
Tint-background badges with colored text and soft borders. Color hints at status — it does not shout it.
Design Principle — Subtle Semantics: In data-dense UIs (tables, grids, dashboards), solid-fill badges create "color islands" that compete with the actual data for attention. Instead, use an 8–10% opacity tint background + the semantic color as text + a soft 30% opacity border. The data stays primary. The status is always legible. This is the standard used by Stripe, Linear, and Datadog.
1. Rounded Status Pill Badges (Text Data)
Approved (Success)
Needs Review (Warning)
Import Failed (Danger)
Active Import (Info)
Archived (Neutral)
Primary / System
2. Rounded Circular Step Indicators (Numeric Data)
1
2
3
4
5
3. Rounded Blank & Dot Badges (Solid Fills, No Data)