Heyyyy: Stories that text back

Colors

• #503ce8primary-purple · user chat bubble fill · send button fill
• #f1f3f6bubble-grey · received chat bubbles · input background
• #1b1d28text-primary · message body text · notification sender name
• #707688text-secondary · notification description · timestamps

Type

• notification-titleSF Pro Text · 34px · 700 · #1b1d28
• notification-bodySF Pro Text · 28px · 400 · #707688
• message-bodySF Pro Text · 34px · 400 · #1b1d28

Elements

• notification_banner_avatar · toast_card

  Top overlay floating banner, 1000px wide by 180px tall · Rounded white card with circular photo avatar of Venus on left, sender name, and 'Sent you a message' caption

• incoming_bubble_third · message_bubble

  Left-aligned, 720px wide by 180px tall, placed below previous message · Light gray #f1f3f6 rounded bubble displaying 'i'm arya. you're andrew. we matched. now we're here.'

Layout

Sequential chat log stacking new received messages, with active typing indicator continuing at the bottom and a user-avatar notification banner at the top.

Notes

Notification banner now displays an avatar image instead of the generic golden bell icon.