What is Duolingo's primary brand color?

Duolingo's primary is owl green at #58cc02 — the exact hex carried by the `--color-owl` and `--color-tree-frog` CSS variables. It anchors the wordmark, the 'Get started' CTA pill, the Duo mascot's body, and the section headings (`free. fun. effective.`, `backed by science`, `stay motivated`, `personalized learning`). The deeper press state is #58a700 (`--color-tree-frog`) and the soft tint is #d7ffb8 (`--color-sea-sponge`). The brand explicitly refuses to introduce a second saturated CTA color — secondary actions render as a blue-outlined pill with #1cb0f6 (macaw) text on white, not as a competing fill.

What typography does Duolingo use, and what's the substitute?

Duolingo runs two custom typefaces. Feather Bold (declared as `feather, sans-serif`) carries display at 48px and 64px, weight 700, with -1.28px letter-spacing on the 64px hero — used for ` ` and ` ` only. DIN Round (`din-round, sans-serif`) handles everything else: 17px body at weight 500 with 24px line-height, 13–15px UI labels at weight 700, and a signature uppercase button label at 15px / weight 700 / 0.8px letter-spacing. Neither face is open-source. Nunito Bold is the closest free substitute for Feather; DIN Next Rounded or Quicksand approximates DIN Round.

Why are Duolingo's primary buttons uppercase with letter-spacing?

The primary CTA renders DIN Round at 15px / weight 700 / 0.8px letter-spacing / uppercase — the most-frequent typography signature in the extraction (42 occurrences). The all-caps treatment is the brand's UI confidence signal: it reads as a stamped game-button rather than a sentence. The pill geometry combines 16px border-radius (`--web-ui_button-border-radius`) with a 3–4px flat bottom-shadow lip that gives every primary button a tactile, gamepad-button feel. Sentence-case CTAs would break the gamified tone the system depends on.

What role do the cartoon mascots play in the system?

Mascots are the entire decoration layer. The site has zero gradient meshes, zero atmospheric photography, zero pattern textures — instead, the 352 CSS variables include named characters (Duo, Lily, Junior, Bea, Falstaff, Eddy, Lin, Lucy, Vikram, Zari, Oscar, Bea Junior) each with their own `-shine`, `-radio`, and `-secondary` color triplets. Hero sections cluster mascots in floating constellations; feature sections pair one isometric mascot scene per illustrated text panel. Substituting stock illustration breaks the system; the character library is brand-specific IP.

Why are Duolingo's colors named after animals?

The 352 `:root` CSS custom properties name colors after animals and birds rather than numeric scales — `--color-owl` (#58cc02), `--color-macaw` (#1cb0f6), `--color-cardinal` (#ff4b4b), `--color-fox` (#ff9600), `--color-bee` (#ffc800), `--color-koala` (#d7d7d7), `--color-beetle` (#ce82ff), `--color-fire-ant` (#ea2b2b), `--color-kiwi` (#7ac70c). The vocabulary mirrors the mascot taxonomy and makes the design tokens legible to non-designers across the org. Where shadcn's `primary` / `destructive` / `accent` are role-based, Duolingo's are character-based — color belongs to a creature.

Can I use this DESIGN.md to build a gamified learning React app?

Yes — the file feeds Claude, Cursor, or Copilot and the agent will reproduce Duolingo's specific dialect (owl-green pill with bottom-shadow lip, uppercase DIN-Round labels, navy Feather display, mascot scene cards on pure white) rather than a generic shadcn theme of subdued grayscale. Every hex, type token, radius, and spacing value is a quoted value you can paste into Tailwind config or CSS variables. The mascot illustrations are Duolingo IP — source your own character set or rely on placeholder isometric shapes when reusing the system.

Duolingo Design System

Duolingo's design system as a DESIGN.md file.

About Duolingo DESIGN.md

Curated by Dov AzencotUpdated May 13, 2026Source duolingo.com

Education & Learning

Duolingo's marketing system reads as a children's-book classroom rendered with platform-grade UI rigor. The canvas is pure white edge-to-edge — no cream tint, no gradient mesh, no dark hero band — and every section is anchored by cartoon mascots: Duo the green owl, Lily the purple teenager, Junior the rosy toddler, Bea the blue trans flag-coded human. Display headlines run Feather Bold at 64px / weight 700 / -1.28px letter-spacing in deep navy ("#042c60"), while the iconic green section titles ("free. fun. effective.", "backed by science", "stay motivated") sit at 48px in owl green ("#58cc02"). Body paragraphs drop to DIN Round at 17px / weight 500 / line-height 24px in mid-gray ("#777777") — the contrast between the heavy cartoon display type and the modest body sans is the brand's central rhythm.

This page packages the marketing surface into one DESIGN.md file built on the Google Labs spec. Inside: 18 color tokens covering owl green CTA, navy display ink, mid-gray body, structural hairlines, and the animal-named accent family pulled from the site's 352 CSS variables (owl, macaw, cardinal, fox, bee, koala, beetle, fire-ant, kiwi); 11 typography tokens splitting Feather Bold display from DIN Round body, with the uppercase 0.8px-letter-spaced button label as its own token; 5 corner radii anchored at the 12px button-border-radius and 16px web-ui radius; 9 spacing values built on an 8px / 24px / 32px / 48px / 96px scale; and 22 components covering the green CTA pill, secondary outline button, language-flag chip row, mascot scene card, illustrated feature card, navy footer hero, and the top language switcher.

Feed the file to Claude, Cursor, or GitHub Copilot and the agent reproduces Duolingo's specific dialect — owl-green pill on white, uppercase button labels, navy display, mascot illustration in the margin — instead of a generic education-app theme of pastel rectangles and Inter headings. Reference the tokens directly in Tailwind config or as CSS variables. Where most ed-tech brands hedge with serif gravitas or muted earth tones to signal seriousness, Duolingo holds the line on a single saturated green and a cartoon owl — confidence by playful restraint, not corporate softening.

What makes it distinct

Owl-green voltage#58cc02 carries every primary CTA and the brand wordmark; no second saturated accent exists
Two-typeface dialectFeather Bold weight 700 at 48–64px for display, DIN Round weight 500–700 at 13–19px for body and UI
Uppercase button labelsDIN Round 15px weight 700 with 0.8px letter-spacing on every primary CTA, never sentence case
Mascot-driven decorationDuo the owl, Lily, Junior, and Bea replace gradients, mesh backgrounds, and atmospheric depth
Animal-named color vocabulary352 CSS variables grouped as owl, macaw, cardinal, fox, bee, koala instead of numeric scales

Live at duolingo.com

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

duolingo.com

Explore Duolingo

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Brand & Accent

Sparing, CTA-only voltage.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Duolingo design system FAQ

Common questions about Duolingo's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

Duolingo — official site

The free, fun, and effective way to learn a language, anchoring the design language documented here.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files — the format this page is built on.

Use Duolingo in your project

One machine-readable file. Drop it into Claude, Cursor, or any AI tool that reads DESIGN.md.

Download DESIGN.md

Get Pro — Save 33%·Ends in --:--:--→