BRAND Duolingo 2026 · Overview

HEADER brand: Duolingo; domain: duolingo.com; industry: language learning app (logged-out marketing and sign-in pages); design_date: 2026-10 captured: https://www.duolingo.com/ (home, "splash" page) and https://www.duolingo.com/log-in, English UI (uiLanguage en, Accept-Language en-US), 2026-10-01. The landing has no country-specific content for the US apart from the app store buttons and the free-trial length; the site picks the UI language from Accept-Language (a browser in another language gets that translation) evidence: measured from the CSS-module stylesheets (app-f2ef02f8.css, 4779-c36ad395.css and the lazy chunks), the color palette and component code in the webpack bundles (app, 4779) and the Lottie JSON files of the splash page, then checked against computed styles and screenshots of the live pages, unless marked note: everything on the logged-out pages uses the "-always-light" color tokens, so the landing stays light even when the app theme is dark. Class names are hashed CSS modules (e.g. _1VYyp); design tokens are named after animals (owl, macaw, eel, swan...) style_tags: flat, soft-3d (illustration only), m3-expressive (springy scroll motion) viewports: desktop 1440, mobile 390; breakpoints (min-width): 700 (input/selection rules), 768 tablet, 1080 desktop, 1440 wide pages: BRAND Duolingo 2026 · Page: home; BRAND Duolingo 2026 · Page: login recipes: BRAND Duolingo 2026 · Recipe: juicy-button; BRAND Duolingo 2026 · Recipe: anytime-scroll-scene; BRAND Duolingo 2026 · Recipe: duo-cta-scrub rebuild check: passed 2026-10-01 (details at the end) RECOGNITION KEYS 1 Chunky "juicy" buttons: flat fill, 12px radius, a solid 4px bottom lip in a darker shade of the same hue (owl green #58cc02 with #58a700 lip), uppercase 15px bold labels with 0.8px tracking; pressing drops the button 4px and removes the lip. 2 Duolingo green #58cc02 is the brand color for primary buttons, feature headlines, the logo and the whole footer band; blue #1cb0f6 is the secondary action color (stroke-button labels, links, the Log in button). 3 Two typefaces: a heavy rounded display face (Feather Bold) in lowercase for big marketing headlines ("free. fun. effective.", 48-64px), and a rounded grotesk (DIN Next Rounded, "duolingo-sans") for everything else. 4 Flat, outline-free illustrations of Duo the green owl and a diverse cast of round-headed characters, animated with Lottie: each scene plays once, then loops a short segment; only the scene nearest the viewport center plays. 5 No shadows and no gradients in UI: depth comes from 2px light-grey (#e5e5e5) borders with a thicker 4px bottom edge on white cards, inputs and secondary buttons. 6 Page bands change color as you scroll: white hero and features -> pale blue #ddf4ff fading in behind "learn anytime, anywhere" -> deep navy #100f3e Super band -> white -> green #58cc02 wave and footer. 7 Generous whitespace: one idea per screen, 988px content column, 530px square illustration beside a short text block, sections 96-185px apart. GUARDRAILS no drop shadows or glows on cards or buttons (the only "shadow" is the solid lip); no gradients in UI (gradients exist only inside the Super wordmark image and illustrations); no pill buttons (radius 12-16px); no thin or light font weights (500 minimum, headings 700); no uppercase headlines (uppercase is only for button labels, carousel labels and the site-language control); no sentence-case display headlines in Feather (they are all lowercase); no photography, stock images or device-mockup screenshots (only flat illustration); no visible focus ring (the site sets outline: none globally); no hover color swaps (hover is a brightness filter); no dark backgrounds except the Super band; older duolingo.com elements not in this design: the 2019-2022 splash with a static Duo-and-friends illustration on white, the green "Duolingo" wordmark without the owl head, and the "The free, fun, and effective way to learn a language!" hero headline (ext) TOKENS /* color: palette (Duolingo animal names; light value, dark-theme value in the comment) */ --color-owl: #58cc02; /* dark #93d333 */ --color-tree-frog: #58a700; /* dark #79b933 */ --color-turtle: #a5ed6e; /* dark #5f8428 */ --color-sea-sponge: #d7ffb8; /* dark #202f36 */ --color-macaw: #1cb0f6; /* dark #49c0f8 */ --color-whale: #1899d6; --color-humpback: #2b70c9; --color-narwhal: #1453a3; --color-blue-jay: #84d8ff; /* dark #3f85a7 */ --color-iguana: #ddf4ff; /* dark #202f36 */ --color-manta-ray: #042c60; --color-deep-martin: #100f3e; --color-eclipse: #000437; --color-cosmos: #3c4dff; --color-nebula: #3f22ec; --color-starling: #5c6cfc; --color-eel: #4b4b4b; /* dark #f1f7fb */ --color-wolf: #777777; /* dark #dce6ec */ --color-hare: #afafaf; /* dark #52656d */ --color-swan: #e5e5e5; /* dark #37464f */ --color-polar: #f7f7f7; /* dark #202f36 */ --color-snow: #ffffff; /* dark #131f24 */ --color-black-text: #3c3c3c; --color-black: #000000; --color-cardinal: #ff4b4b; /* dark #ee5555 */ --color-fire-ant: #ea2b2b; --color-flamingo: #ffb2b2; --color-walking-fish: #ffdfe0; --color-bee: #ffc800; --color-camel: #e7a601; --color-fox: #ff9600; --color-lion: #ffb100; --color-duck: #fbe56d; --color-canary: #fff5d3; --color-beetle: #ce82ff; --color-betta: #9069cd; --color-peacock: #00cd9c; --color-crab: #ff7878; --color-starfish: #ff86d0; /* color: roles */ --color-primary: #58cc02; --color-primary-lip: #58a700; --color-on-primary: #ffffff; --color-secondary: #1cb0f6; --color-secondary-lip: #1899d6; --color-text: #3c3c3c; /* body default */ --color-heading: #4b4b4b; --color-text-muted: #777777; --color-text-faint: #afafaf; --color-surface: #ffffff; --color-surface-alt: #f7f7f7; --color-surface-tint: #ddf4ff; --color-surface-dark: #100f3e; --color-surface-brand: #58cc02; --color-border: #e5e5e5; --color-link: #1cb0f6; --color-focus: #1cb0f6; /* input border on focus */ --color-error: #ff4b4b; --color-success: #58cc02; --color-overlay: rgba(0,0,0,0.3); /* font */ --font-display: feather, "duolingo-sans", sans-serif; --font-text: "duolingo-sans", sans-serif; /* type scale: size / line-height / weight / tracking; values mobile | >=768 | >=1080 */ --type-display: 36px | 48px | 64px /normal/700/-0.02em; /* feather, lowercase: "learn anytime, anywhere", "learn a language with duolingo" */ --type-section-title: 36px | 48px /normal/700/0; /* feather, lowercase, feature rows */ --type-hero-h1: 32px/normal/700/0; /* duolingo-sans, all sizes */ --type-h2-app: 24px/26px/700; --type-modal-title: 26px/normal/700; --type-body-lead: 17px/24px/500/0; /* feature text */ --type-body: 17px/20px/500; /* body default */ --type-input: 20px/28px/500; /* --text-body-size 1.25rem */ --type-small: 14px/20px/500 | bold links 700; --type-button: 15px/1.2/700/0.8px uppercase; --type-label-caps: 15px/normal/700/0.8px uppercase; /* carousel names, site language, FORGOT? */ --type-footer-heading: 19px/1.4/700; --type-footer-link: 15px/22px/700; --type-footer-small: 13px/16px/700; /* design-system text tokens (app, on :root): pageTitle 40/44 | 32/36 700; heading 28/32, 24/32, 20/24, 16/20 700; body 20/28 500; caption 16/24 500; label 24/24 and 16/16 700 uppercase 0.04em */ /* space and layout */ --space: 8 10 12 15 16 20 24 32 40 48 64 80 96 140 185; --container: 988px; --container-wide: 1090px; /* language carousel */ --container-max: 1440px; /* final CTA */ --margin-mobile: 15px; --margin-tablet: 40px; --section-pad: 96px; /* top and bottom of feature groups, all breakpoints */ --feature-gap: 96px (mobile, between rows) | 0 (>=1080, rows touch, each 530px tall); /* shape */ --radius-button: 12px; /* 16px inside the login sheet */ --radius-input: 12px; --radius-popover: 12px; --radius-card: 16px; --radius-menu-item-hover: 7px; --radius-checkbox: 5px; --border: 2px solid #e5e5e5; --lip: 4px; /* solid buttons: box-shadow 0 4px 0 <lip color> on the ::before layer; stroke buttons: 2px border + 4px bottom border */ /* depth */ --shadow-1: none; --shadow-2: none; --blur-glass: none; /* motion */ --ease-standard: ease; /* CSS default on filter transitions */ --ease-topbar: cubic-bezier(0.22,1,0.36,1); --ease-carousel: ease-in-out; --dur-hover: 200ms; /* filter */ --dur-topbar-border: 300ms; --dur-topbar-slide: 400ms; --dur-carousel: 500ms; --spring: spring(170, 26, 1); /* stiffness, damping, mass; JS spring used for scroll-scrubbed Lottie frames and the background fade */ --lottie-fps: 30; /* focus */ --focus-ring: none (outline: none on *, button, button:focus, input); inputs show focus by a #1cb0f6 border dark_mode: none on logged-out pages (all "-always-light" tokens); the logged-in app has html[data-duo-theme=dark] using the dark values in the comments above FONTS display: Feather Bold (custom Duolingo typeface, proprietary), loaded as FontFace "feather" weight 700 (weight 900 file for ru, uk, vi); used only for big lowercase marketing headlines. Alternative: Nunito 900 (OFL), lowercase, letter-spacing -0.02em; or Baloo 2 800 for a rounder look (est). text: "duolingo-sans" = DIN Next Rounded (Monotype, commercial) (ext), FontFace weights 400 (regular file used for 500) and 700, plus italics; also Noto Sans Math for math. Alternative: Nunito (OFL) one step heavier than the brand weight: 500 -> Nunito 600 for body, 700 -> Nunito 800 for headings and labels (Nunito 700 looks visibly thinner than DIN Next Rounded Bold); Nunito runs ~5% wider, so use 0.5px instead of 0.8px tracking on uppercase labels (est, from the rebuild check). icons and flags: custom SVG sprites (flag sprite 82x66 cells), no icon font. TYPOGRAPHY RULES Marketing headlines (feature titles, "learn anytime, anywhere", final CTA) are Feather, lowercase, short (2-4 words), left aligned in feature rows and centered in full-width bands; color is owl green on white, manta-ray navy #042c60 on the pale blue band. The hero H1 is NOT Feather: duolingo-sans 700 32px, #4b4b4b, centered, sentence case, 2 lines, width 480px. Body copy is duolingo-sans 500 17px/24px in wolf grey #777777, max 473px; inline links inside it are #1cb0f6 bold. Every button label is uppercase 15px 700 with 0.8px tracking; never sentence case in buttons (except the two-line app store badges, which are sentence case 14/17 + 17/20). Default body color is #3c3c3c on white; secondary text #777777; legal and helper text #afafaf. Numbers and text: no tabular figures, no text-wrap balance. COLOR RULES Page: white #ffffff dominates (~70%); owl green #58cc02 ~15% (buttons, headlines, the final wave and the whole footer); pale blue #ddf4ff fades in behind the lower features and the "anytime" band; deep navy #100f3e for the one Super band; navy #042c60 only for the "anytime" headline. Green is for primary actions and brand headlines; blue #1cb0f6 is for secondary actions and links (stroke-button labels, Log in, "research shows that it works"); grey #e5e5e5 for every border and divider. Lips use the darker partner of the fill: owl #58cc02 -> tree-frog #58a700; macaw #1cb0f6 -> whale #1899d6; white -> swan #e5e5e5; white on navy -> rgba(255,255,255,0.5). Footer: green #58cc02 background, headings sea-sponge #d7ffb8, links turtle #a5ed6e, divider 2px turtle. No gradients in UI; illustrations carry all the extra colors (orange, pink, purple, yellow coins). LAYOUT container: 988px centered at >=1080 (topbar, hero row, feature rows, footer sitemap); 15px side padding on mobile, 40px on tablet; the language carousel is 1090px; the final CTA scene is max 1440px with green fill extending to the edges grid: no column grid; flex rows. Feature row at >=1080: text block (max 503px) + 101px gap + 530x530 illustration, alternating sides (row-reverse on rows 2 and 4); below 1080 everything stacks centered (text above the illustration) section rhythm: hero = full viewport (min-height 100svh) with the language bar at its bottom; feature group padding 96px top and bottom, rows 530px tall and touching at >=1080, 96px apart on mobile; full-viewport bands for "anytime" and Super (min-height 100vh); final CTA flush into the green footer density: airy; alignment: centered hero and bands, left-aligned text in feature rows; composition: alternating rows of illustration + text, then full-bleed color bands SHAPE AND DEPTH radius: 12px buttons, inputs, popover (15px popover default in the app), app store badges; 16px buttons in the login sheet and app cards; 7px hover highlight in menus; 5px checkbox borders: 2px #e5e5e5 on stroke buttons (with a 4px bottom), inputs, popovers, the language bar (top and bottom), the scrolled topbar (bottom); 2px turtle #a5ed6e footer divider shadows: none; the "3D" look is the solid lip (box-shadow 0 4px 0 lipcolor on solid buttons, 4px bottom border on stroke buttons) materials and textures: none (no blur, no grain) COMPONENTS button-primary (juicy solid, owl): height 50px, padding 0 16px, radius 12px; label white 15px/1.2 700 uppercase 0.8px, centered, nowrap; the fill sits on a ::before layer (#58cc02) with box-shadow 0 4px 0 #58a700, plus a transparent 4px bottom border so the box is 50px including the lip; width 330px max in heroes (full width on mobile) hover (hover-capable devices): filter brightness(1.1) -> #61e002 look; transition filter 200ms ease active: translateY(4px), lip removed (box-shadow none); instant (the lip transition variable is unset on the splash; 100ms linear inside lessons) focus-visible: none (outline none); keyboard focus is not visible disabled: fill #e5e5e5, label #afafaf, no hover topbar size: height 44px, padding 0 20px (133x44 "GET STARTED") Recipe juicy-button button-secondary-blue (solid macaw): same anatomy, fill #1cb0f6, lip #1899d6, white label (the LOG IN button; the default "solid" color of the design system) button-stroke (white): height 50px, radius 12px, transparent box with border-width 2px 2px 4px; the ::before layer is white #ffffff with a 2px #e5e5e5 border and box-shadow 0 2px 0 #e5e5e5 (reads as a 2px outline with a 4px bottom); label 15px 700 uppercase, color #1cb0f6 ("I ALREADY HAVE AN ACCOUNT", "CERTIFY YOUR ENGLISH", "SIGN UP") or the brand color of a social provider hover: filter brightness(0.9) (the white turns light grey #e6e6e6), 200ms; active: translateY(2px), bottom edge removed; disabled: label #afafaf button-on-dark (Super band): fill #ffffff, lip rgba(255,255,255,0.5), label #000437 eclipse; hover brightness(1.1) app store badge: stroke button 12px radius, padding 9.5px 14px, gap 10px, 34px logo icon at left, two-line sentence-case label (14px/17px "Download on the" + 17px/20px 700 "App Store"), white fill, #e5e5e5 border, #4b4b4b text; side by side 24px apart (stacked 16px apart on mobile) text link: #1cb0f6 700, no underline; hover filter brightness(1.2), instant site-language control: unstyled button, "SITE LANGUAGE: ENGLISH" 15px 700 uppercase 0.8px #afafaf + 14px chevron 8px after; hover brightness(1.1) 200ms; opens the language popover popover (site language): 412px wide (430px declared minus offsets), white, 2px #e5e5e5 border, radius 12px, padding 15px, 8px below the trigger, right aligned; two columns of 189x42 rows: 24px flag + 15px gap + native language name 15px 500 #777777; row hover bg #e5e5e5 radius 7px, instant; closes on outside click input: wrapper bg #f7f7f7, 2px #e5e5e5 border, radius 12px, height 48px; text 20px/28px 500 #4b4b4b, padding 8px 14px; placeholder #777777; caret #1cb0f6; focus-within: border #1cb0f6, instant; disabled text #afafaf; an inline uppercase action ("FORGOT?" 15px 700 #afafaf) can sit at the right inside the field error text: #ff4b4b 14px/18px centered above the submit button checkbox: 20x20, 2px #e5e5e5 border, radius 5px; checked: border #1cb0f6 and a 3px #1cb0f6 check mark divider "OR": two 2px #e5e5e5 bars with "OR" 15px 700 uppercase #afafaf between, 20px vertical margin language carousel: Page: home S2 loading: Lottie scenes show a static SVG/PNG placeholder of their first frame until the animation's first frame renders; no skeletons or spinners on the landing toast, tooltip, modal: n/a on the landing (the sign-in "modal" is a full-screen sheet, Page: login) GLOBAL CHROME header (topbar): position fixed, top 0, full width, z-index 2, white #ffffff, height 70px + 2px bottom border (transparent at scroll 0, #e5e5e5 once the page is scrolled, border-color 300ms); content row 988px wide at >=1080 (padding 0 40px at 768-1079, 0 15px mobile) logo: Duo-head + "duolingo" wordmark in #58cc02, 179x42 (161x38 <768) at the left right side, two states: while the hero GET STARTED button is visible (IntersectionObserver with rootMargin -72px top), the site-language control (>=1080 only); once that button scrolls out, a 44px owl GET STARTED button replaces it; below 1080 the topbar shows only the centered logo until the hero button scrolls out, then logo (cropped to the 40px owl head on mobile) left and GET STARTED right hide: the whole topbar slides up (translateY(-100%), 400ms cubic-bezier(0.22,1,0.36,1)) while the "learn anytime, anywhere" band is within 96px of the top and until the Super band has scrolled past; it slides back after mobile menu: none (no hamburger; logged-out pages have only the logo and the CTA) footer: green #58cc02; sitemap 988px, 5 columns of 178px with 24px gaps (About us, Products, Apps, Help and support, Privacy and terms + Social stacked), padding 96px 0 64px; column headings 19px/1.4 700 #d7ffb8, 12px below them links 15px/22px 700 #a5ed6e, 10px apart; then a 2px #a5ed6e full-width rule; then "Site language:" 15px/22px 700 #d7ffb8 and an inline list of all UI languages 13px/16px 700 #a5ed6e with 8px 12px margins, padding 40px 0 64px; tablet 3 columns of 216px, mobile 1 column (max 216px, padding 96px 32px 64px) other: OneTrust cookie banner (third party, not shown for this visitor); Android "install" banner on Android Chrome only; reCAPTCHA Enterprise badge hidden (text notice on the login sheet) IMAGERY AND ICONS hero media: a 424x424 Lottie of Duo and six characters tumbling around a green phone with gold coins (1080x1080, 30fps), static SVG placeholder first illustration: flat vector, no outlines, soft rounded shapes, bright saturated palette (owl green, macaw blue, fox orange, bee yellow, beetle purple, cardinal red), simple two-tone shading, round heads with dot eyes; the recurring props are phones, gold coins, flames (streaks), gems, crowns, letter tiles (ñ, 中, ア) each feature row has its own 530x530 Lottie (1080x1080 artboard) no photography, no UI screenshots (phones show simplified flat UI) icons: custom flat SVGs; the course flags are a sprite (82x66 cells) drawn as rounded flat flags with a light bottom band image radius: none (illustrations are free-floating on the background) density: illustration-led; one big illustration per screen MOTION intensity: expressive hover policy: buttons and links never change color on hover; they brighten with filter brightness(1.1) (0.9 for white stroke buttons, 1.2 for text links) over 200ms ease on hover-capable devices only; menu rows get an instant #e5e5e5 background press policy: solid buttons move down 4px and lose the lip, stroke buttons move 2px; instant (Recipe juicy-button) scroll reveal: no fade-in of text; instead scroll drives illustrations: Lottie frames are scrubbed by scroll position through a JS spring (stiffness 170, damping 26, mass 1, clamped) in the "anytime" band and the final CTA; the pale blue background fades in by scroll signature motion: 1) juicy button press (Recipe juicy-button); 2) "learn anytime, anywhere" scroll scene with the background fade and the hiding topbar (Recipe anytime-scroll-scene); 3) Duo popping out of a phone by scroll and flapping when any GET STARTED is hovered (Recipe duo-cta-scrub) Lottie playback rule: every scene loads lazily, renders with the SVG renderer at 30fps, plays its full timeline once and then loops a "loopSegment" of frames; only ONE scene plays at a time: the one whose box crosses the viewport's vertical center, or else the one nearest to it; the others pause on their current frame component motion: topbar border-color 300ms, topbar slide 400ms cubic-bezier(0.22,1,0.36,1); language carousel transform 500ms ease-in-out; popover appears instantly page transitions and loading: client-side routing without transitions; the sign-in sheet opens instantly over the page reduced motion: if the user prefers reduced motion, Lottie files are not loaded at all and the static placeholder images stay; scroll-scrubbed scenes stay on their placeholder; html[reduced-motion] also disables CSS animations RESPONSIVE >=1440: Super band row is centered instead of right-aligned; otherwise as 1080 1080-1439: 988px column; hero row (illustration 424 + 80px gap + 480px text, right aligned with -65px overlap); feature rows side by side 530px; display type 64px; site-language control in the topbar; footer 5 columns 768-1079: topbar centered logo (no language control), padding 0 40px; hero stacks (illustration 424 above the text, H1 margin-top 16px, buttons 40px below); feature rows stack centered, illustration 452px; display 48px, section titles 48px; language carousel still shown; footer 3 columns <768: topbar logo 161x38 centered (40px owl head + CTA once scrolled); hero: illustration up to 273px, H1 32px centered in 345px, buttons stacked full width at the bottom of the first screen; language carousel hidden; section titles 36px, display 36px; feature illustrations max 345px, rows 96px apart; app store badges stacked; footer one column <700: text selection disabled on non-inputs; tap highlight off CONTENT AND VOICE headline style: short, lowercase, playful noun phrases of 2-4 words ("free. fun. effective.", "backed by science", "stay motivated", "learn anytime, anywhere"); the hero is one exclamatory sentence ("The most fun way to learn languages, chess, and more!") body: 1-2 friendly sentences, 20-35 words, exclamation marks allowed, mentions Duo the owl by name tone: cheerful, encouraging, slightly cheeky; first person plural ("We make it easy...") CTA labels: "GET STARTED", "I ALREADY HAVE AN ACCOUNT", "TRY 1 WEEK FREE", "CERTIFY YOUR ENGLISH", "LOG IN", "SIGN UP" (always uppercase in buttons) case and punctuation: lowercase display headlines with periods ("free. fun. effective."), sentence case body, Oxford comma SUBSTITUTIONS Feather Bold -> Nunito 900 lowercase -0.02em; DIN Next Rounded -> Nunito 600/800 (one step heavier); Duo logo -> a green [LOGO] wordmark placeholder 179x42; Lottie scenes and characters -> original flat-vector illustrations of the same size (square 1:1 for features, 4100:2300 for the "anytime" scene, 1448:708 for the final CTA) or static placeholders; flags -> simple flat rounded flag icons 36x29; Super wordmark -> plain text placeholder; app store badges -> generic white two-line buttons with original icons TECH React single-page app (webpack chunks on d35aaqx5ub95lt.cloudfront.net), CSS Modules with hashed class names, CSS custom properties for component theming (--web-ui_button-*, --web-ui_popover-*), color palette injected at runtime as rgb triplets (--color-owl: 88, 204, 2, used as rgb(var(--color-owl))), lottie-web (SVG renderer) for illustrations, a custom requestAnimationFrame spring hook, IntersectionObserver for the topbar state, OneTrust, reCAPTCHA Enterprise, Google Identity Services SCREENSHOTS - file: duolingo_2026_home_d1440_top.jpg shows: home first screen at 1440x900 (1425 wide without scrollbar), scroll 0 source: live https://www.duolingo.com/ (English) 2026-10-01 key values: topbar 70px white, logo 179x42 at x 218; "SITE LANGUAGE: ENGLISH" 15px #afafaf; illustration 424px; H1 32px 700 #4b4b4b 2 lines; GET STARTED 330x50 #58cc02 with #58a700 lip; I ALREADY HAVE AN ACCOUNT 330x50 white, #e5e5e5 border, #1cb0f6 label; language bar 80px with 2px #e5e5e5 rules do not copy: logo, Duo and characters, flags; use placeholders - file: duolingo_2026_home_m390_top.jpg shows: home first screen at 390x844 @2x: centered logo only in the topbar, illustration, H1 32px on 3 lines, two full-width buttons at the bottom; no language bar - file: duolingo_2026_overview_d1440_states.png shows: state sheet: GET STARTED default / hover (brightness 1.1) / active (4px down, no lip); I ALREADY HAVE AN ACCOUNT default / hover (brightness 0.9, grey) / active (2px down); site-language control default and hover - file: duolingo_2026_overview_d1440_language-menu.jpg shows: site-language popover open: 412px white panel, 2px #e5e5e5 border, radius 12px, two columns of flags + native names 15px #777777 - file: duolingo_2026_home_d1440_scrolled-topbar.jpg shows: topbar after the hero buttons scrolled out: 2px #e5e5e5 bottom border, GET STARTED 133x44 at the right - file: duolingo_2026_home_m390_scrolled-topbar.jpg shows: mobile topbar after scrolling: logo cropped to the 40px owl head at the left, GET STARTED 133x44 at the right mobile menu screenshot: n/a (no mobile menu on logged-out pages) REBUILD CHECK result: passed 2026-10-01 after one fix. A plain HTML rebuild of the home first screen (topbar, hero, language bar) and one feature row, made only from these memos (Nunito instead of the brand fonts, placeholder logo and illustrations), was compared with the live screenshots at 1440 and 390. Positions, sizes, colors, button lips and the mobile layout (buttons pinned to the bottom of the first screen) matched. Fixed in the memo: the open font mapping (Nunito one weight step heavier, less tracking). Remaining known differences: Nunito is wider, so the language bar shows fewer items and headings may wrap one word earlier; the Lottie illustrations need original art of the same style and size.