Heyyyy: Stories that text back

Colors

• #503ce8primary-purple · user message bubble background · level badge fill
• #ffffffsurface-white · main screen background · top bar background
• #f1f3f6surface-light-gray · incoming typing bubble fill · input text field fill · diamond counter pill fill
• #dbe3fadivider-light-blue · progress track bar · hairline divider
• #1b1d28text-primary · header title Arya · currency counter text
• #82899dtext-secondary · conversation start stamp · input placeholder · message timestamp
• #25d366status-green · online presence indicator dot
• #e53e3ebadge-red · notification bell badge

Type

• header-titleSF Pro Text · 38px · 700 · #1b1d28
• status-captionSF Pro Text · 24px · 400 · #82899d
• badge-numberSF Pro Text · 24px · 700 · #ffffff
• counter-labelSF Pro Text · 34px · 600 · #1b1d28
• timestamp-metaSF Pro Text · 22px · 400 · #82899d
• outgoing-messageSF Pro Text · 36px · 400 · #ffffff
• input-placeholderSF Pro Text · 32px · 400 · #82899d

Elements

• top_app_bar · navigation_bar

  Pinned to top below status bar, 1080px wide by approximately 130px tall, flex row distributing back button, profile details, and utility chips · Solid white fill with borderless surface transitioning into level indicator divider

• avatar_circle · avatar

  44px from left edge, 84px diameter circular photo frame with a 4px green outline ring · Cropped circular portrait with circular status badge overlay on the bottom right

• diamond_pill · chip

  Right header utility item, 180px wide by 66px tall pill housing diamond icon and count · Soft cool-gray background #f1f3f6, no border, horizontal inline flex

• level_progress · progress_bar

  Horizontal row spanning across screen width, 16px below top bar; 64px circular badge on left overlapping a thin horizontal track · Circular badge in #503ce8 with white level number '1', light blue-gray line track #dbe3fa

• outgoing_chat_bubble · message_bubble

  Aligned to right margin, approx 200px wide by 160px tall, containing letter 'H' and bottom-aligned timestamp · Rich purple fill #503ce8, white primary text, semi-translucent timestamp

• typing_indicator · typing_bubble

  Aligned to left margin offset by 76px circular avatar, bubble size 170px by 88px containing three aligned dots · Light grey solid fill #eef0f4, rounded pill shape with three charcoal dots

• chat_input_bar · text_input

  Pinned near bottom edge, spans 1080px with left plus action button, expansive center text pill, and right spinning loader control · Text input container in rounded light gray #f1f3f6 with light gray placeholder text

Layout

Single-column mobile chat layout featuring a fixed navigation header with user info and virtual economy stats, a level progression bar, a vertical scrollable conversation thread, and a persistent bottom action bar.

Notes

Font metrics are visual estimates based on iOS standard system typefaces. The right action control in the input bar appears to be in an inactive loading/spinner state.