Babbel - Language Learning

Colors

• #000000background-black · screen background
• #FFFFFFtext-primary · headline · helper text · legal text · input outline
• #505050text-placeholder · password placeholder text
• #2B2B2Bbutton-disabled · sign up button background
• #4D4D4Dbutton-text-disabled · sign up button text

Type

• page titleserif · 80px · bold · #FFFFFF
• helper textsans-serif · 32px · regular · #FFFFFF
• action button labelsans-serif · 38px · bold · #4D4D4D
• legal agreement bodysans-serif · 32px · regular · #FFFFFF

Elements

• Back Navigation Button · icon button

  Top-left navigation chevron icon · White monochrome glyph

• Password Input Field · text input

  Full width rounded rectangle beneath the headline · White rounded outline border, lock icon on left, grey placeholder text

• Password Constraint Note · label

  Left-aligned below password input field · White regular text reading 'Must have at least 6 characters.'

• Sign Up Button · button

  Full-width pill button centered below helper note · Solid dark grey fill (#2B2B2B) in inactive state

• Terms and Privacy Agreement Block · disclaimer text

  Two centered text lines with underlined links for 'Terms & Conditions' and 'Privacy Policy' · White body text with bold underlined hyperlinks

Layout

Single-column form layout on pure black background with extensive empty lower space since the keyboard is dismissed.

Notes

Same visual language as screens 1 and 2, but keyboard is closed leaving lower half of screen open.