Babbel - Language Learning

Colors

• #000000Background Black · screen background
• #FFFFFFText White · headline text · caption text · active progress bar fill
• #38383AProgress Track Gray · inactive progress bar track

Type

• social_proof_headlineGeorgia · 80px · 700 · #FFFFFF
• citation_captionInter · 34px · 400 · #FFFFFF

Elements

• back_button · icon_button

  Top left chevron · White chevron-left

• hero_image · image_card

  Upper center portion of screen, aspect ratio approx 1:1, width ~750 px · High-contrast photographic portrait of woman smiling with phone, rounded corners

• story_progress_bar · progress_indicator

  Bottom anchored bar spanning width with padding, height 8 px · White active segment on dark gray track

Layout

Centered storytelling / social proof screen with top-aligned image, centered serif stat title, explanatory caption, and bottom progress indicator.

Notes

Progress bar fill indicates step progression in story format.