BRAND Duolingo 2026 · Page: home

HEADER brand: Duolingo; design_date: 2026-10; page_type: home; variants: course landing pages (/course/<lang>/en, /math, /chess, /music) reuse S1, S3 rows and S7 with course-specific copy and no "anytime"/Super/DET bands example_urls: https://www.duolingo.com/ ; evidence: measured on https://www.duolingo.com/ (English) 2026-10-01 from the splash module of the app bundle, its CSS modules and computed styles, unless marked purpose: make the visitor press GET STARTED (start onboarding without an account); secondary: log in, install the app skeleton: 988px column; 9 sections; total height desktop ~7800px at 1440, mobile ~8800px at 390; sidebar: none overrides: page body background #ffffff (--color-snow-always-light); buttons radius 12px and line-height normal on the whole page SECTIONS S1 header / sticky (fixed topbar) - brand and the always-available CTA background: #ffffff; height: 70px + 2px border; padding: none layout: 988px row, space-between (>=1080); centered logo below 1080 until scrolled elements: logo 179x42; right: site-language control (before scroll) or GET STARTED 133x44 (after the hero button leaves the viewport) copy: "SITE LANGUAGE: ENGLISH", "GET STARTED" motion: swap is instant; border appears in 300ms; slides up 400ms cubic-bezier(0.22,1,0.36,1) during S4-S5 (Recipe anytime-scroll-scene) responsive: see Overview GLOBAL CHROME S2 hero / split-media-left with a language bar - say what Duolingo is and start sign-up background: #ffffff; height: min-height 100svh (900px at 1440x900) including 70px top padding for the fixed topbar; padding: middle row 48px 0 (desktop), 16px 40px 48px (tablet), 10px 15px 20px (mobile) layout: middle row 988px, flex row, align center, justify end, gap 80px: illustration box 424x424 (margin-right -65px) + text column 480px; then the language bar pinned to the bottom of the first screen elements: Lottie illustration 424x424 (Duo the owl and six characters falling around a green phone with gold coins); H1 32px/normal 700 #4b4b4b centered, width 480px, 2 lines; button column max 330px, 40px below the H1, gap 12px: GET STARTED (owl juicy, 330x50) and I ALREADY HAVE AN ACCOUNT (white stroke, 330x50, #1cb0f6 label) language bar: height 80px, 2px #e5e5e5 top and bottom borders, padding 0 40px; inside a 1090px carousel: 14px #afafaf chevrons at both ends 30px from the list, list of course links 23px apart, each a 36px-wide flag (36x29) + 10px + name 15px 700 uppercase 0.8px #777777 (ENGLISH, CHESS, MATH, SPANISH, FRENCH, GERMAN, ITALIAN, PORTUGUESE visible, then more); arrows move the list 2 items at a time, transform 500ms ease-in-out; links go to each course page copy: H1 "The most fun way to learn languages, chess, and more!" (10 words); buttons "GET STARTED", "I ALREADY HAVE AN ACCOUNT" media: [ILLUSTRATION 1:1, 424px] Lottie 1080x1080 30fps, 290 frames, plays once then loops frames 130-290; static PNG placeholder (1x/2x) until it renders motion: Lottie only when it is the scene nearest the viewport center; hover on any GET STARTED also makes Duo in S7 loop (Recipe duo-cta-scrub) responsive: 768-1079: stacked and centered, illustration 424px above the text, H1 margin-top 16px, max-width 480px; <768: illustration flexes to max 273px, H1 32px in 345px on 3 lines, the two buttons sit at the bottom of the first screen full width (max 330), language bar hidden S3 feature-grid / alternating-rows (4 rows) - list the reasons Duolingo works background: #ffffff with the pale blue #ddf4ff layer fading in under the lower rows as S4 approaches (Recipe anytime-scroll-scene); padding: 96px 0 96px layout: each row 988px wide, flex row, gap 101px: text column (max 503px) + 530x530 illustration; rows 2 and 4 reversed (illustration left); rows are 530px tall and touch (gap 0) at >=1080 elements per row: title Feather 48px lowercase #58cc02 (max 503px); 24px below, text 17px/24px 500 #777777 (max 473px); illustration Lottie 530x530 copy: "free. fun. effective." / "Learning with Duolingo is fun, and research shows that it works! With quick, bite-sized lessons, you'll earn points and unlock new levels while gaining real-world communication skills." ("research shows that it works" is a #1cb0f6 700 link to /efficacy); "backed by science" / "We use a combination of research-backed teaching methods and delightful content to create courses that effectively teach reading, writing, listening, and speaking skills!"; "stay motivated" / "We make it easy to form a habit of language learning with game-like features, fun challenges, and reminders from our friendly mascot, Duo the owl."; "personalized learning" / "Combining the best of AI and language science, lessons are tailored to help you learn at just the right level and pace." media: 4 Lotties 1080x1080 30fps: phone with lesson cards and a character on a podium (loop frames 291-450 of 450); characters studying on a giant book/tablet (loop 190-532); character jumping between streak cards with flames (loop 200-300 of 300); characters on two moving platforms (loop 188-376) motion: each plays once then loops its segment while it is the scene nearest the viewport center; no text animation responsive: <1080 rows stack centered (title, text, then illustration), text centered, gap 32px between text and illustration, rows 96px apart, illustration 452px (tablet) / max 345px (mobile), titles 36px on mobile, padding 0 15px S4 cta-band / app download "learn anytime, anywhere" - send people to the app stores background: pale blue #ddf4ff (faded in by scroll) behind a huge Lottie scene of floating phones, letter tiles, gems, crowns and flames; height: min-height 100vh (1289px at 1440); padding: 140px 0 96px (tablet 140px 0 0; mobile 96px 15px 0) layout: centered column (gap 48px; 32px mobile) above the scene; the scene is 2000px wide (1600 tablet, 1200 mobile), 4100:2300, pulled up and left (margin -340px top, -220px left at >=1080; -200/-180 tablet; -90/-120 mobile) so it bleeds behind the title and off both edges elements: H1 Feather 64px/normal 700 -0.02em lowercase #042c60 centered (max 583px), 2 lines; two app store badges (white stroke, 34px icons, two-line labels) 24px apart copy: "learn anytime, anywhere"; badges "Download on the App Store", "Get it on Google Play" media: [SCENE 4100:2300] two layered Lotties (background loop + scroll-scrubbed phones) motion: Recipe anytime-scroll-scene responsive: <768 title 36px, badges stacked (gap 16px, max 330px), scene 1200px S5 promo band / Super Duolingo - upsell the subscription background: deep navy #100f3e; height: min-height 100vh; padding: 185px 0 (desktop), 64px 0 152px (tablet), 48px 15px 96px (mobile) layout: row 988px justify end (centered at >=1440), gap 40px: 530x530 Lottie left, centered column right (gap 48px) elements: Lottie of a purple phone with a heart/infinity badge (loop frames 35-156 of 156); Super wordmark image "POWER UP WITH SUPER DUOLINGO" 605x91 (339x55 mobile) in italic gradient caps; white juicy button "TRY 1 WEEK FREE" max 418px (605px tablet, 330 mobile), label #000437, lip rgba(255,255,255,0.5) copy: "Try 1 week free" (trial length varies by offer) motion: Lottie loop; button hover brightness(1.1) responsive: stacks centered below 1080, illustration max 345px on mobile S6 feature / Duolingo English Test - cross-promote the English test background: #ffffff (outside the fading layer); padding: 96px 0 layout: same as an S3 row (text left, 530px illustration right) elements: title Feather 48px lowercase #58cc02 "duolingo english test"; text 17px/24px #777777; white stroke button "CERTIFY YOUR ENGLISH" (max 330px, #1cb0f6 label) 24px below the text; Lottie of a character holding a giant green owl-shaped badge on a phone (loop 0-115 of 115) copy: "Our convenient, fast, and affordable English test integrates the latest assessment science and AI — empowering anyone to accurately test their English where and when they're at their best." responsive: as S3; button centered on mobile S7 cta-band / final "learn a language with duolingo" - last push to sign up background: white above, owl green #58cc02 wave below; the center column is max 1440px and two green side blocks (416px tall) fill the edges at the bottom layout: centered column (gap 48px, padding 40px 15px 0) with H1 and button, overlapping the top of a 1448:708 scene (min-width 696px) by -10.36% of its width elements: H1 Feather 64px -0.02em lowercase #58cc02 centered (max 583px); GET STARTED owl juicy button max 330px; scene: white rounded green phone outline in a green wave landscape with Duo, gold coins, a treasure chest, gems, a heart, a flame, a dumbbell and a check badge; a green 1448:80 strip closes the scene at the bottom copy: "learn a language with duolingo"; "GET STARTED" motion: Recipe duo-cta-scrub (Duo rises out of the phone with scroll and flaps while any GET STARTED is hovered; the scene's other objects loop) responsive: H1 48px tablet, 36px mobile (max 330px); scene keeps min-width 696px and is cropped at the sides on mobile; margin-bottom of the text block -8.76% (tablet) S8 footer / sitemap-columns - as Overview footer (green), directly under the S7 wave PAGE COMPONENTS language carousel: S2 (anatomy in the section); chevrons are 14px stroke-2 SVG arrows in #afafaf at full opacity, clickable, 30px from the list app store badge: Overview COMPONENTS feature row: S3 INTERACTIONS - id: carousel.page element: S2 language bar chevrons trigger: click open: list translateX moves to the left offset of the item two positions before/after the first fully visible item (clamped to 0 and to the end), transform 500ms ease-in-out children: none close: n/a switch: each click recomputes from the current offset; at the end the next click on the right chevron does nothing (inf) keyboard: chevrons are SVGs with click handlers only (not focusable); flag links are focusable touch and mobile: bar hidden below 768 reduced motion: same transition (not disabled) - id: topbar.swap element: S1 right side trigger: scroll (IntersectionObserver on the hero GET STARTED, rootMargin -72px top) open: site-language control replaced by GET STARTED 133x44, instant; border-bottom transparent -> #e5e5e5, 300ms (as soon as scrollY > 0) close: reverse when scrolling back to the top keyboard: n/a; touch: same reduced motion: same - id: site-language.open: click the control; popover appears 8px below, right aligned, instantly; outside click closes (Overview popover) - id: lottie.focus-play: only the scene nearest the viewport center plays (Overview MOTION) STATES loading: every illustration shows its static placeholder image (SVG or PNG) until the Lottie renders its first frame, then the placeholder is hidden reduced motion: placeholders stay, no Lottie loads logged in: / redirects to /learn (not described) mobile Android: an "install app" banner can appear at the top (rating 4.5 stars, INSTALL button, close), third party look SCREENSHOTS - file: duolingo_2026_home_d1440_full.jpg shows: full home page at 1440 (1424x7797), scroll-dependent scenes in their initial state (pale blue layer at opacity 0 because the capture starts at scroll 0) source: live https://www.duolingo.com/ 2026-10-01 key values: hero 900px; feature group y 900-3212 with 4 rows of 530px; "anytime" band y 3212-4501; Super band #100f3e y 4501-5401; DET row; final CTA y 6123-6970; green footer y 6970-7797 do not copy: logo, Lottie characters, Super wordmark, flags; use placeholders - file: duolingo_2026_home_m390_full.jpg shows: full home page at 390 (captured at 1x, 390x8824): stacked rows, no language bar, stacked app badges, one-column footer