# Duolingo design system: colors, fonts and tokens

> Duolingo's website (duolingo.com) uses a light interface with #d7ffb8 as its primary color and duolingo-sans as the main typeface. designlang measured 9 font sizes from 13px to 64px, 10 spacing values, 2 corner radii.

Source: https://duolingo.com, captured 25 June 2026. Page: https://designlang.app/design-system/duolingo

## Colors

| Role | Hex | Uses |
|---|---|---|
| Primary | `#d7ffb8` | 14 |
| Secondary | `#0000ee` | 4 |
| Accent | `#ddf4ff` | 1 |

Neutrals: `#3c3c3c`, `#777777`, `#000000`, `#4b4b4b`, `#afafaf`, `#ffffff`, `#e5e5e5`, `#808080`, `#c1c1c1`

Backgrounds: `#ffffff`, `#ddf4ff`, `#100f3e`, `#58cc02`, `#000000`

## Fonts

- duolingo-sans (sans), 4283 elements

## Type scale

| Size | Weight | Line height | Tracking | Used on |
|---|---|---|---|---|
| 64px | 700 | normal | -1.28px | h1 |
| 48px | 700 | normal | normal | h2, span |
| 32px | 700 | normal | normal | h1 |
| 19px | 700 | 26.6px | normal | div |
| 17px | 500 | 20px | normal | body, noscript, div, script |
| 16px | 400 | 18.4px | normal | html, head, meta, noscript |
| 15px | 700 | 17.25px | 0.8px | button, span, img, a |
| 14px | 700 | 17px | normal | span |
| 13px | 700 | 16px | normal | a |

## Spacing

1px, 8px, 23px, 40px, 48px, 64px, 80px, 96px, 140px, 185px

## Radii

2px, 12px

## Motion

Feel: mixed. Durations: 200ms, 300ms, 500ms.

## Audit

Overall 89/100 (grade B).

- Color Discipline: 92/100
- Typography Consistency: 92/100
- Spacing System: 85/100
- Shadow Consistency: 100/100
- Border Radius Consistency: 100/100
- Accessibility: 100/100
- CSS Tokenization: 100/100

## CSS variables

```css
:root {
  --color-primary: #d7ffb8;
  --color-secondary: #0000ee;
  --color-accent: #ddf4ff;
  --color-background: #ffffff;
  --color-text: #000000;
  --color-neutral-1: #3c3c3c;
  --color-neutral-2: #777777;
  --color-neutral-3: #000000;
  --color-neutral-4: #4b4b4b;
  --font-primary: "duolingo-sans", sans-serif;
  --radius-sm: 2px;
  --radius-md: 12px;
}
```

## Downloads

- [W3C DTCG tokens](https://designlang.app/gallery/duolingo-com/duolingo-com-design-tokens.json)
- [Tailwind config (v3)](https://designlang.app/gallery/duolingo-com/duolingo-com-tailwind.config.js)
- [Tailwind v4 @theme](https://designlang.app/gallery/duolingo-com/duolingo-com-tailwind-v4.css)
- [CSS variables](https://designlang.app/gallery/duolingo-com/duolingo-com-variables.css)
- [shadcn/ui theme](https://designlang.app/gallery/duolingo-com/duolingo-com-shadcn-theme.css)
- [Figma variables](https://designlang.app/gallery/duolingo-com/duolingo-com-figma-variables.json)
- [DESIGN.md](https://designlang.app/gallery/duolingo-com/duolingo-com-DESIGN.md)

Regenerate: `npx designlang duolingo.com`