Pimsleur | Language Learning

Colors

• #FFFFFFBackground White · Screen background fill · Text field interior
• #111111Header Black · Screen title text · Field labels · Back icon stroke
• #1D3EF2Brand Blue · Highlighted text in subtitle · Active checkbox fills · CTA button background
• #1C274CField Border Navy · Text input boundary stroke
• #8A8F9EMuted Grey · Input placeholder text · Password requirements helper text · Eye icon stroke
• #5A5F6ELegal Body Text · Consent agreement checkbox label text

Type

• Screen TitleAvenir · 52px · 700 · #111111
• SubtitleAvenir · 34px · 500 · #5A5F6E
• Field LabelAvenir · 36px · 700 · #111111
• Input Text / PlaceholderAvenir · 34px · 400 · #8A8F9E
• Helper RequirementsAvenir · 28px · 500 · #8A8F9E
• Legal Body LabelAvenir · 26px · 400 · #5A5F6E
• Primary Action Button TextAvenir · 36px · 600 · #FFFFFF
• Divider LabelAvenir · 34px · 600 · #111111

Elements

• Back Button · icon_button

  Top left below status bar, height ~60px, width ~60px · Thin black angled chevron pointing left

• Email Input Field · input_text

  Full width with side margin ~90px, height ~130px, below label · White background with a 3px dark navy border stroke

• Password Input Field · input_text

  Full width with side margin ~90px, height ~130px, below label · White background with a 3px dark navy border and trailing obscured-eye icon

• Terms Checkboxes · checkbox

  Left-aligned, ~40x40px square controls paired with multiline body text · Filled vibrant blue square with white checkmark

• Sign up with Email Button · button

  Full width horizontal pill, height ~110px, centered horizontally · Solid brand blue fill with white bold text

• Social Sign In Row · container

  Horizontal row of three brand icons centered under divider text · Colored Gmail envelope, circular blue Facebook icon, and solid black Apple silhouette

Layout

Single vertical scrolling page with a fixed top navigation bar (back chevron, title, subtitle), stacked form fields, helper lists, terms checkboxes, and lower social sign-in grouping.

Notes

Links in checkbox labels are styled with an underline.