Chat Bubbles
The full message-bubble system. Incoming bubbles are grey (--bubble/bg-incoming), outgoing are tinted primary (--bubble/bg-outcoming) — the sender name uses --bubble/name-incoming. In dark, incoming goes dark-grey, outgoing a solid blue, and the name re-themes to lime. Families: Text, Reacted, Replied, Image, Video and Link previews.
Text bubbles
Short (time inline) and multi-line. Incoming carries an avatar + sender name; outgoing shows a timestamp and green ✓✓ delivery.
Reacted & replied
A reaction pill overlaps the bubble corner (hover to pop). A reply quotes the message being answered inside the bubble, behind a primary accent bar.
Image
Photos crop to a rounded frame with a time badge overlaid. Square, landscape and vertical formats, plus placeholder and loading states.
Video
A play button floats over the frame (swells on hover). Portrait and landscape, plus placeholder and loading states.
Link previews
Unfurled links: a hero-image card, an icon card, a text-only card, or a plain link — each with the tappable URL and timestamp beneath.
In dark
Incoming turns dark-grey, outgoing a solid blue, the sender name re-themes to lime and the reply accent follows. Media and link cards sit on the dark surface.
Token Reference
| Token | Value | Usage |
|---|---|---|
| --bubble/bg-incoming | #efefef → #2c2c2e | Incoming bubble fill |
| --bubble/bg-outcoming | #352eff1a → #2f43d9 | Outgoing bubble fill (blue in dark) |
| --bubble/name-incoming | #352eff → #a1ff5b | Sender name · reply accent (→ lime) |
| --bubble/text-incoming | #171717 → #f2f2f2 | Message text |
| --main-text/description | #7f7f7f | Timestamps · host · quote text |
| --System/Success | #629c28 | ✓✓ delivery check |
| Motion | .55s rise · pop | Sequenced bubble reveal & reactions |