Heyyyy: Stories that text back

Colors

• #503ce8primary-purple · level 1 circle badge · filled progress track segment · outgoing message bubble · send button
• #dbe3falight-blue-track · unfilled progress bar segment
• #f1f3f6bubble-bg-grey · incoming chat message bubbles · input container
• #1b1d28text-primary · contact header name · diamond counter · incoming chat text
• #25d366status-green · online presence indicator dot
• #e53e3ebadge-red · notification counter badge

Type

• header-titleSF Pro Text · 38px · 700 · #1b1d28
• message-bodySF Pro Text · 34px · 400 · #1b1d28
• timestamp-captionSF Pro Text · 22px · 400 · #82899d

Elements

• progress_level_bar · progress_bar

  Spanning screen width 16px below header, level 1 circle badge followed by progress line · Line track has purple fill extending approximately 15% across, with remainder light blue-gray

• message_group · message_list

  4 vertical incoming message bubbles from Arya stacked with consistent 16px vertical gap · Soft light-gray #f1f3f6 rounded rectangles with bottom-right timestamps

• chat_input_bar · text_input

  Pinned bottom bar across 1080px width · Plus icon on left, light gray text input pill, solid purple round send button

Layout

Clean conversational view with top app bar fully restored after notification dismissal, displaying filled progress bar segment and entire conversation history.

Notes

The level 1 progress bar now shows a partially filled purple bar indicating XP progress earned.