Heyyyy: Stories that text back

Colors

• #FAFAFDBackground Off-White · screen background
• #271253Header Purple Dark · contact name · icons
• #6C27DFSend Purple · send button background · level indicator
• #D1D5DBKeyboard Background Light · system keyboard area fill
• #FFFFFFKey Cap White · standard alphanumeric key caps
• #B4B8C0Key Cap Grey · special function key caps

Type

• Contact NameSF Pro Text · 38px · 700 · #271253
• Input PlaceholderSF Pro Text · 32px · 400 · #8A8D9F
• Keyboard Key LabelSF Pro Text · 44px · 400 · #000000

Elements

• Chat Navigation Bar · app_bar

  Fixed header with back button, user avatar with online badge, username Arya, and right stats · Clean white header

• Message Input Bar · input_group

  Shifted upwards directly above the virtual keyboard · White panel with text input field and purple send icon

• Virtual Keyboard · keyboard

  Anchored to bottom spanning full screen width and bottom 40% of viewport · Native iOS QWERTY software keyboard with rounded white and grey keycaps

Layout

Chat interface state with active focus in message input field, elevating the bottom input container above the fully deployed iOS system keyboard.

Notes

Shows active keyboard interaction state in conversation view.