Babbel - Language Learning

Colors

• #000000background-black · screen background
• #FFFFFFtext-primary · headline text · login link underline text · input outline
• #505050text-placeholder · input placeholder text
• #E04F2Bcursor-accent · text cursor
• #2B2B2Bbutton-disabled · inactive continue button fill
• #4D4D4Dbutton-text-disabled · inactive continue button label
• #CCCCCCtext-secondary · supporting prompt text
• #1A1A1Ckeyboard-surface · system keyboard background

Type

• page titleserif · 80px · bold · #FFFFFF
• input placeholdersans-serif · 38px · regular · #505050
• action button labelsans-serif · 38px · bold · #4D4D4D
• subtext linksans-serif · 34px · regular · #FFFFFF

Elements

• Close Navigation Button · icon button

  Top-left cross icon aligned with top navigation area · Monochrome white vector cross icon

• Name Input Field · text input

  Full-width rounded rectangle below headline, containing left person icon, orange cursor, and placeholder · White rounded border outline with transparent background fill, white user glyph icon

• Continue Button · button

  Full-width pill button centered below the input field · Disabled state with solid dark grey (#2B2B2B) fill and muted grey text

• Login Link Row · text link

  Centered horizontally below continue button · Regular white text with underlined bold 'Log in' anchor

• Soft Keyboard · keyboard overlay

  Docked at screen bottom with suggestion bar and QWERTY layout · Native iOS dark theme virtual keyboard

Layout

Vertical form layout anchored to the upper-middle area with software keyboard occupying bottom ~45% of view.

Notes

Appears to be a step in account onboarding. Serif headline is consistent with earlier screens.