Popia - AI Stories & Creators

Colors

• #7d1646card-header-magenta · top banner gradient background
• #1b1418card-body-surface · modal body background
• #281b22card-sub-surface · daily reward & perk container surfaces
• #fffffftext-primary · bonus title · perk header
• #9c8e96text-secondary · timeline labels · subtitles
• #faea8cbadge-yellow · completed checkmark badge · primary OK button fill
• #2b2327close-btn-surface · close button circle background

Type

• banner-titleSF Pro Display · 50px · bold · #ffffff
• timeline-daySF Pro Text · 30px · normal · #ffffff
• timeline-valSF Pro Text · 32px · 600 · #ffffff
• feature-titleSF Pro Text · 32px · 600 · #ffffff
• feature-subSF Pro Text · 28px · normal · #9c8e96
• cta-labelSF Pro Text · 36px · bold · #111111

Elements

• bonus-modal · modal

  centered on screen, approx 940x980 px · two-tone dark card: magenta gift illustration top section and dark nested reward section

• timeline-tracker · progress-tracker

  horizontal streak display showing Today, 2 days, 3 days · nested rounded card with connecting progress line, coin/gift icons, and value counts

• discount-perk-card · card

  nested horizontal row below tracker, approx 860x180 px · dark container with circular donut/wheel icon and promotional text

• ok-button · button

  full-width button inside card, approx 860x130 px · bright cream/yellow pill button with black label

• close-circle-button · button

  centered below modal card, approx 100x100 px · circular dark pill with 'X' icon

Layout

Gamified newcomer check-in reward modal overlaying the dimmed main feed, featuring daily progress tracker and confirmation button.

Notes

Top banner displays a 3D-rendered pink gift box with floating gems.