Babbel - Language Learning

Colors

• #000000Background Black · screen background
• #FFFFFFText White · headline text · subtitle text · pill tag background · progress bar active track
• #000000Badge Text Black · pill tag text
• #CBB2F6Pastel Lilac · dog illustration card background
• #D82828Hat Red · party hat color
• #38383AProgress Track Gray · inactive progress bar track

Type

• badge_textInter · 32px · 600 · #000000
• social_proof_headlineGeorgia · 80px · 700 · #FFFFFF
• subtitleInter · 36px · 400 · #FFFFFF

Elements

• back_button · icon_button

  Top left chevron · White chevron-left

• hero_illustration_card · card

  Upper center square card, approx 750x750 px · Rounded rectangle with solid lilac background featuring a white dog with a red party hat

• subscriber_badge · badge

  Positioned overlapping or right below the hero card, centered horizontally · Solid white pill shape with black bold text, subtle shadow

• story_progress_bar · progress_indicator

  Bottom anchored bar spanning width, height approx 8 px · Horizontal bar divided into white active segment on dark gray track

Layout

Social proof presentation screen with hero image and badge, centered serif header, supporting subtext, and bottom progress indicator.

Notes

Lilac background color matches the 'Beginner courses' tile color in screen 1.