Babbel - Language Learning

Colors

• #000000canvas-black · screen background
• #2C2C2Eprogress-track · progress bar background track
• #E53E14progress-fill · progress bar fill · primary action button fill
• #282726card-border-default · unselected card outline
• #FFFFFFcard-border-selected · selected card outline
• #FFFFFFtext-primary · heading · option label text · primary button text
• #CBC9C4text-secondary · subheading

Type

• question_titleBodoni MT · 90px · 400 · #FFFFFF
• instruction_subtitleSF Pro Text · 38px · 400 · #CBC9C4
• option_labelSF Pro Text · 38px · 600 · #FFFFFF
• cta_button_labelSF Pro Text · 42px · 600 · #FFFFFF

Elements

• Progress Bar · progress_indicator

  Centered horizontally near top, ~350px wide, ~10px tall · Rounded horizontal line with orange filled segment at left (~25%)

• Motivation Option Row (Unselected) · checkbox_row

  Full width with ~45px side padding, height ~145px, ~16px gap · Dark rounded container with 1px muted border (#282726), leading line icon, trailing empty square checkbox

• Motivation Option Row (Selected) · checkbox_row

  Full width with ~45px side padding, height ~145px · Same dark container highlighted with crisp 2px solid white border, leading line icon, trailing solid white checkbox with checkmark

• Bottom CTA Button · button

  Bottom-pinned with ~45px side margins, ~50px bottom padding, height ~130px · Pill-shaped solid orange fill with centered white 'Next' text

Layout

Multi-select survey step with top progress indicator, centered headline + subtitle, vertical choice list, and fixed bottom action button.

Notes

Checkboxes have ~8px corner radii on rounded rectangular outline.