Heyyyy: Stories that text back

Colors

• #503ce8primary-purple · user message bubble · +5 XP reward button · send button fill
• #ffffffbanner-card-bg · in-app banner notification surface
• #f1f3f6incoming-bubble-bg · incoming chat message container
• #1b1d28text-primary · notification author · chat message text
• #6b7280text-secondary · notification snippet · timestamp meta text
• #ffffffcanvas-bg · main conversation view background

Type

• notification-titleSF Pro Text · 34px · 700 · #1b1d28
• notification-bodySF Pro Text · 28px · 400 · #6b7280
• banner-button-textSF Pro Text · 34px · 700 · #ffffff
• incoming-bodySF Pro Text · 34px · 400 · #1b1d28
• timestamp-labelSF Pro Text · 22px · 400 · #82899d

Elements

• notification_banner · toast_card

  Top overlay covering native header, approx 1000px wide with inset horizontal padding of 40px, rounded corners · Solid white card with a subtle drop shadow, containing a yellow bell icon, title Venus, and truncated body message

• xp_reward_pill · banner_button

  Centered horizontally below notification area, approx 930px wide by 115px tall · Vibrant purple #503ce8 background, bold white text centered with '+ 5 XP'

• incoming_chat_bubble · message_bubble

  Left-aligned, 200px wide by 130px tall, preceded by sender circle avatar · Soft gray #f1f3f6 fill, dark grey text 'h' with timestamp below

• emoji_reaction_badge · reaction

  Positioned over lower left of user purple chat bubble, 44px circular emoji · Laughing tear emoji overlayed onto bubble edge

• send_button · icon_button

  Far right of bottom bar, 88px diameter circle with rightward arrow/plane icon · Solid purple #503ce8 circle with centered white paper airplane glyph

Layout

Screen with an overlay notification banner top stack, floating XP reward bar below, followed by conversation message items and an active input bar with paper plane action icon.

Notes

The notification banner overlays the top navigation header completely.