Babbel - Language Learning

Colors

• #141414canvas-black · screen background
• #0D0D0Ditem-bg · language item button background
• #FFFFFFselected-border · active item border
• #262524unselected-border · inactive item border
• #FFFFFFtext-primary · title · item text

Type

• screen_headingBodoni MT · 92px · 400 · #FFFFFF
• list_item_labelSF Pro Text · 42px · 500 · #FFFFFF

Elements

• Back Button · icon_button

  Top-left area, ~160px from top, ~45px left margin · White left arrow / chevron

• Selected Language Card · list_item / radio_card

  Full width with ~45px side margins, height ~165px · Deep black pill/rounded card with crisp 2px solid white border, circular flag at left, white text

• Unselected Language Cards · list_item

  Vertical stack, ~20px gap between cards, height ~165px each · Deep black rounded card with subtle 1px border (#262524), circular flag icon, white label

Layout

Vertical list view modal/page allowing single selection of source spoken language.

Notes

Active/selected item distinguished purely by bright white border outline.