Babbel - Language Learning

Colors

• #000000background-black · screen background
• #FFFFFFtext-primary · headline text · option label text · back chevron
• #383838border-outline · option pill borders · progress bar inactive track
• #E04F2Baccent-orange · progress bar active fill

Type

• page titleserif · 80px · bold · #FFFFFF
• option item textsans-serif · 36px · bold · #FFFFFF

Elements

• Navigation Bar · header

  Top row containing a back chevron icon aligned left, beneath system status area · White angled bracket / chevron icon against black background

• Progress Indicator · progress bar

  Centered horizontally near top below status bar, thin horizontal capsule bar ~370px wide · Segmented rounded bar with active orange-red segment on left and dark grey track on right

• Survey Option List · list / button group

  Vertical column of 8 stacked full-width rounded rect buttons with ~18px vertical spacing · Dark transparent fill with subtle grey 1px outline stroke, left-aligned bold white text with ~48px left padding

Layout

Single-column survey flow screen with fixed back navigation and progress tracker at top, followed by large serif title and vertical stack of multiple-choice selection pills.

Notes

Title typography appears to be a high-contrast modern editorial serif such as Cheltenham, Caslon, or a bespoke brand serif. Low confidence on precise font.