Heyyyy: Stories that text back

Colors

• #FAF9FEbackground · screen_background
• #DCE2F9avatar_dashed_border · photo_upload_dashed_stroke
• #EEF1F8avatar_fill · photo_placeholder_background
• #8F95A5avatar_icon · camera_icon_tint
• #5D3CEEpurple_accent · add_plus_badge · add_photo_text
• #1A1B4Btext_primary · header_title
• #6C728Etext_body · helper_text · text_area_placeholder
• #F3F4FAcard_fill · bio_input_background
• #8A05EEcta_gradient_start · primary_button_gradient_left
• #3843EEcta_gradient_end · primary_button_gradient_right

Type

• header_titleSF Pro Display · 54px · 700 · #1A1B4B
• action_textSF Pro Text · 44px · 600 · #5D3CEE
• helper_labelSF Pro Text · 38px · 400 · #6C728E
• input_placeholderSF Pro Text · 42px · 400 · #6C728E
• character_counterSF Pro Text · 36px · 400 · #6C728E
• primary_cta_labelSF Pro Text · 42px · 600 · #FFFFFF
• secondary_cta_labelSF Pro Text · 42px · 500 · #535878

Elements

• photo_upload_area · avatar_uploader

  Centered circular avatar area approx 440x440px with small badge positioned bottom-right · Dashed periwinkle ring boundary around very light grey circle, camera glyph at center, plus icon inside solid purple badge

• bio_input_field · text_area

  Centered rectangular card below helper text, approx 290px height with character limit '0/500' below right edge · Soft solid grey-purple fill with rounded corners and light placeholder text

• lets_go_button · button

  Bottom-aligned pill button, 126px height, width spans margins · Horizontal gradient from bright magenta-purple to royal blue with white text

• skip_button · text_button

  Positioned 50px below the primary CTA, centered horizontally · Borderless text link in slate grey

Layout

Vertical sequence including navigation header, circular photo upload trigger, inline hint with emoji, expandable text area for user bio, followed by primary and secondary action buttons stacked at the footer.

Notes

Character limit is placed external to the text box container on the lower right.