Babbel - Language Learning

Colors

• #000000black-base · screen background behind sheet
• #1C1B1Asheet-surface · bottom sheet card background
• #FFFFFFprimary-button-fill · primary action button background
• #000000primary-button-text · primary button label
• #FFFFFFtext-primary · modal title · link text
• #D8D6CEtext-secondary · modal body copy
• #E53E14brand-orange · background display letters

Type

• modal_titleSF Pro Display · 54px · 700 · #FFFFFF
• modal_bodySF Pro Text · 35px · 400 · #D8D6CE
• button_labelSF Pro Text · 40px · 600 · #000000
• text_linkSF Pro Text · 38px · 600 · #FFFFFF

Elements

• Consent Bottom Sheet · modal_sheet

  Bottom anchored, full screen width, covering ~50% of viewport height · Dark charcoal rounded card with subtle top corner radius (~44px) and soft shadow

• Accept All Button · button

  Full width inside sheet padding, height ~126px · Pill-shaped solid white button with centered bold black text

• Manage Settings Link · text_button

  Centered below primary button, ~60px vertical margin · Underlined white link text

Layout

Consent / privacy overlay presenting a dark bottom sheet over the muted/dimmed multilingual graphic background.

Notes

System typography aligns closely with Apple SF Pro.