BRAND Duolingo 2026 · Page: login

HEADER brand: Duolingo; design_date: 2026-10; page_type: login; variants: sign-up (same sheet with "Create your profile", age, name, email, password fields), forgot password example_urls: https://www.duolingo.com/log-in ; evidence: measured on https://www.duolingo.com/log-in (English) 2026-10-01 from the sign-in modal CSS module and computed styles unless marked purpose: sign an existing learner in with email/username and password or a social account skeleton: full-screen white sheet over the home page; one centered 375px column; height fits the viewport (~780px); sidebar: none overrides: button radius 16px inside the sheet; the submit button is blue (macaw), not green SECTIONS S1 sheet chrome - leave or switch to sign-up background: #ffffff full screen (the dim overlay rgba(0,0,0,0.3) behind it is fully covered); height: 100vh elements: close "×" icon top-left (~18px, #afafaf, at 30px from the edges (est)); top-right a white stroke button "SIGN UP" 93x50 (15px 700 uppercase #1cb0f6, 2px #e5e5e5 border with 4px bottom, radius 16px) at right 30px, top 30px responsive: same positions on mobile S2 form / centered column - sign in background: #ffffff; padding: column starts at y ~138 on desktop (vertically centered (est)); margin-top 40px below 700px layout: 375px wide (330px on mobile, 30px side margins), text-align start, stack elements: title "Log in" 26px 700 #3c3c3c centered, ~15px below; input "Email or username" 375x48; 12px gap; input "Password" 375x48 with "FORGOT?" 15px 700 uppercase #afafaf inside at the right; 24px gap; LOG IN solid juicy button 375x50 (#1cb0f6 face, #1899d6 lip, white label, radius 16px); 20px; "OR" divider (2px #e5e5e5 bars, 15px 700 #afafaf label); 20px; three white stroke buttons 375x50, 15px apart: "SIGN IN WITH GOOGLE" (#4285f4 label, color Google G icon), "SIGN IN WITH FACEBOOK" (#3b5998 label, f icon), "SIGN IN WITH APPLE" (#4b4b4b label, black apple icon); icons ~20px, 8px before the label, label+icon centered inputs: wrapper #f7f7f7 bg, 2px #e5e5e5 border, radius 12px; text 20px 500 #4b4b4b, placeholder #777777; focus-within border #1cb0f6 (instant) S3 legal - consent text padding: 40px top, 10px bottom; centered elements: "By signing in to Duolingo, you agree to our Terms and Privacy Policy." 14px/20px #afafaf with bold 700 links in the same grey; 20px below, the reCAPTCHA Enterprise notice in the same style responsive: wraps to 3-4 lines on mobile PAGE COMPONENTS input with inline action: Overview input + an uppercase 15px #afafaf text button inside the right edge social sign-in buttons: Overview button-stroke with provider label colors and a leading logo INTERACTIONS - id: login.submit: LOG IN validates on submit; errors appear as a 14px/18px #ff4b4b centered message above the button and the related field (inf); while submitting the button stays pressed (inf) - id: field.focus: border #e5e5e5 -> #1cb0f6, instant; caret #1cb0f6 - id: sheet.close: × returns to the home page; Escape closes (inf) STATES error: red #ff4b4b message, field border unchanged (est) loading: button loading state (inf) SCREENSHOTS - file: duolingo_2026_login_d1440_full.jpg shows: log-in sheet at 1440x900: × top-left, SIGN UP top-right, "Log in" title, two 48px grey inputs, blue LOG IN with lip, OR divider, three social stroke buttons, grey legal text source: live https://www.duolingo.com/log-in 2026-10-01 key values: column 375px at x 525; inputs #f7f7f7 2px #e5e5e5 radius 12px; LOG IN #1cb0f6 / #1899d6; radius 16px; legal 14px #afafaf do not copy: provider logos (use generic icons) - file: duolingo_2026_login_d1440_focus.jpg shows: email field focused: border #1cb0f6 - file: duolingo_2026_login_m390_full.jpg shows: log-in sheet at 390 @2x: column 330px with 30px margins, same order