Duolingo design system

What font does Duolingo use?

Duolingo’s website uses Feather for headings and Duolingo Sans for body text. Feather is not on Google Fonts; the closest free match is Archivo; Duolingo Sans is not on Google Fonts; the closest free match is Figtree.

Duolingo colour palette

Duolingo’s home page is light (#FFFFFF background, #3C3C3C text). Its palette: #FFFFFF, #000000, #58CC02, #100F3E, #3D3D3D, #FF878D.

• #FFFFFF
  65.6% · backgrounds
• #000000
  13.1% · drawings
• #58CC02
  4.5% · backgrounds
• #100F3E
  4.1% · backgrounds
• #3D3D3D
  0.9% · drawings
• #FF878D
  0.9% · drawings
• #1CB0F6
  0.7% · drawings
• #FFE700
  0.6% · drawings
• #B70070
  0.4% · drawings
• #FFC700
  0.4% · drawings

Type scale

Each size the page sets text in, with its weight and line height. Duolingo’s largest type is 48px at weight 700.

Spacing and shape

Spacing sits on a 4px grid: 8px, 12px, 16px, 24px, 32px, 40px, 48px, 64px, 96px, 140px.

Corner radii: 12px. No shadows measured: the design is flat.

What makes Duolingo look like Duolingo

Mostly neutral: 85% of the page is #FFFFFF and #100F3E and other neutrals; #58CC02 (4.5%) fills whole sections.

#FF878D is an accent: 0.9% of the page, used for drawings only. Don't fill large areas with it.

#1CB0F6 is an accent: 0.7% of the page, used for drawings only. Don't fill large areas with it.

The largest type (48px feather) is bold (700).

Duolingo DESIGN.md for Claude Code, Cursor and Lovable

A DESIGN.md is the brief an AI coding tool reads before it writes UI. This one carries everything on this page as rules a model follows: the allowed colours and what each is for, the fonts with free stand-ins, the type scale, spacing, corners, and the things Duolingo’s design never does.

Put it in your project root and ask your tool to follow it: “Read DESIGN.md and build [your product] in this design language.” It describes a style, not Duolingo’s product, so use your own name, words and images.

Download Duolingo DESIGN.md · View it as text

As CSS variables

The measured values as CSS custom properties, with free fonts standing in for licensed ones. Use them to learn from or to start a project in a similar style; Duolingo’s name, logo, words and images are theirs.

@import url("https://fonts.googleapis.com/css2?family=Figtree:wght@500;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Archivo:wght@700&display=swap");

:root {
  --color-background: #FFFFFF; /* Background */
  --color-text: #3C3C3C; /* Text */
  --color-text-muted: #777777; /* Text muted */
  --color-border: #A5ED6E; /* Border */
  --color-positive: #58CC02; /* Positive */
  --color-000000: #000000; /* 13.1% of the page, as drawings */
  --color-100f3e: #100F3E; /* 4.1% of the page, as fills */
  --color-3d3d3d: #3D3D3D; /* 0.9% of the page, as drawings */
  --color-ff878d: #FF878D; /* 0.9% of the page, as drawings */
  --color-1cb0f6: #1CB0F6; /* 0.7% of the page, as drawings */
  --color-ffe700: #FFE700; /* 0.6% of the page, as drawings */
  --color-b70070: #B70070; /* 0.4% of the page, as drawings */
  --color-ffc700: #FFC700; /* 0.4% of the page, as drawings */
  --color-e49e00: #E49E00; /* 0.3% of the page, as drawings */
  --color-89e219: #89E219; /* 0.3% of the page, as drawings */
  --font-body: duolingo-sans, "Figtree", sans-serif; /* duolingo-sans on the site; Figtree renders */
  --font-display: feather, "Archivo", sans-serif; /* feather on the site; Archivo renders */
  --type-display: 48px; /* Display, weight 700 */
  --type-display-leading: normal;
  --type-headline: 32px; /* Headline, weight 700 */
  --type-headline-leading: normal;
  --type-title: 19px; /* Title, weight 700 */
  --type-title-leading: 26.6px;
  --type-body-large: 17px; /* Body Large, weight 500 */
  --type-body-large-leading: 24px;
  --type-body-medium: 15px; /* Body Medium, weight 700 */
  --type-body-medium-leading: 22px;
  --type-body-small: 14px; /* Body Small, weight 700 */
  --type-body-small-leading: 17px;
  --type-label: 13px; /* Label, weight 700 */
  --type-label-leading: 16px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;
  --space-35: 140px;
  --radius-lg: 12px;
}

How this was measured

PikSpec’s scanner read the duolingo.com home page in Chrome at 1440px wide on 14 October 2026: the computed styles of its elements, the fonts that rendered and how much of the page each colour covers. Websites change; capture the page yourself with PikSpec for today’s values, any page, and exports in five formats.

Duolingo is a trademark of its owner. This page is an independent measurement and is not affiliated with or endorsed by Duolingo.

Similar light designs: Airbnb · Airtable · Allbirds · Anthropic · Apple · Arc

Contact PikSpec

Email support@pikspec.com for support, privacy requests or content reports.