Babbel - Language Learning

Colors

• #000000canvas-black · background
• #080808card-surface · card backgrounds
• #2B2A29card-border · card outline borders
• #FFFFFFtext-primary · headline · item labels
• #CBC9C4text-secondary · subtitle · section headers · learner counts

Type

• page_titleBodoni MT · 80px · 400 · #FFFFFF
• page_subtitleSF Pro Text · 35px · 400 · #CBC9C4
• section_headerSF Pro Text · 42px · 500 · #CBC9C4
• input_card_labelSF Pro Text · 40px · 500 · #FFFFFF
• grid_card_titleSF Pro Text · 34px · 600 · #FFFFFF
• grid_card_counterSF Pro Text · 30px · 400 · #CBC9C4

Elements

• Back Navigation Button · icon_button

  Top-left header area, ~160px from top, left margin ~45px · White chevron-left icon, no background fill

• Native Language Selector · dropdown_row / card

  Full width with ~45px horizontal padding, height ~170px · Dark card with subtle 1px border (#2B2A29), round flag icon on left, right chevron

• Target Language Grid · grid

  3-column grid with ~22px gaps, each card ~340px wide by ~420px high · Rounded rectangle cards with thin 1px outline (#2B2A29), centered circular flag, bold text, and user icon with metric

Layout

Onboarding language selection screen featuring top headline, native language picker row, and 3-column target language grid below.

Notes

Display font has high serif styling; flags are circular standard SVG/PNG flag icons.