Heyyyy: Stories that text back

Colors

• #F9F8FBScreen Background · Screen background
• #25215AHeader Navy · Top title typography
• #E2DFEBCard Border · Chat container border and dividers
• #F3F1F8Chat Bubble Fill · Incoming message bubble
• #8C18E6Send Button Violet · Send button fill
• #5A45E5Dot Active · Active carousel dot
• #D1CDDCDot Inactive · Inactive carousel dots

Type

• Feature Title-apple-system · 34px · 800 · #25215A
• Contact Header Name-apple-system · 24px · 700 · #25215A
• Chat Bubble Text-apple-system · 26px · 500 · #25215A
• Input Text Placeholder-apple-system · 24px · 500 · #64627E

Elements

• Screen Header · navigation_bar

  Chevron left back icon and headline 'Real texts. Real tension.' at top. · Clean sans-serif text in dark purple.

• Simulated Chat Card · card

  Framed white container with rounded corners and border. · Bordered white container with inner message thread.

• Text Chat Bubbles · chat_bubble_group

  Stacked incoming chat bubbles: 'hey' followed by 'nice to meet you 😊'. · Soft rounded rectangle light grey pills.

• Incoming Image Attachment · image

  Left-aligned (matching text bubbles margin), rounded photo preview of Luna taking a selfie. · Large rounded photo message card with corner radius ~24px, occupying majority of chat window height.

• Chat Input Dock · input_group

  Pinned to bottom of chat card with image icon, placeholder 'Message...', and send button. · Rounded pill shape input container with purple circular send CTA.

• Pagination Indicator · pagination_dots

  Row of 3 dots centered below chat frame; dot 1 is active. · One purple active circle and two muted grey circles.

Layout

Continuation of carousel slide 1 showing an updated chat state where an image message has arrived in the conversation stream.

Notes

Shows rich media exchange simulation in onboarding flow.