Babbel - Language Learning

Colors

• #000000background-black · screen background
• #FFFFFFtext-primary · headline · disclaimer body · links · input outline
• #505050text-placeholder · input placeholder text
• #E04F2Bcursor-accent · input caret
• #2B2B2Bbutton-disabled · continue button background
• #4D4D4Dbutton-text-disabled · continue button text

Type

• page titleserif · 80px · bold · #FFFFFF
• input placeholdersans-serif · 38px · regular · #505050
• alternate signup linksans-serif · 36px · bold · #FFFFFF
• legal disclaimer bodysans-serif · 30px · regular · #FFFFFF

Elements

• Back Navigation Button · icon button

  Left aligned below status bar · White chevron pointing left

• Email Input Field · text input

  Full width rounded rectangle beneath the headline · White outline border, mail envelope icon on left, active red cursor and placeholder text

• Continue Button · button

  Full width pill button below input field · Dark grey fill with muted grey disabled text label

• More Signup Options Link · text link

  Centered horizontally below continue button · Bold underlined white text

• Legal Notice Text Box · disclaimer text

  Centered multiline text paragraph sitting above keyboard · White body text with underlined support email link

• Soft Keyboard · keyboard overlay

  Docked at bottom of screen with 'Passwords' bar · iOS email input layout with '@' key

Layout

Vertical signup form centered in upper viewport with legal disclosures sitting above an active onscreen keyboard.

Notes

Includes underlined hyperlink styles for legal references.