Babbel - Language Learning

Colors

• #000000Background Black · screen background
• #FFFFFFText White · headline text · option label text · button label text · back button glyph
• #D83A1EProgress Active Red · active progress bar segment
• #272727Progress Track Dark Gray · inactive progress bar track
• #3A3A3CCard Border Dark Gray · option card outline
• #8E8E93Skip Button Border · bottom action button outline

Type

• screen_headlineGeorgia · 80px · 700 · #FFFFFF
• option_labelInter · 36px · 600 · #FFFFFF
• button_labelInter · 36px · 600 · #FFFFFF

Elements

• back_button · icon_button

  Top left below status bar, roughly 50x50 px hit area · Chevron-left glyph in solid white, no background fill

• progress_bar · progress_indicator

  Top center horizontally centered, width approx 360 px, height 8 px · Two-segment track: left segment filled in vibrant red, right segment dark gray

• option_selector_group · radio_group

  Vertical column below header, 3 items spaced by 20 px, full width with lateral margins · Dark translucent fill with subtle rounded rectangular borders in dark gray

• skip_button · button

  Fixed near bottom screen margin, full width pill button, height approx 110 px · Black fill with muted light gray outline, centered white bold text

Layout

Single-column mobile questionnaire screen with fixed top navigation/progress, centered content block, and bottom pinned action button.

Notes

Header typography displays distinctive serifs; Babbel typically uses custom brand display serifs or Tiempos/Recoleta. Georgia is listed as the closest ubiquitous system fallback.