Babbel - Language Learning

Colors

• #000000Background Black · screen background
• #DE4326Accent Orange-Red · highlighted word 'tiempo' · progress bar fill
• #FFFFFFText White · title text · list item text · back arrow
• #3A3A3CCard Border · selection pill outline
• #272727Progress Inactive Gray · inactive progress bar

Type

• screen_headlineGeorgia · 80px · 700 · #FFFFFF
• screen_headline_accentGeorgia · 80px · 700 · #DE4326
• option_labelInter · 34px · 600 · #FFFFFF

Elements

• progress_bar · progress_indicator

  Top center bar, approx 360 px wide · Active orange-red segment on dark background

• time_commitment_options · radio_group

  Vertical stack of 5 options, 18 px spacing · Thin outlined rounded rectangles with left-aligned bold text

Layout

Single-column survey step with typographic accent highlighting target language vocabulary directly in question text.

Notes

'tiempo' is italicized in the primary headline.