Hover Card
Elegant floating preview cards that appear on hover. Popovers use tray color on white backgrounds.
Default Variant
Tray-colored popover on white background provides good contrast and visual hierarchy.
Hover for profile
Capsule Variant
Compact tray-colored popover. Perfect for inline content previews.
Inverted Context
On a tinted background, use default/capsule variant for white popovers that contrast well.
Learn more
Quick Info Pattern
Inline hover cards for quick information access without modal interruption.
The Tinted Trays design system uses high-key colors to create clean, professional interfaces with subtle depth and structure.