HelloTalk - Language Learning

Colors

• #0F86FESky Blue Header · Top illustration background fill
• #FFB800Sun Yellow · Summer banner accent · Discount badge text
• #FFFFFFPure White · Main paywall card container · Tier card background
• #3575FEActive Tier Border · Selected plan card border stroke
• #3B66FFCTA Gradient Blue · Bottom action button gradient start
• #98F560CTA Gradient Lime · Bottom action button gradient end
• #36D559Timer Green · Countdown timer pill background

Type

• Banner Promo HeadingSF Pro Display · 56px · 800 · #FFFFFF
• Table Section TitleSF Pro Display · 44px · 700 · #1C1C1E
• Tier Duration HeadingSF Pro Text · 36px · 700 · #1C1C1E
• Tier Price CurrentSF Pro Display · 46px · 700 · #1C1C1E
• Tier Discount NoteSF Pro Text · 34px · 600 · #1E75FF
• Main CTA ButtonSF Pro Display · 44px · 700 · #FFFFFF
• Legal Disclaimer TextSF Pro Text · 28px · 400 · #8E8E93

Elements

• Summer Hero Graphic · Illustration Banner

  Top third of the screen with wavy blue edge separating content. · Vibrant sky blue background with 3D sun character wearing sunglasses, credit card, pool float, and popsicle accents.

• Benefits Comparison Table · Data Table

  Four feature rows comparing Non-VIP to VIP column values. · Minimal rows with chevron disclosure arrows, lock icons for restricted items, and gold checkmark pills for VIP benefits.

• Plan Option Cards · Card Carousel / Row

  Three adjacent vertical cards; middle 12-month tier is highlighted with active border and top badge. · Center card has a 4px blue solid border, top green/cyan gradient discount badge, struck-through original price, and bold discounted price.

• Countdown Clock · Timer Widget

  Centered below pricing plans, inline text with three separate number blocks. · Three bright green rounded rectangular badges containing white numerical countdown separated by colons.

• Bottom CTA Button · Button

  Full width with side margins, fixed near bottom above legal disclaimers, roughly 120px tall. · Smooth horizontal gradient transitioning from bright royal blue to light lime green with white bold text.

Layout

Paywall modal view featuring an illustrative promotional header, feature comparison list, three-column pricing plan selector with countdown urgency mechanism, and a sticky bottom conversion action.

Notes

The typography is clean modern geometric sans-serif typical of iOS human interface guidelines or modern cross-platform Flutter/React Native builds.