Duolingo

---
name: duolingo-com-design-system
source: https://www.duolingo.com/
extracted: 2026-07-21
theme: dark  # measured from neutral usage weight
colors:  # roles inferred from usage frequency + luminance; names verified against values
  canvas: "#000000"
  accent: "#00b086"  # teal
fonts:
  primary: "KaTeX_Main"  # medium-confidence: usage counts are close
---

# Duolingo — Design System

Extracted from **https://www.duolingo.com/** on 2026-07-21.

> Duolingo is the world

Every value below is mined from the site's live CSS (61 native custom properties, ranked usage counts). Role assignments are inferred from usage and luminance and marked as such — treat them as a strong starting point, not gospel.

## Overview

The system reads as dark: measured neutral usage weighs 1 dark against 0 light. The palette is chromatic: 1 saturated values against 1 neutrals, led by teal (`#00b086`). **KaTeX_Main** leads the font stack, though usage counts are close — verify against rendered pages before committing. Geometry mixes sharp corners (2px) with full pills.

## Usage rules

Derived from the measured usage below — each rule cites its evidence.

- Chromatic color carries 50% of measured usage — this palette uses color structurally. Saturated values can hold large surfaces here; timidity would misrepresent the source.
- The theme is dark (measured neutral weight 1:0). Don't flip individual sections to the opposite mode.
- `12px` is the workhorse radius (x13); treat the other radii as exceptions, not options.
- The only shadows are blur-less hairline offsets — this system barely uses elevation; don't add soft drop shadows.

## Colors

### Neutrals (light → dark)

| Token | Value | Usage | Inferred role |
| --- | --- | --- | --- |
| `neutral-950` | `#000000` | 1 | **canvas** — darkest neutral, matches the measured dark-leaning theme |

### Accents

| Token | Value | Usage | Inferred role |
| --- | --- | --- | --- |
| `teal` | `#00b086` | 1 | **accent** — most-used chromatic color |

### Modern color values (kept verbatim)

- `color("eel")`

## Typography

**KaTeX_Main** has the most `font-family` declarations, but the margin over the rest is thin — treat the primary-face call as provisional and verify on rendered pages. Full list by usage:

| Family | Usage |
| --- | --- |
| KaTeX_Main | 8 |
| KaTeX_SansSerif | 7 |
| KaTeX_Fraktur | 4 |
| KaTeX_Math | 4 |
| KaTeX_Size1 | 4 |
| duolingo-sans | 4 |
| feather | 4 |
| KaTeX_Caligraphic | 3 |

**Size scale (px):** `11.11`, `13`, `13.33`, `14`, `15`, `16`, `17`, `19.2`, `20`, `23.04`, `25`, `32`

**Weights in use:** `400` (x14), `500` (x6), `700` (x60)

**Line-heights (unitless):** `1`, `1.15`, `1.2`, `1.4`, `1.5`

**Letter-spacing values:** `-.03em`, `-.02em`, `.04em`, `.8px`

## Spacing

Most-used values (px): `6`, `8`, `10`, `12`, `14`, `15`, `16`, `20`, `24`, `40`, `48`, `64`

## Border radius

| Token | Value | Usage |
| --- | --- | --- |
| `radius-sm` | `2px` | 2 |
| `radius-md` | `6px` | 8 |
| `radius-lg` | `8px` | 2 |
| `radius-xl` | `12px` | 13 |
| `radius-2xl` | `16px` | 11 |
| `radius-3xl` | `18%` | 1 |
| `radius-4xl` | `30%` | 1 |
| `radius-full` | `50%` | 8 |

## Shadows (ordered by blur radius)

- `shadow-sm` — `0 2px 0` (x1)
- `shadow-md` — `0 3px 0 1px` (x1)

## Breakpoints

`530px`, `699px`, `700px`, `768px`, `980px`, `1065px`, `1080px`, `1440px`

## Starter recipes

Tokens composed into components. The source site's real components were **not** inspected — these are starting points built from the extracted values, with contrast ratios computed rather than assumed.

```css
.button-primary {
  background: var(--color-accent); /* #00b086 */
  color: var(--color-canvas); /* #000000 — contrast 7.6:1 */
  border-radius: 9999px; /* pill — mined as 50% */
  font-weight: 500;
}

.input-error {
  /* no red exists in the mined palette — this site does not expose an error color in its CSS. */
  /* Introduce one deliberately rather than borrowing a random red; keep saturation near the accent's. */
}
```

## Observations

- 1 of 2 extracted colors are neutrals.
- 2 distinct shadows; the softest reaches 0px blur.
- 8 breakpoints, from 530px to 1440px.

## Native CSS custom properties

First 40 of 61:

```css
:root {
  --viewport-height: 100dvh;
  --web-ui_button-border-radius: 16px;
  --rtl-sign: 1;
  --text-pageTitle-casing-large: none;
  --text-pageTitle-letter-spacing-large: 0;
  --text-pageTitle-line-height-large: 2.75rem;
  --text-pageTitle-size-large: 2.5rem;
  --text-pageTitle-weight-large: 700;
  --text-pageTitle-casing-small: none;
  --text-pageTitle-letter-spacing-small: 0;
  --text-pageTitle-line-height-small: 2.25rem;
  --text-pageTitle-size-small: 2rem;
  --text-pageTitle-weight-small: 700;
  --text-heading-casing-large: none;
  --text-heading-letter-spacing-large: 0;
  --text-heading-line-height-large: 2rem;
  --text-heading-size-large: 1.75rem;
  --text-heading-weight-large: 700;
  --text-heading-casing-medium: none;
  --text-heading-letter-spacing-medium: 0;
  --text-heading-line-height-medium: 2rem;
  --text-heading-size-medium: 1.5rem;
  --text-heading-weight-medium: 700;
  --text-heading-casing-small: none;
  --text-heading-letter-spacing-small: 0;
  --text-heading-line-height-small: 1.5rem;
  --text-heading-size-small: 1.25rem;
  --text-heading-weight-small: 700;
  --text-heading-casing-xsmall: none;
  --text-heading-letter-spacing-xsmall: 0;
  --text-heading-line-height-xsmall: 1.25rem;
  --text-heading-size-xsmall: 1rem;
  --text-heading-weight-xsmall: 700;
  --text-body-casing: none;
  --text-body-letter-spacing: 0;
  --text-body-line-height: 1.75rem;
  --text-body-size: 1.25rem;
  --text-body-weight: 500;
  --text-body-weight-bold: 700;
  --text-body-casing-spacious: none;
}
```

## Files

- `tailwind.css` — Tailwind v4 `@theme` block; tokens become utilities (e.g. `bg-neutral-900`, `text-teal`). Semantic roles alias the base palette; sizes carry line-heights; dark mode included.
- `preview.html` — a visual style-guide of this system: palette cards, type scale, spacing tables, and do/don't guidelines.
- `variables.css` — framework-agnostic `:root` variables with semantic aliases and a `data-theme="dark"` block.
- `tokens.json` — W3C DTCG design tokens: semantic aliases, composite shadow and typography tokens, for Figma plugins, Style Dictionary, etc.