Babbel - Language Learning

Colors

• #000000Background Black · screen background
• #FFFFFFText White · headline text · back arrow glyph · progress bar active track
• #FCE082Pastel Yellow · card background - meet up
• #65DA9BPastel Green · card background - origins
• #CBB2F6Pastel Lavender · card background - beginner courses
• #1A1A1AGraphic Dark Charcoal · card text · silhouette outlines
• #BE1622Scooter Red · moped illustration fill
• #38383AProgress Track Gray · bottom progress bar inactive segment

Type

• social_proof_headlineGeorgia · 84px · 700 · #FFFFFF
• card_headlineInter · 40px · 700 · #1A1A1A

Elements

• back_button · icon_button

  Top left below status bar · White chevron-left

• illustrated_card_grid · visual_group

  Asymmetric collage of three rounded rectangular cards positioned in upper center of screen · Pastel rounded square/rectangular badges with bold dark text and vector/photo assets

• story_progress_bar · progress_indicator

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

Layout

Interstitial splash/social proof screen featuring an asymmetric visual illustration cluster, a large centered serif claim, and bottom progress indicator.

Notes

Font alternative for serif headline includes Tiempos Headline or Recoleta.