Heyyyy: Stories that text back

Colors

• #FFFFFFapp_bar_white · header background
• #301934brand_dark · logo text
• #FF4477reject_pink · reject button
• #00C2FFsuperlike_cyan · superlike button
• #00C399like_green · like button
• #8442CAtag_purple · tag background

Type

• brand_logoSnell Roundhand · 44px · bold · #301934
• counter_labelSF Pro Text · 28px · bold · #1C1C24
• profile_nameSF Pro Display · 54px · bold · #FFFFFF
• bio_highlightSF Pro Text · 34px · 500 · #FFFFFF

Elements

• app_header · top app bar

  Row under status bar with logo, notification bell, and gems indicator. · White background, flush layout.

• story_progress_indicators · segmented progress bar

  Segmented line across photo top edge. · Segment 1 active (white), segments 2 and 3 inactive.

• action_buttons · floating action bar

  Centered three round actions floating above tab navigation. · Pink, cyan, and teal round icons.

• bottom_navigation · tab bar

  Bottom anchored navigation bar with 5 items. · White fill with icons and labels.

Layout

Profile swipe screen for Venus on first photo segment, with clear view of header controls and balance counters.

Notes

Identical layout framework to screen 3 with first segment active.