--- version: alpha name: Duolingo-design-analysis description: "A language app that looks like a game: Feather Bold headlines in saturated green (#58cc02) and navy (#042c60), chunky uppercase letter-spaced buttons, 12px rounded controls and bright sky and green washes." status: Draft appVersion: "measured in a browser, 2026-10-06" platformsCovered: [Web] reviewer: "" verifiedAt: "" colors: primary: "#58cc02" on-primary: "#ffffff" green-light: "#a5ed6e" green-wash: "#d7ffb8" sky: "#1cb0f6" sky-wash: "#ddf4ff" navy: "#042c60" night: "#100f3e" ink: "#4b4b4b" ink-body: "#3c3c3c" ink-muted: "#777777" ink-faint: "#afafaf" canvas: "#ffffff" button-ink: "#000437" typography: # Font note: "feather" is a private font and is not available in open fonts. Closest open alternative: "Rubik". # Font note: "duolingo-sans" is a private font and is not available in open fonts. Closest open alternative: "Nunito". display: fontFamily: "feather, 'Nunito', sans-serif" fontSize: 64px fontWeight: 700 lineHeight: 72px letterSpacing: -1.28px headline: fontFamily: "feather, 'Nunito', sans-serif" fontSize: 48px fontWeight: 700 lineHeight: 60px title: fontFamily: "duolingo-sans, 'Nunito', sans-serif" fontSize: 32px fontWeight: 700 lineHeight: 40px body: fontFamily: "duolingo-sans, 'Nunito', sans-serif" fontSize: 17px fontWeight: 500 lineHeight: 24px button: fontFamily: "duolingo-sans, 'Nunito', sans-serif" fontSize: 15px fontWeight: 700 lineHeight: 18px letterSpacing: 0.8px rounded: xs: 2px md: 12px spacing: sm: 8px md: 12px base: 16px components: button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.button}" rounded: "{rounded.md}" height: 50px padding: 0 16px button-outline: backgroundColor: "{colors.canvas}" textColor: "{colors.sky}" typography: "{typography.button}" rounded: "{rounded.md}" height: 50px padding: 0 16px sky-panel: backgroundColor: "{colors.sky-wash}" textColor: "{colors.navy}" typography: "{typography.body}" rounded: "{rounded.md}" padding: 16px night-band: backgroundColor: "{colors.night}" textColor: "{colors.on-primary}" typography: "{typography.body}" padding: 16px --- ## Overview Duolingo is a game-like language-learning app with a public home page. The look is loud and friendly: a huge saturated green, a deep navy ink, chunky rounded type and big rounded buttons. [Observed] What defines the look: 1. **A huge saturated green.** `#58cc02` fills large bands and headline words, with a lighter `#a5ed6e` and a wash `#d7ffb8`. [Measured] 2. **Sky blue and navy.** `#1cb0f6` for links and outline buttons, `#ddf4ff` for panels, `#042c60` for large headlines and `#100f3e` for dark bands. [Measured] 3. **Chunky rounded type.** Feather Bold at 48 to 64 for headlines and Duolingo Sans at 700 for interface text. [Measured] 4. **Uppercase, letter-spaced buttons.** 15px bold with 0.8px tracking, 50 high with a 12px corner. [Measured] 5. **Very few shapes.** Only 12px corners and a 2px edge appear in the measured page. [Measured] Source for this file: the Duolingo home page measured in a browser at 1440 and 390 wide, read on 2026-10-06. The brand guidelines site was not read. The signed-in learning screens were not measured. No app captures were used. See Known Gaps. ## Core ### Colors | Role | Value | Where | |------|-------|-------| | Green | `#58cc02` | Bands, headline words, primary buttons | | Light green and wash | `#a5ed6e`, `#d7ffb8` | Highlights | | Sky blue | `#1cb0f6` | Links and outline buttons | | Sky wash | `#ddf4ff` | Panels | | Navy | `#042c60` | Large headlines | | Night | `#100f3e` | Dark bands | | Text | `#4b4b4b`, `#3c3c3c` | Body | | Muted and faint | `#777777`, `#afafaf` | Meta and disabled | ### Typography Feather Bold carries the large display lines: 64 at 700 with -1.28px tracking for the main headline and 48 at 700 for section titles. Duolingo Sans carries the rest: 32 at 700 for titles, 17 at 500 for body and 15 at 700 uppercase with 0.8px tracking for buttons. [Measured] ### Shape and spacing Only two corners appear: 12 on buttons and panels and 2 on thin elements. Buttons are 50 high with 16 side padding. [Measured] ### Iconography and motion Not measured in this pass. [Inferred] ### Themes Light with dark bands on the page measured. [Observed] ## Platform: iOS The Duolingo iOS app was not captured. The notes below follow from the web design and platform conventions. ### Back and up navigation Expected on iOS: Chevron plus previous title, swipe from the left edge. Chevron plus previous title and the edge swipe, as the platform expects. Not confirmed on a device. [Inferred] ### Primary navigation Expected on iOS: Bottom tab bar, about five items. A bottom tab bar for learn, practice and profile. [Inferred] ### Main action Expected on iOS: Nav bar or bottom bar button. A large green button for continuing a lesson. [Inferred] ### Sheets, dialogs and messages Expected on iOS: Action sheets, alerts, modals. Not measured. [Inferred] ### Controls Expected on iOS: Cupertino switches, pickers, segmented controls. Not measured. [Inferred] ### Text sizing Expected on iOS: Dynamic Type. Not measured. [Inferred] ### Touch and pointer targets Expected on iOS: 44pt minimum. Not measured. [Inferred] ### Insets and system bars Expected on iOS: Safe areas, status bar. Not measured. [Inferred] ### Icons Expected on iOS: SF Symbols or custom. Not measured. [Inferred] ### Account and sign-in rules Expected on iOS: Equivalent login option when third-party sign-in exists (Guideline 4.8) and in-app account deletion. Note the date checked. Not verified. Sign-in rules and account deletion were not checked. [Inferred] Checked: 2026-10-06 against the public web only. ### Platform conformance Expected on iOS: For each important component: what iOS expects, what this app does, and why it deviates. The apps are expected to share the green, the type and the chunky buttons with the web. [Inferred] ## Platform: Android The Duolingo Android app was not captured. The notes below follow from the web design and platform conventions. ### Back and up navigation Expected on Android: System back and gesture, up arrow in the top bar. System back and gesture, with an up arrow in the top bar, as the platform expects. Not confirmed on a device. [Inferred] ### Primary navigation Expected on Android: Navigation bar, rail on tablets. A bottom navigation bar for learn, practice and profile. [Inferred] ### Main action Expected on Android: Floating action button. A large green button for continuing a lesson. [Inferred] ### Sheets, dialogs and messages Expected on Android: Bottom sheets, dialogs, snackbars. Not measured. [Inferred] ### Controls Expected on Android: Material switches, pickers, chips. Not measured. [Inferred] ### Text sizing Expected on Android: Font scale. Not measured. [Inferred] ### Touch and pointer targets Expected on Android: 48dp minimum. Not measured. [Inferred] ### Insets and system bars Expected on Android: Edge to edge, system bars. Not measured. [Inferred] ### Icons Expected on Android: Material Symbols or custom. Not measured. [Inferred] ### Account and sign-in rules Expected on Android: Account deletion and data safety requirements. Note the date checked. Not verified. Sign-in rules and account deletion were not checked. [Inferred] Checked: 2026-10-06 against the public web only. ### Platform conformance Expected on Android: For each important component: what Android expects, what this app does, and why it deviates. The apps are expected to share the green, the type and the chunky buttons with the web. [Inferred] ## Platform: Web The Duolingo home page, measured at 1440 and 390 wide. ### Back and up navigation Expected on Web: Browser back, breadcrumbs. Browser back. [Observed] ### Primary navigation Expected on Web: Top nav or sidebar. A language selector in the header and a short list of sign-in and start buttons. [Observed] ### Main action Expected on Web: Page-level button. A green rounded button with uppercase bold text, 50 high. [Measured] ### Sheets, dialogs and messages Expected on Web: Modals, toasts. Not measured. [Inferred] ### Controls Expected on Web: Native or custom. Outline buttons with sky text and a 12px corner. [Measured] ### Text sizing Expected on Web: Browser zoom. Sizes are fixed pixel values at each breakpoint. [Measured] ### Touch and pointer targets Expected on Web: Pointer and keyboard. Buttons measure 50 high. [Measured] ### Insets and system bars Expected on Web: Viewport, scrollbars. Not measured. [Inferred] ### Icons Expected on Web: Any. Not measured. [Inferred] ### Account and sign-in rules Expected on Web: Not applicable unless the product has accounts. Not applicable to the public pages measured. [Observed] ### Platform conformance Expected on Web: For each important component: what the web norm is, what this app does, and why it deviates. The responsive page keeps type and color and changes layout. [Measured] ## Cross-platform consistency Consistent across platforms: the green, the rounded type and the chunky buttons. [Measured for web, Inferred for the apps] Intentionally different: not measured. [Inferred] ## Do's and Don'ts ### Do - Use the green boldly in large bands. - Set headlines in the rounded display face. - Keep buttons uppercase, bold and 12px rounded. - Use sky blue for links and secondary buttons. ### Don't - Don't use thin or light type. - Don't use sharp corners. - Don't mix in a second brand color. ## Known Gaps - Lessons, the path, streaks and the signed-in app were not measured. - The iOS and Android apps were not captured. Their sections are inferred from the web design and platform conventions. - Icons, motion and exact breakpoints were not measured. - Account deletion and store policy rules were not verified. - The brand guidelines site was not read. - The white text on the green button measures about 2.1 to 1 and the sky outline button about 2.4 to 1, both below 4.5 to 1.