위프 - BL 취향저격 AI 채팅

Colors

• #13111CBackground Dark · page background
• #1D1B28Surface Card · profile card · wallet card · banner card
• #FFFFFFButton Primary · top up button fill
• #272437Button Secondary · usage history button fill
• #6366F1Accent Purple · subscription action button
• #F43F5EAccent Pink · discount pill background
• #FFFFFFText Primary · username · button labels · card titles
• #8E889EText Muted · email address · stat labels · footnote

Type

• Profile UsernameSF Pro Text · 36px · 700 · #FFFFFF
• Email LabelSF Pro Text · 26px · 400 · #8E889E
• Banner TitleSF Pro Display · 38px · 700 · #C084FC
• Action Button LabelSF Pro Text · 28px · 600 · #111111

Elements

• User Profile Header · user header

  Row containing circular avatar, vertical stack of username and email, plus right-aligned edit icon · Avatar has dark circular fill with subtle text; transparent container

• Stats Row · card

  3-column metric layout showing Followers, Following, Total Messages with chevron · Rounded rectangle card (#1D1B28) with inner pill placeholders

• Wallet & Balance Block · card

  Card containing key icons at the top and split button row below · Dark surface (#1D1B28) with white '+ Top Up' pill and dark 'Usage History' pill

• Invite Friends Bar · button card

  Centered full-width bar below wallet card · Subtle deep purple fill (#252236) with gift box icon and muted text

• Subscription Promotion Banner · banner card

  Large horizontal promotional container with character illustration on right · Purple-tinted dark background with glowing portrait, action pill button, and pink 74% off badge

• Bottom Navigation Bar · tab bar

  Fixed bottom bar with active indicator on 'My Page' · Semi-translucent rounded container with purple highlighted oval behind active tab

Layout

Profile screen arranged as a vertical stack of discrete rounded cards: profile identity, social counts, currency and actions, promo banner, and bottom navigation.

Notes

Metric counters appear as placeholder rounded rectangles, likely indicating a loading state or privacy hidden state.