Learning & Reference / iOS / Android / Web

Duolingo

Duolingo treats learning as a game: a huge saturated green, chunky rounded headlines and big uppercase buttons that are impossible to miss.

Download
  • #58CC02
  • #1CB0F6
  • #042C60
  • #4B4B4B
  • #DDF4FF
  • #100F3E

Color

Every color token in the file, grouped by role.

Brand

  • primary#58CC02
  • on primary#FFFFFF

Surfaces

  • canvas#FFFFFF

Text

  • ink#4B4B4B
  • ink body#3C3C3C
  • ink muted#777777
  • ink faint#AFAFAF
  • button ink#000437

More

  • green light#A5ED6E
  • green wash#D7FFB8
  • sky#1CB0F6
  • sky wash#DDF4FF
  • navy#042C60
  • night#100F3E

Typography

Each style is set with the file's own family, size, weight and spacing.

  • featherfeather is private and not available in open fonts. Shown in Rubik, the closest open match.
  • duolingo-sansduolingo-sans is private and not available in open fonts. Shown in Nunito, the closest open match.
  • display64px / 700 / 72px

    Duolingo

  • headline48px / 700 / 60px

    Duolingo

  • title32px / 700 / 40px

    Duolingo

  • body17px / 500 / 24px

    The quick brown fox jumps over the lazy dog

  • button15px / 700 / 18px

    Continue to checkout

Shape

Corner radius tokens.

  • xs2px
  • md12px

Spacing

The spacing scale, drawn to size.

  • sm8px
  • md12px
  • base16px

Components

Component tokens drawn with the colors, type and corners they name.

  • button primary
    button-primary
  • button outline
    button-outline
  • sky panel
    sky-panel
  • night band
    night-band
Read the full DESIGN.md The written rationale behind the tokens
Design tokens YAML front matter, 91 lines
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

RoleValueWhere
Green#58cc02Bands, headline words, primary buttons
Light green and wash#a5ed6e, #d7ffb8Highlights
Sky blue#1cb0f6Links and outline buttons
Sky wash#ddf4ffPanels
Navy#042c60Large headlines
Night#100f3eDark bands
Text#4b4b4b, #3c3c3cBody
Muted and faint#777777, #afafafMeta 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.