Babbel - Language Learning

Colors

• #000000canvas-black · background
• #080808card-surface · language card background
• #2B2A29card-border · language card outline border
• #FFFFFFtext-primary · language label
• #CBC9C4text-secondary · user count number

Type

• card_language_nameSF Pro Text · 34px · 600 · #FFFFFF
• card_stats_labelSF Pro Text · 30px · 400 · #CBC9C4

Elements

• Navigation Bar · app_bar

  Top edge pinned, contains back chevron icon at top left · Minimalist header with no background division

• Language Selection Grid · grid

  3-column scrolling grid with ~22px horizontal and vertical gutters · Consistent dark cards with rounded corners, subtle grey 1px borders, circular national flags, title and follower stats

Layout

Scrolled view of the 3-column language catalog grid extending below the fold.

Notes

Continuation of screen 3; bottom-most row shows 2 items centered or left-aligned.