위프 - BL 취향저격 AI 채팅

Colors

• #0B0A10backdrop-dim · dimmed background underlying modal
• #32313Dmodal-surface · modal dialog card background
• #21202Atoast-surface · snack bar notification pill
• #434251toast-border · snack bar subtle outline
• #FFFFFFmodal-btn-bg · Close primary button fill
• #13121Amodal-btn-text · Close button label
• #FFFFFFtext-primary · modal title · toast text · award headline
• #C2BFCEtext-secondary · modal description text
• #8A6BF6nav-active-purple · bottom bar active icon/pill border

Type

• modal-headersans-serif · 36px · 700 · #FFFFFF
• award-titlesans-serif · 34px · 700 · #FFFFFF
• modal-bodysans-serif · 28px · 400 · #C2BFCE
• toast-textsans-serif · 26px · 600 · #FFFFFF

Elements

• New User Benefits Modal Dialog · modal_dialog

  Centered dialog occupying ~85% width and ~75% screen height · Dark slate grey card, rounded corners, subtle shadow, containing 3D hand key art and text

• Close Modal Button · button

  Full width inside modal bottom area · Solid white rounded pill button with dark bold text

• Welcome Toast Banner · toast_notification

  Positioned inside lower edge of dialog above main screen nav · Dark capsule with thin grey border and centered white message

• Bottom Navigation Bar · tab_bar

  Fixed bottom bar with 4 tabs: Chat, Explore (active pill), Mission, My Page · Very dark translucent surface, active tab highlighted with a rounded ring indicator

Layout

Full-screen modal overlay presenting onboarding reward on top of the main application Explore tab.

Notes

The background screen shows partial elements of the main app navigation and character lists.