Babbel - Language Learning

Colors

• #000000background-black · screen background
• #FFFFFFtext-primary · headline · bullet points · card titles · active tab · button text
• #999999text-secondary · inactive tab text · card subtitle
• #B83A20accent-strikethrough · original price strikethrough
• #F15423badge-orange · discount badge background
• #131314card-surface · unselected plan card fill · tab selector background
• #FFFFFFbutton-surface-white · cta button fill

Type

• page titleserif · 72px · bold · #FFFFFF
• bullet feature itemsans-serif · 34px · regular · #FFFFFF
• tab labelsans-serif · 32px · bold · #FFFFFF
• plan titleserif · 54px · bold · #FFFFFF
• primary cta labelsans-serif · 36px · bold · #000000

Elements

• Close Button · icon button

  Top-right corner cross icon · White vector cross

• Feature Bullet List · list

  Left-aligned 3-row stack with checkmark glyphs · Simple white checkmarks next to regular text

• Segmented Control · tab selector

  Full-width dual button segmented container (Individual vs Group plans) · Dark container with active state outlined pill on left

• Selected Subscription Card · pricing card

  Full width rounded card with gradient outline and floating discount badge at top right · Multicolor gradient border (purple-red-orange) on dark fill with bright orange 'SAVE 50%' badge

• Alternative Lifetime Card · pricing card

  Full width rounded card positioned directly below primary subscription card · Dark grey rounded surface (#131314) without border

• Show All Plans Link · text link

  Centered below subscription cards · Bold underlined white text

• Subscribe Action Button · cta button

  Full-width pill button pinned near bottom · Solid white fill with black bold text

Layout

Subscription paywall screen with headline, value props, segmented tab switcher, highlighted plan with gradient border, alternate plan card, and fixed bottom CTA.

Notes

Prominent gradient stroke on the 12-month card ranges from purple (#8A348E) to red-orange (#E04F2B).