Atomic data display elements used across the system. Tag badges are tinted pills that map categories to palette colors. Status badges show project state in aviation terms — ON TIME, BOARDING, DELAYED — with optional glow effects for dark mode instrument readability. Flight numbers render in amber monospace, the signature look of departure board data.
Playground
Shared
Tag Badges
All color variants
compute
display
audio
active
beta
flight data
pending
Tag Badges on Surfaces
Badges on different background colors
On cream surface
compute
display
audio
active
beta
flight data
pending
On navy surface (high_contrast)
compute
display
audio
active
beta
flight data
pending
On red surface (high_contrast)
compute
display
audio
active
beta
flight data
pending
Status Badges
All statuses, with and without glow
Standard
ON TIME
BOARDING
DELAYED
With glow (dark surface)
ON TIME
BOARDING
DELAYED
Flight Numbers
Amber monospace codes, with and without glow
Standard
CF-1
CF-2
CF-3
With glow (dark surface)
CF-1
CF-2
CF-3