Components
Messaging
A dedicated colour pair, a functional tail notch (not a decorative flourish), and a dedicated Optimistic DM type cut suggest this surface gets its own optical tuning distinct from the rest of the product.
Live
The tail is a real clip-path
Hey! Did you see the new gradient?
Yeah — it's the same five stops, just a tighter crop.
Bubble tail
.tail {
width: 24px; height: 6px;
clip-path: path("M 24 0 Q 19.5 0 18 2.571 Q 16.5 6 12 6 Q 7.5 6 6 2.571 Q 4.5 0 0 0 Z");
}Tokens
A dedicated colour pair
Usage
Do / Don't
Do
- Use the exact 24×6 unit path for the tail — it's a precise, symmetric Bézier shape, not an approximation.
- Keep the outgoing bubble colour fixed across light/dark — it's intentionally theme-independent.
- Round the bubble's near corner to 4px (vs. 18px elsewhere) so the tail reads as part of the same shape.
Don’t
- Reuse the chat-bubble tail path for an unrelated tooltip or callout — it's sized and proportioned specifically for this bubble radius.
- Apply the incoming bubble's light/dark pairing to the outgoing bubble — only one side themes.