Learna: Speak & Learn English

Colors

• #89C2F8Sky Gradient Top · top background gradient
• #FFFFFFPure White · screen background lower half · button text
• #308CF6Primary Action Blue · cta button background · timeline active circle
• #0F3D6BMidnight Blue Header · main paywall heading · billing summary text
• #F4F6F9Trial Banner Soft Gray · free trial enabled box fill
• #22C55EGreen Free Tag · free trial duration text
• #E2E8F0Timeline Muted Gray · vertical connecting timeline line · inactive step circle fill
• #64748BSubdued Slate · step description text · footer link text · restore button text

Type

• Paywall HeadlineSF Pro Rounded · 68px · 800 · #0F3D6B
• Paywall SubtitleSF Pro Text · 36px · 400 · #0F3D6B
• Product Brand BadgeSF Pro Rounded · 42px · 800 · #2563EB
• Timeline Step TitleSF Pro Text · 36px · 700 · #0F3D6B
• Timeline Step CaptionSF Pro Text · 30px · 400 · #64748B
• Pricing LabelSF Pro Text · 36px · 600 · #0F3D6B

Elements

• Restore Purchase Button · button

  Top right corner below status bar area · Unstyled subtle text button in slate gray

• Subscription Timeline Stepper · stepper

  Vertical progression list with 3 nodes connected by a vertical line, aligned to left edge with text on right · Step 1 has vibrant blue halo with lock icon; Step 2 has neutral bell icon; Step 3 has neutral star icon

• Free Trial Enabled Card · card

  Full width rounded rectangle situated above billing line items · Light grey/off-white flat fill with bold navy text aligned left

• Due Date Summary Rows · list_item

  Two stacked horizontal rows indicating 'Due today' and 'Due August 25, 2026' with prices aligned right · Left timeline indicator dots connected by thin line, right-aligned price values ($0.00 and $14.99)

• Try Free CTA Button · button

  Full width spanning horizontally with ~50px side margins, placed above footer links · Solid bright blue fill, rounded rectangle, centered white text

• Legal Footer Links · footer

  Bottom row split between 'Privacy | Terms' on left and 'Cancel Anytime' on right · Underlined or muted gray text links

Layout

Monetization paywall screen with vertical hierarchy. Top half includes AI mascot bust, product title, and promise description. Midsection consists of a 3-step timeline illustrating trial flow. Lower region organizes the plan summary, pricing breakdown, primary trial CTA, and compliance footer.

Notes

The year '2026' appears in the screenshot as mock or future trial end date text. Font confidence remains low due to platform standard geometric styling.