Babbel - Language Learning

Colors

• #000000Background Black · screen background
• #FFFFFFText White · screen title · age bracket labels · back arrow
• #3A3A3COption Border Gray · option pill strokes
• #D83A1EProgress Active Red · active progress segment
• #272727Progress Inactive Gray · inactive progress bar track

Type

• screen_headlineGeorgia · 80px · 700 · #FFFFFF
• option_labelInter · 34px · 700 · #FFFFFF

Elements

• back_button · icon_button

  Top left navigation bar · White chevron-left

• progress_bar · progress_indicator

  Top center progress indicator · Red active bar and gray inactive bar

• age_bracket_list · radio_group

  Column of 7 stacked rounded pill cards, 18 px vertical spacing · Dark fill with dark gray stroke and bold white left-aligned text

Layout

Single-column selection screen with question title at top and dense list of 7 age bracket option pills below.

Notes

No bottom 'Skip' button present on this screen, unlike screens 0 and 2.