Heyyyy: Stories that text back

Colors

• #FFFFFFBackground White · primary background · card background
• #1E1A43Deep Navy Text · primary typography · logo · section headers
• #7B1FA2Vibrant Purple · action button fill · border accent · primary highlight
• #6C27FFBright Violet · gradient element · button fill
• #FBBF24Amber Yellow · VIP pill tag fill
• #64748BSlate Gray · secondary typography · subtitles · loader text
• #E0E7FFSoft Blue Tint · top bar gem container fill
• #EF4444Notification Red · badge counter fill

Type

• logoSF Pro Display · 54px · 800 · #1E1A43
• section-headerSF Pro Display · 44px · 700 · #1E1A43
• body-subtextSF Pro Text · 28px · 400 · #64748B
• button-labelSF Pro Text · 32px · 600 · #FFFFFF
• tab-labelSF Pro Text · 20px · 500 · #1E1A43

Elements

• Top App Bar · header

  Row pinned below status bar across full width with space-between alignment · White background with brand wordmark on left, bell notification and gem count pill on right

• Daily Reward Card · card

  Horizontal banner with 44px margins, containing gem graphic, count text, and action button · White background enclosed by a thin 2px purple outline with rounded corners

• Claim Free Button · button

  Right-aligned within the Daily Reward card, padded pill shape · Solid purple/violet fill with centered white text

• VIP Badge · badge

  Inline next to 'Upgrade to' title text · Warm golden-amber fill with bold dark text

• Subscription Loading Placeholder · loader

  Centered vertically in subscription section space · Light purple spinner icon with 'Loading subscriptions...' caption

• Bottom Navigation Bar · navigation_bar

  Fixed to bottom of screen with 5 evenly distributed tabs · White background with top hairline border, active tab indicator on Store

Layout

Vertical scroll layout featuring a promotional banner at the top, followed by subscription upgrade and gem package sections containing asynchronous loading spinners, and an anchored bottom tab bar.

Notes

Typography appears consistent with standard iOS system fonts (SF Pro), though custom sans-serif variants like Inter are also plausible. Heights and paddings are measured relative to the device screenshot dimensions.