Heyyyy: Stories that text back

Colors

• #503ce8primary-purple · user message bubble · +5 XP reward bar · send action icon button
• #ffffffcard-white · notification card background · main view fill
• #f1f3f6incoming-bubble-gray · received message bubbles · typing indicator bubble
• #1b1d28text-primary · notification sender · incoming message body
• #6b7280text-secondary · notification snippet text · timestamps

Type

• notification-titleSF Pro Text · 34px · 700 · #1b1d28
• notification-bodySF Pro Text · 28px · 400 · #6b7280
• message-textSF Pro Text · 34px · 400 · #1b1d28
• timestamp-captionSF Pro Text · 22px · 400 · #82899d

Elements

• incoming_bubble_long · message_bubble

  Left-aligned chat message, approx 720px wide by 180px tall, left margin 150px indented from avatar · Soft light-gray #f1f3f6 fill with two-line conversational body text and bottom right timestamp

• typing_indicator · typing_bubble

  Below latest message on left, paired with avatar icon, 170px by 88px rounded pill · Matching light gray container #f1f3f6 with 3 horizontal animated grey dots

• top_notification_card · toast_card

  Pinned top center, floating card 1000px by 190px · Elevated white surface with subtle shadow and gold bell graphic

Layout

Linear conversational stream extending downwards with active typing indicator, floating reward banner, and top alert overlay.

Notes

Shows second message received from Arya ('solid opening. very demure. very mindful.') while she continues typing.