Babbel - Language Learning

Colors

• #000000canvas-black · screen background
• #E53E14brand-orange · emphasized word in headline · progress bar segment · primary button fill
• #2C2C2Eprogress-track · progress bar track
• #282726card-border-default · unselected card outline
• #FFFFFFcard-border-selected · selected card outline
• #FFFFFFtext-primary · title · option label text · button label
• #CBC9C4text-secondary · subheading limit instruction

Type

• screen_headingBodoni MT · 90px · 400 · #FFFFFF
• screen_heading_accentBodoni MT · 90px · 400 · #E53E14
• subtitle_instructionSF Pro Text · 38px · 400 · #CBC9C4
• option_labelSF Pro Text · 38px · 600 · #FFFFFF
• cta_button_labelSF Pro Text · 42px · 600 · #FFFFFF

Elements

• Progress Indicator · progress_bar

  Centered horizontally near top, ~350px wide, ~10px tall · Two-segment track: ~35% orange fill on dark grey track

• Goal Option Cards · checkbox_row

  Vertical stack with ~16px gap, height ~145px to ~175px (multi-line supported) · Dark rounded cards with 1px grey border (#282726); selected item features bright 2px solid white border with white checkmark box

• Next Action Button · button

  Fixed at bottom, full width with ~45px side margins, height ~130px · Vibrant orange pill button with centered bold white text

Layout

Goals survey screen following the same template as Screen 6, highlighting 'español' in italic serif orange in title.

Notes

Font choice for headline mixes roman with italic serif accent for the foreign language name.