The smallest components carry the most meaning. Status pills, tags, counters, avatar stacks and rating chips — each one pairs colour with a glyph so meaning never depends on hue alone.
State
Deploy states, health indicators and uptime strips — colour plus an icon, never colour alone.
Live (pinging)
Building
Success
Failed
Queued
Warning
Info
Archived
Left rail
Glow pill
Uptime dots
Attention
Notification dots, unread counts, trend deltas, ribbons and keyboard hints.
Icon + count
Pinging dot
99+ counter
Neutral counter
Trend up
Trend down
Corner ribbon
Live viewers
Progress badge
Keyboard hint
Identity
Initials, stacks with overflow, presence rings and typing indicators. Swap the gradient for an <img> and they all still work.
Initials
Squircle
Online ring
Stack + overflow
Hover fan
Gradient ring
With label
Typing avatar
Sizes
Placeholder
Metadata
Tier badges, star ratings, price tags, language dots and stat chips.
PRO badge
Free plan
Enterprise
Star rating
Rating pill
Verified
Price tag
Language dot
Difficulty
Read time
Stat chip
Country flag