Storytel - Audiobooks Library

Colors

• #FCFCFCscreen-bg · background
• #FFFFFFcard-bg · subscription card upper fill
• #F0EDE9card-footer-bg · subscription card CTA footer fill
• #E0F2FEtag-bg · trial badge background
• #0369A1tag-text · trial badge text
• #E64100action-orange · try now link text · chevron
• #111111text-primary · main title · feature text · pricing

Type

• page-titleMontserrat · 48px · 800 · #111111
• sub-headerMontserrat · 32px · 400 · #111111
• plan-titleMontserrat · 46px · 800 · #111111
• plan-priceMontserrat · 30px · 700 · #111111
• feature-list-itemMontserrat · 32px · 500 · #111111

Elements

• close_button · button

  Top right circular icon button, diameter approx 80px · Off-white background circle with dark cross icon

• pricing_card · card

  Margins 44px, full width, height approx 450px · Compound card with white upper content area and contrasting light grey-brown bottom action bar, bordered with light outline

• trial_pill_badge · badge

  Inline inside plan card below title · Light pastel blue pill with dark blue bold text

• benefits_list · list

  Below plan card, rows spaced vertically with checkmarks on left · Checkmark icons followed by benefit descriptive text

Layout

Modal paywall screen structured with top dismiss action, centered promotional pitch, large interactive tier card, and list of product value props.

Notes

Designed as a subscription bottom sheet or full-screen promotional modal.