---
site: Duolingo - The world’s most popular way to learn
url: "https://duolingo.com"
generated_at: "2026-06-25T08:27:36.319Z"
generator: "designlang@13.0.0"
intent: landing
material: flat
tokens:
  colors:
    primary: "#d7ffb8"
    secondary: "#0000ee"
    accent: "#ddf4ff"
    background: "#ffffff"
    foreground: "#000000"
  typography:
    sans: duolingo-sans
    base: 17
  spacing:
    base: 4
    scale: "[1, 8, 23, 40, 48, 64, 80, 96, 140, 185]"
  radii:
    xs: 2
    lg: 12
  shadows:
    sm: "rgb(128, 128, 128) 0px 0px 5px 0px"
---

# Overview

A **landing** page (heuristic confidence 0.31), dressed in **flat** material.

> "The free, fun, and effective way to learn a language!"

The author writes in a **friendly** voice; headings tend to be **all-lowercase** case and **tight**.

Reading order detected on the source: `hero → nav → nav → testimonial → pricing → pricing → content → content → content → content → pricing → testimonial → testimonial → pricing → pricing → cta → footer`.

Source: <https://duolingo.com>.

# Colors

| role | hex | usage |
|---|---|---|
| primary | `#d7ffb8` | 14 |
| secondary | `#0000ee` | 4 |
| accent | `#ddf4ff` | 1 |
| background | `#ffffff` | — |
| foreground | `#000000` | — |

**Neutrals:** `#3c3c3c` · `#777777` · `#000000` · `#4b4b4b` · `#afafaf`

**Total unique colors detected:** 18.

# Typography

**Families**
- `duolingo-sans` · 4283 uses

**Body size:** `17px` / line-height `20px`.

**Heading scale**
| level | size | weight | line-height |
|---|---|---|---|
| h1 | `64px` | `700` | `normal` |
| h2 | `48px` | `700` | `normal` |
| h3 | `32px` | `700` | `normal` |

# Layout

**Spacing base:** `4px` increments.
**Scale:** `1px` · `8px` · `23px` · `40px` · `48px` · `64px` · `80px` · `96px` · `140px` · `185px`

**Layout primitives:** 10 grid containers · 92 flex containers.

**Breakpoints:** `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px`

# Elevation and Depth

**Shadow scale**
- `sm` — `rgb(128, 128, 128) 0px 0px 5px 0px`

**Z-index layers:** 6 · ⚠ 1 issue(s)

# Shapes

**Radius scale**
- `xs` — `2px`
- `lg` — `12px`

# Components

**Detected patterns:** `buttons` · `inputs` · `links` · `navigation` · `footer`

**Anatomy**
| kind | variants | sizes | instances |
|---|---|---|---|
| button | — | — | 3 |

# Do's and Don'ts

**Do's**
- Use `site`, `i`, `try` as the primary verbs in CTAs — these dominate the source.
- Write headings in **all-lowercase** case, **tight** length.
- Address the reader with the pronoun posture **you-only**.
- Stay inside the **flat** material — match shadow and radius habits.

**Don'ts**
- Don't 70 !important rules — prefer specificity over overrides.
- Don't 91% of css is unused — consider purging.
- Don't 3676 duplicate css declarations.

---
_Generated by [designlang](https://github.com/Manavarya09/design-extract) v13.0.0 from <https://duolingo.com>._
_Compatible with the DESIGN.md convention pioneered by [design-extractor.com](https://www.design-extractor.com) — extended with intent, material, voice, anatomy, and library detection._