Heyyyy: Stories that text back

Colors

• #F9F8FBApp Background · Screen background fill
• #25215AHeader Dark Navy · Header title · Back icon
• #E2DFEBCard Outline · Chat container border and inner divider
• #FFFFFFCard Surface · Chat simulator card background
• #48C95FOnline Green · Presence dot indicator
• #9C0CE5Level Badge Gradient Start · Level pill badge gradient left
• #4B44E8Level Badge Gradient End · Level pill badge gradient right
• #F3F1F8Incoming Chat Bubble · Incoming message bubble fill
• #8C18E6Send Button Purple · Send button circle fill
• #5A45E5Carousel Active Dot · Active pagination indicator
• #D1CDDCCarousel Inactive Dot · Inactive pagination indicators

Type

• Onboarding Value Prop Header-apple-system · 34px · 800 · #25215A
• Contact Name-apple-system · 24px · 700 · #25215A
• Presence Status-apple-system · 18px · 500 · #6E6B87
• Badge Text-apple-system · 20px · 700 · #FFFFFF
• Message Body-apple-system · 26px · 500 · #25215A
• Input Placeholder-apple-system · 24px · 500 · #64627E

Elements

• Navigation Top Bar · navigation_bar

  Row containing left chevron icon (~24px) and title 'Real texts. Real tension.' aligned left-center. · Frameless navigation header with bold dark navy typography.

• Simulated Chat Card · card

  Center container spanning ~75% of screen height, rounded corners, bordered frame. · White background, thin 1px border (#E2DFEB), containing chat header, message feed, and input footer.

• Chat Card Header · header

  Top section inside chat card with border bottom; contains avatar, name 'Luna', status, and level badge. · Circular avatar ~56px, vertical text stack, and purple gradient pill badge 'Level 1 🔥'.

• Message Bubble · chat_bubble

  Left-aligned chat item with sender mini-avatar (~48px) and bubble with text 'hey'. · Subtle grey-tinted pill bubble (#F3F1F8) with dark text.

• Chat Input Bar · input_group

  Anchored at the bottom inside chat card; includes photo attachment icon, rounded text input field, and circular send button. · Light grey border container with circular violet send button containing an upward white arrow.

• Carousel Indicator · pagination_dots

  Horizontal row of 3 dots centered ~24px below the chat card. · Left dot is indigo/purple (active); middle and right dots are light grey.

Layout

Product demo / carousel walkthrough screen. Bold claim in header, simulated interactive chat window occupying center stage, pagination dots indicating progress across feature highlights.

Notes

Simulates messaging gameplay and relationship levels in the app.