Babbel - Language Learning

Colors

• #000000Background Black · screen background
• #FFFFFFText White · title · option text · button label · icons
• #D1D1D6Subtext Gray · instruction text
• #3A3A3CBorder Dark Gray · card outlines · checkbox outlines
• #D83A1EProgress Active Red · active segment
• #8E8E93Skip Button Border · skip button border

Type

• screen_headlineGeorgia · 80px · 700 · #FFFFFF
• instruction_subtitleInter · 36px · 400 · #D1D1D6
• option_labelInter · 34px · 600 · #FFFFFF
• button_labelInter · 36px · 600 · #FFFFFF

Elements

• back_button · icon_button

  Top left navigation bar · White chevron

• progress_bar · progress_indicator

  Top center horizontal bar · Red filled segment and dark gray inactive segment

• multi_choice_list · list

  6 vertically stacked full-width rounded rows, 18 px vertical spacing · Dark fill with dark gray stroke; contains left aligned outline icon, label, and right-aligned empty checkbox square with rounded corners

• skip_button · button

  Pinned bottom center pill button · Transparent/black fill with subtle border, white centered text

Layout

Standard multi-select questionnaire view with fixed header indicator, scrollable/stacked item list, and bottom pinned action button.

Notes

Checkboxes appear unselected (empty outline).