Duolingo design system

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.

Captured 25 June 2026Light UI4,295 elements read

Download tokens Read it yourself

Duolingo colors

The brand roles and neutrals duolingo.com renders, with how many elements use each one.

Brand colors

Primary#d7ffb814 uses
Secondary#0000ee4 uses
Accent#ddf4ff1 uses

Neutrals

#3c3c3c7,859 uses
#777777268 uses
#000000214 uses
#4b4b4b34 uses
#afafaf14 uses
#ffffff9 uses
#e5e5e51 uses
#8080801 uses
#c1c1c11 uses

Backgrounds

#ffffff
#ddf4ff
#100f3e
#58cc02
#000000

Text colors

#00000021:1 on #ffffff
#3c3c3c11.03:1 on #ffffff
#0000ee9.4:1 on #ffffff
#afafaf2.19:1 on #ffffff
#4b4b4b8.72:1 on #ffffff
#ffffff1:1 on #ffffff
#1cb0f62.44:1 on #ffffff
#7777774.48:1 on #ffffff

Duolingo fonts and type scale

Every font family and size in use, read from computed styles rather than the CSS source.

Font families

duolingo-sans: sans, most text (4,283 elements)

Body text: 17px at weight 500, line height 20px.

Weights in use: 500, 700, 400.

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 and radii

Spacing scale

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

Corner radii

2px
12px

Medium radii lead, with a few larger ones. 1 distinct box shadows.

Motion

The motion reads as mixed.

Durations

sm: 200ms
md: 300ms
lg: 500ms

Easing

ease-out (1 uses): cubic-bezier(0.22, 1, 0.36, 1)
ease-in-out (1 uses): ease

Design system audit

designlang scores how consistently a site uses its own values. How the audit works.

Overall

89/100, grade B

Components found: buttons (3), inputs (1), links (115), navigation (2), footer (1).

By category

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

70 !important rules — prefer specificity over overrides
91% of CSS is unused — consider purging
3676 duplicate CSS declarations

Download the tokens

The files designlang wrote for duolingo.com. Run it yourself for a fresh read: npx designlang duolingo.com.

The core values as CSS variables

: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;
}

Read duolingo.com yourself

Run the free CLI to get these tokens, plus a Tailwind config, a shadcn theme and rules for Cursor and Claude.

Get started CLI reference

Brands with a similar design

All design systems

Figma design system

Light UI, figmaSans, #e4ff97

Supabase design system

Light UI, Circular, #72e3ad

Mintlify design system

Light UI, inter, #faf8f5

Airbnb design system

Light UI, Airbnb Cereal VF, #ff385c

Quick answers

What font does Duolingo use?

duolingo.com sets most of its text in duolingo-sans (4,283 elements). designlang read this from the computed styles of the live page on 25 June 2026.

What are Duolingo's brand colors?

The brand roles on duolingo.com are primary #d7ffb8, secondary #0000ee and accent #ddf4ff, on a #ffffff background. The neutrals used most are #3c3c3c, #777777 and #000000.

How do I use the Duolingo design system in my own app?

Download the DTCG tokens, Tailwind config or CSS variables on this page, or run npx designlang duolingo.com for a fresh read. To apply the look to an existing repo, Retheme maps the tokens onto your Tailwind or shadcn theme and opens a pull request.

Is this the official design system?

No. It is measured from duolingo.com's public pages on 25 June 2026, so it shows what the site renders, not Duolingo's internal source files. Duolingo is a trademark of its owner and is not affiliated with designlang.

Measured from the public pages of duolingo.com on 25 June 2026. Duolingo is a trademark of its owner; designlang is not affiliated with it. More: the full Duolingo brand kit, the token extraction guide and the markdown version of this page.