Babbel - Language Learning

Colors

• #000000Modal Background Black · bottom sheet background
• #FFFFFFPrimary White · bell icon · headline text · primary button fill · secondary button border · secondary button text
• #EBEBF5Subtext Gray · body copy
• #8E8E93Dismiss Gray · drag handle
• #000000Button Label Black · primary button text label

Type

• modal_titleInter · 60px · 700 · #FFFFFF
• modal_bodyInter · 34px · 400 · #EBEBF5
• primary_button_labelInter · 36px · 600 · #000000
• secondary_button_labelInter · 36px · 600 · #FFFFFF

Elements

• drag_handle · handle

  Centered at the very top of the bottom sheet, width 100 px, height 10 px · Subtle rounded pill in dark gray

• close_button · icon_button

  Top right corner of sheet · White 'X' mark glyph

• notification_icon · icon

  Positioned mid-screen above title, size ~90x90 px · Line-art ringing bell in solid white stroke

• remind_me_button · button

  Lower area full width pill button, height approx 110 px · Solid white background with black text

• maybe_later_button · button

  Stacked directly below primary button with 24 px gap, height approx 110 px · Transparent background with white outline and white text

Layout

Bottom-anchored modal / permission sheet covering roughly 75% of viewport with drag indicator and action buttons pinned near base.

Notes

Modal uses sans-serif for title ('Stay on track') rather than the serif style seen on earlier survey screens.