Design system do duolingo.com

---
version: alpha
name: "duolingo.com"
description: "Design system extracted from https://www.duolingo.com/ on 2026-09-28"
colors:
  background: "#ffffff"
  foreground: "#777777"
  muted-foreground: "#4b4b4b"
  primary: "#58cc02"
  on-primary: "#111111"
  secondary: "#1cb0f6"
  border: "#e5e5e5"
typography:
  headline-display:
    fontFamily: "duolingo-sans"
    fontSize: "32px"
    fontWeight: 700
    lineHeight: "1.4"
  headline-lg:
    fontFamily: "feather"
    fontSize: "48px"
    fontWeight: 700
    lineHeight: "1.4"
  headline-md:
    fontFamily: "duolingo-sans"
    fontSize: "24px"
    fontWeight: 600
    lineHeight: "1.4"
  body-md:
    fontFamily: "duolingo-sans"
    fontSize: "17px"
    fontWeight: 500
    lineHeight: "1.41"
  label-md:
    fontFamily: "duolingo-sans"
    fontSize: "13px"
    fontWeight: 500
    lineHeight: "1.4"
  button:
    fontFamily: "duolingo-sans"
    fontSize: "15px"
    fontWeight: 700
    lineHeight: "1.4"
    letterSpacing: "0.8px"
rounded:
  none: "0px"
  lg: "12px"
  full: "9999px"
spacing:
  unit: "8px"
  1: "16px"
  2: "24px"
  3: "40px"
  4: "48px"
  5: "72px"
  6: "96px"
components:
  button-secondary:
    backgroundColor: "#ffffff"
    textColor: "#1cb0f6"
    typography: "{typography.button}"
    rounded: "12px"
    height: "50px"
    padding: "0px 16px"
---

# duolingo.com

## Overview

Duolingo - The world’s most popular way to learn: Free, fun, and effective courses in languages and more. Learn with quick, science-based lessons personalized to you.

Soft, well-rounded controls, flat surfaces separated by hairlines, restrained display type at 32px / 700, a single green accent on neutrals. The site ships in light mode by default. Measured from 6000 rendered elements at 1440px wide on 2026-09-28.

Reference screenshots live beside this file; look at them before writing any layout, they carry the composition, density and image treatment that tokens cannot:

- `screenshots/desktop-1440-fold.png`: Desktop 1440, above the fold
- `screenshots/desktop-1440-full.jpg`: Desktop 1440, full page
- `screenshots/laptop-1024-fold.png`: Laptop 1024, above the fold
- `screenshots/tablet-768-fold.png`: Tablet 768, above the fold
- `screenshots/phone-390-fold.png`: Phone 390, above the fold
- `screenshots/phone-390-full.jpg`: Phone 390, full page

## Colors

| Token | Value | Use |
| --- | --- | --- |
| background | `#ffffff` | Page background |
| foreground | `#777777` | Primary text |
| muted-foreground | `#4b4b4b` | Secondary text, captions |
| primary | `#58cc02` | Accent: primary buttons, links, focus |
| on-primary | `#111111` | Text on the accent |
| secondary | `#1cb0f6` | Secondary accent (cyan) |
| border | `#e5e5e5` | Hairlines, dividers, input borders |

Full painted palette by area (largest first): `#ffffff`.

The accent `#58cc02` is used sparingly: primary buttons, links and focus rings. Everything else stays neutral.

## Typography

- **duolingo-sans** for h1, body, button: unknown source; use **Inter** as the stand-in if it does not load.
- **feather** for h2: unknown source; use **Inter** as the stand-in if it does not load.

| Role | Family | Size | Weight | Line height | Tracking |
| --- | --- | --- | --- | --- | --- |
| headline-display | duolingo-sans | 32px | 700 | 1.4 | normal |
| headline-lg | feather | 48px | 700 | 1.4 | normal |
| headline-md | duolingo-sans | 24px | 600 | 1.4 | normal |
| body-md | duolingo-sans | 17px | 500 | 1.41 | normal |
| label-md | duolingo-sans | 13px | 500 | 1.4 | normal |
| button | duolingo-sans | 15px | 700 | 1.4 | 0.8px |

Type scale in use: 15px, 17px, 32px, 48px. Base body size 17px.

The H1 renders at 32px / 700, center aligned, up to 480px wide. Sample: "The most fun way to learn languages, chess, and more!".

## Layout

- Spacing unit: 8px. Scale in use: 16, 24, 40, 48, 72, 96 (px).
- Flex and grid gaps: 8, 16, 24, 32, 80, 104 px.
- Content max width: 988px, centred.
- Breakpoints: 530px, 700px, 768px, 1080px, 1160px.
- Header: 900px tall, static, background `rgba(0, 0, 0, 0)`; 12 nav links at 17px / 500 (Get started · Get started · English · Chess · Math · Spanish · French · German).

## Elevation & Depth

No box shadows in use; depth comes from hairline borders and surface tints (flat design).

## Shapes

- Buttons: 12px
- Inputs: 12px
- Cards and panels: 0px
- Images and media: 0px
- Radius scale: none 0px, lg 12px, full 9999px

## Components

### Button, secondary

Background transparent (it sits on `#ffffff`, so place it on that colour), text `#1cb0f6`, border 2px solid transparent, radius 12px, height 50px, padding 0px 16px, 15px / 700, uppercase. Sample label: "I ALREADY HAVE AN ACCOUN".

### Link

Colour `#ffffff`, no underline at rest, weight 700.

## Dark Mode

No dark mode responded to prefers-color-scheme, a theme toggle, or a root class/attribute.

## Responsive Behavior

| Viewport | Content width | Gutter | Body | H1 | Header | Hero | Grids | Buttons |
| --- | --- | --- | --- | --- | --- | --- | --- | --- |
| desktop 1440px | 988px | 226px | 17px | 32px, 2 lines, center | 900px, 2 links | text only | 2→1 col; 4→1 col; 2→1 col | content-width |
| laptop 1024px | 452px | 283px | 17px | 32px, 2 lines, center | 894px, 2 links | text only | 2→1 col | content-width |
| tablet 768px | 452px | 155px | 17px | 32px, 2 lines, center | 1024px, 2 links | text only | 2→1 col; 2→1 col | content-width |
| phone 390px | 345px | 25px | 17px | 32px, 6 lines, center | 844px, 2 links | text only | 2→1 col | 2 full-width |

- H1 goes 32px → 32px (100%), 2 → 6 lines.
- Nav never collapses to a hamburger (2 links still visible at 390px).
- Body text stays 17px at every width.
- Phone side gutter 25px.
- 2 buttons stretch full-width on phones.
- Section top padding 96px → 96px.

## Interaction & Motion

2 elements carry transitions; typical 0.3s with ease, mostly on transform, border-color. No running keyframe animations at rest.

- Hover on button-secondary ("I ALREADY HAVE AN ACCOUNT"): no visible change; cursor pointer.
- Hover on nav-link ("Get started"): no visible change; cursor pointer.
- Tooltip triggers exist (1 × title) but none opened on hover in the first viewport; title attributes fall back to the browser's native tooltip.
- No dropdown menus found in the header.
- 7 sizable elements sit at opacity 0 before scrolling: scroll-reveal animations are in use (reveal on enter, fade + rise is the usual recipe).

Full detail (every overlay, table, form, scroll and text rule measured) is in `BEHAVIOR.md`; raw evidence in `evidence.json`.

## Do's and Don'ts

- Do use 8px multiples for every padding, margin and gap; the site does not use odd values.
- Do reserve `#58cc02` for actions and focus; never paint large areas with it.
- Do keep body text at 17px in duolingo-sans.
- Do match corner radii per element class (buttons 12px, cards 0px); do not pick one radius for everything.
- Don't add drop shadows; this design is flat.
- Don't substitute a different accent hue or introduce gradients that are not listed above.
- Don't rebuild from the tokens alone; open the screenshots for composition, density and image treatment.
- Note: Body text contrast is 4.5:1 against the page background (below 4.5:1).