Free and open to everyone
All you need is a screen, an internet connection and a few minutes a day (paraphrased) Published
The system
Fixed, everywhere
- Feather Green #58CC02 leads; white is the base of every app and page
- Feather Bold headlines lowercase, short, in green; body in DIN Next Rounded (site: duolingo-sans)
- Logotype only in Feather Green, white or gray; never recolored, outlined, skewed (0° or 90° only), filled or respaced
- Illustration from rounded shapes, flat color, pill shadows; no pointy shapes
- Buttons ALL CAPS, no punctuation; on screen they are chunky 12px-radius buttons with a solid lip
- "Learners", never "users"
The one thing that varies
Ground color: secondary colors may be bold full-bleed grounds (the site adds a deep navy band for Super Duolingo); Duo goes only on select secondary grounds, the cast on a broader range.
Source: web.archive.org/web/20260823211825/https://design.duolingo.com/identity/colorweb.archive.org/web/20260602063136/https://design.duolingo.com/marketing/assetsduolingo.com
Color, in proportion
Share of the 7803px desktop homepage by band ground, measured at 1440 on 2026-10-29 (white: nav to the anytime band and the DET and closing bands; navy: the Super Duolingo band; green: the wave strip and footer). The guide publishes no ratio.
Tone by the reader's state
- Learner succeeds: celebrate, exclamation points welcome
- Social, push and campaigns led by Duo
- Learner stumbles: friendly and helpful, without overdoing it
- Homepage and landing pages (observed 2026-10-29)
- Serious stories: tone down exuberance and exclamation points
The voice never changes; the tone reads the learner's state. Duolingo publishes the states and examples; the levels are our reading, and the homepage level is observed.
How loud each format gets
Silent
Quiet
CalmThird-party / press
WarmLanding page (as www.duolingo.com builds its homepage)In-app / product UI
LoudPush notification / emailPrint / out-of-home
LoudestSocial
Our engine's setting, built from their rules.
Every piece passes 3 checks
Logo hidden
Cover the logo. It should still read as Duolingo: a white page, one loud Feather Green, short lowercase rounded headlines, chunky caps buttons with a solid lip, and a rounded cartoon character somewhere.
Swap test
Put another app's logo on it. If the lip buttons, the green Feather headlines and the rounded cast don't feel out of place, it's generic, and it goes back.
Copy check
Buttons ALL CAPS with no punctuation; Feather lines lowercase and under about 10 words; "learners", never "users"; no period at the end of a headline.
Strategy
The world's most popular, most enjoyable way to learn a language (guide, "The Duolingo Difference") Published
Fun, never a chore
Technology plus the power of play makes language learning a joy (paraphrased) Published
Effective
Bite-sized lessons based on learning science (paraphrased) Published
Inclusive and worldwide
Loved by people of all ages and backgrounds, 35+ languages (paraphrased) Published
The most fun way to learn languages, chess, and more!
free. fun. effective.
backed by science
stay motivated
Full spec
- For Published
- Everyone: consumers in developed and developing markets, institutions, prospective employees, volunteer community (messages by audience)
- Promise Published
- Everyone can Duolingo.
- Mission Published
- Develop the best language education in the world and make it available to everyone (paraphrased from the guide)
Proof behind each pillar
- Free and open to everyone. Duolingo is free (guide); the homepage hero offers GET STARTED with no price
- Fun, never a chore. Bite-sized lessons based on learning science; homepage links "research shows that it works" to duolingo.com/efficacy
- Effective. Bite-sized lessons based on learning science; homepage links "research shows that it works" to duolingo.com/efficacy
- Inclusive and worldwide. 35+ languages to learn (guide); the homepage course strip lists 40 language courses plus Chess and Math (observed)
Story Published
Language learning once needed tutors, textbooks and lots of money; Duolingo opened the door so anyone with a screen can learn (paraphrased)
Values
Inspiring
anything is possible when you Duolingo
PublishedInclusive
language belongs to everyone; free, accessible
PublishedCan-do
rooting for learners, bringing the energy
PublishedCurious
a little language makes life richer
PublishedQuirky
the fun in language fundamentals; eccentric characters and sentences
PublishedCategory. Language learning app (homepage now also offers chess and math courses, observed) Published
Why them
- Free
- Fun, game-like motivation (streaks, XP, Duo)
- Bite-sized lessons based on learning science
- 35+ languages, inclusive
Boilerplate Published
Duolingo is the world's #1 way to learn a language. (the guide's one-sentence description; its longer press boilerplate carries dated figures and is not reproduced)
Taglines
More real lines
personalized learning
Learning with Duolingo is fun, and research shows that it works!
learn anytime, anywhere
POWER UP WITH SUPER DUOLINGO
duolingo english test
learn a language with duolingo
GET STARTED
I ALREADY HAVE AN ACCOUNT
TRY 1 WEEK FREE
CERTIFY YOUR ENGLISH
Everyone can Duolingo.
Go. Learn a language.
One line carries the brand: "Everyone can Duolingo." The guide frames Duolingo as free, fun, effective and for everyone, with messages written per audience (learners in developed and developing markets, institutions, recruits, volunteers). The homepage turns that into three words: "free. fun. effective."
Source: web.archive.org/web/20260823211826/https://design.duolingo.com/writing/brand-narrativeduolingo.com
Personality and voice
Expressive: brief, active, direct, excitedbut not long-winded, passive, unclear, indifferent, in your facePublished
Playful: friendly, jolly, creative, clever in quick dosesbut not touchy-feely, sarcastic or smug, dry, intellectualPublished
Embracing: supportive, gender-neutral, contractions, clearbut not aggressive, gendered, writing words out, complicated, mean-spiritedPublished
Worldly: interested, knowledgeable, universal, multilingual (English first)but not smug, a know-it-all, slang not everyone knows, English onlyPublished
Not quite correct. Try again!
Incorrect.
Correct! Awesome work!
You have successfully passed this level
Consistent voice builds trust; tone flexes with how learners feel.
Full spec
- Button copy in ALL CAPS, no punctuation in buttons ("NO THANKS", not "NO, THANKS")
- Sentence case for headers, subheads, page and blog titles; Feather Bold headlines fully lowercase
- No period at the end of headlines or subheads; an exclamation point is allowed
- Avoid em dashes and semicolons: prefer two short sentences; if an em dash is unavoidable, space both sides
- Serial (Oxford) comma; en dash without spaces for ranges; ellipses with no spaces
- Numerals for all numbers, even under 10, except at the start of a sentence; commas over 999 except XP/currency totals in product; % symbol
- Contractions encouraged; gender-neutral (they/them); no "&" for "and" when there is room
- Feather Bold lines of more than about 10 words move to the body face
- Do not combine the two typefaces in the same sentence
- URLs without http:// or www., lowercase (duolingo.com); emails lowercase
- On web pages use the homepage voice: lowercase Feather headlines of 2-5 words, one plain paragraph naming a benefit, no Duo guilt-trips, puns or emoji
expressiveplayfulembracingworldly
Four qualities (Expressive, Playful, Embracing, Worldly), a tone that reads the room, Duo as an "extra" but kind character, and detailed style rules (caps buttons, sentence-case headers, no headline periods).
- Celebrate success ("You did it!"), support stumbles ("Not quite correct. Try again!")
- Serious stories: tone down exuberance and exclamation points
- Duo: helpful, motivating, persistent, emotive, slightly awkward; never threatening, angry or mean
- Homepage voice for landing pages: lowercase 2-5-word headlines, one plain paragraph, caps CTA
- Two voices. Guide/campaign voice (Duo, push notifications, social): exuberant, jokey, Duo-led. Homepage voice (www.duolingo.com, observed): short lowercase Feather headlines of 2-5 words ("free. fun. effective.", "stay motivated"), then one plain 1-3 sentence paragraph in sentence case that names a benefit; no Duo guilt-trips, no puns, no emoji. A landing page follows the homepage voice.
- Voice never changes; tone reads the room: celebrate wins with exclamation points, support stumbles gently, tone down for serious stories (tone page).
- Duo never talks or narrates; he communicates only through text clearly from him ("Hi, it's Duo.") or a speech bubble (writing/duo page).
- We call people "learners", never "users" (glossary).
Their words
learnersexercisesXPstreaklessonsskillscoursesokaywebsiteinternetlog in (verb)login (noun)sign upanytimeEveryone can Duolingo
Never
userschallengestreeOKWeb siteInternet (capitalized)any time
Source: web.archive.org/web/20260823212032/https://design.duolingo.com/writing/voice
- Don’t use "users"
- Don’t be sarcastic, smug or dry
- Don’t use slang not everyone knows
- Don’t have Duo talk, narrate ads, or carry signs
| Tagline | Everyone can Duolingo. |
|---|---|
| Qualities | Expressive, Playful, Embracing, Worldly |
Source: web.archive.org/web/20260823212032/https://design.duolingo.com/writing/voiceweb.archive.org/web/20260823212032/https://design.duolingo.com/writing/toneweb.archive.org/web/20260823212020/https://design.duolingo.com/writing/duoweb.archive.org/web/20260823212032/https://design.duolingo.com/writing/styleweb.archive.org/web/20260823212032/https://design.duolingo.com/writing/glossaryweb.archive.org/web/20260823211826/https://design.duolingo.com/writing/brand-narrative
Logo
Logos shown from Duolingo's own CDN and from Brandfetch for reference. Duolingo and Duo are Duolingo's trademarks. Not affiliated, and not for download.
duolingo
duolingo
The name set in Duo-inspired curves is the brand's signature; Duo beside it adds instant recognition in third-party spaces.
Full spec
- Colors: Feather Green, white or gray only
- Minimum size: 100px on screen; 35mm (1.375in) in print
- Clear space: no graphics or text inside the pictured zone, drawn as one "o"-sized circle off each side (diagram; no number published)
- Place it in one of the four corners or centred on the vertical axis; make it as large as possible, not under one-third of the canvas width
- Rotation: 0° by default; 90° for skyscrapers, banners, merch
- Landscape lockup: bottom of Duo aligns with the inside of the "g" loop, side of his head with the top of the "l", gap = half the x-height
- Portrait lockup for third parties in square or tall spaces
- Icon/avatar: in a square frame Duo's eye mask touches the left and right edges; in a circle leave space; usable down to 16px
- Sub-brands: wordmark + sub-brand title share an x-height, separated by the width of the "o" counter, hierarchy by weight
- Don’t change the color
- Don’t squash it
- Don’t recreate it in a different font
- Don’t outline it
- Don’t fill it with images
- Don’t place it over a busy background
- Don’t skew it
- Don’t fill it with gradients
- Don’t change its spacing or proportions
- Don’t change the scale or position of Duo in a lockup
- Don’t let Duo touch or sit on the logotype
- Don’t use other Duo poses in a lockup
| Min size screen | 100px |
|---|---|
| Min size print | 35mm / 1.375in |
| Colorways | Feather Green, white, gray |
| Lockup gap | half the x-height |
| Rotation | 0° or 90° |
| Site nav size | 179x42 desktop, 161x38 phone (observed) |
One logotype in custom lowercase letterforms, plus two fixed lockups with Duo (landscape, portrait) and the Duo-face icon. The site uses its own single-color variant: a green Duo silhouette left of the logotype, 179x42.
Source: web.archive.org/web/20260823211825/https://design.duolingo.com/identity/logosweb.archive.org/web/20260711122151/https://design.duolingo.com/identity/brand-familyduolingo.com
Color
GET STARTED
free. fun. effective.
Green is the hue the world associates with Duolingo; the bright secondaries add delight without competing; neutrals give hierarchy.
Full spec
- Hierarchy: 1 Feather Green (the core), 2 Mask Green (ground for Duo), 3 Eel (type), 4 Snow (background)
- Secondaries add splashes to UI and illustration and may be bold full-bleed backgrounds
- Neutrals give utility and hierarchy without competing
- Use Duo's palette exactly for each body part
- Duo only on select secondary grounds (his green vibrates on others); the cast on a broader range
- Illustrations: use the 40-color palette as a guide, a few colors per illustration, pastels not white or gray as base
- On the homepage about 77% of the page height is white, 12% Feather Green and 12% the Super navy (observed by band, 2026-10-29)
- Don’t set Feather Bold in several secondary colors
- Don’t use gray as an illustration base
- Don’t put a shadow lighter than the ground under an illustration
| Feather Green | #58CC02, RGB 88 204 2, CMYK 58 0 96 0, PMS 361 C |
|---|---|
| Mask Green | #89E219, PMS 368 C |
| Eel | #4B4B4B, PMS 418 C |
| Snow | #FFFFFF |
| Macaw | #1CB0F6, PMS 306 C |
| Cardinal | #FF4B4B, PMS 1787 C |
| Bee | #FFC800, PMS 123 C |
| Fox | #FF9600, PMS 1375 C |
| Beetle | #CE82FF, PMS 2572 C |
| Humpback | #2B70C9, PMS 2144 C |
| Wolf / Hare / Swan / Polar | #777777 / #AFAFAF / #E5E5E5 / #F7F7F7 |
| Duo | Wing Overlay #43C000, Beak Inner #B66E28, Beak Lower/Feet #F49000, Beak Upper #FFC200, Beak Highlight #FFDE00, Tongue Pink #FFCAFF |
Four core colors taken from Duo (Feather Green, Mask Green, Eel, Snow), six bright secondaries, five neutrals, Duo's own body palette, and a 40-color illustration palette named after animals. The site runs almost entirely on white + Feather Green, with Macaw for links and outline-button labels, Wolf for body, and illustration-palette greens (Tree Frog, Turtle, Sea Sponge) for button lips and the footer.
Not published: color proportions (the homepage split in Proportion is measured, not published); the marketing "Colors" sub-section text (lost in the archive).
Source: web.archive.org/web/20260823211825/https://design.duolingo.com/identity/colorweb.archive.org/web/20260823212032/https://design.duolingo.com/illustration/shape-languageweb.archive.org/web/20260602063136/https://design.duolingo.com/marketing/assetsduolingo.com
Typography
Everyone can Duolingo.
stay motivated
Stay Motivated
A language company speaks through its type: Feather is ownable and loud; DIN Next Rounded is friendly and readable at length.
Full spec
| Their face | Use | License | Open stand-in |
|---|---|---|---|
| Feather Bold (served on www.duolingo.com as "feather", weight 700) | Large, brief headlines: lowercase, left-aligned, about 10 words at most, 30px minimum, in Feather Green or white on color | Proprietary and bespoke to Duolingo; not licensable. The guide publishes Nunito as its substitute for print and documents. | Mochiy Pop P One Calibrated 2026-10-29 against the real feather woff2 beside 16 Google Fonts: Mochiy Pop P One 400 set at 0.885x the site size (42.5px for 48px, 56.5px and -1.13px for 64px) lands within 0.1-0.9% of Feather's width on most headlines ("stay motivated" 372.8 vs 373.6px), x-height 24.23 vs 24.48px, and is the only candidate with Feather's single-storey a and hooked l. Nunito 900, the guide's substitute, ran 4-7% narrow and generic on screen. |
| DIN Next Rounded (brand law); www.duolingo.com serves its own "duolingo-sans" (variable, 100-900) | Headlines of 10+ words, subheads, all body copy, ALL CAPS buttons; 14px minimum, leading 140% | DIN Next Rounded: commercial licence (Monotype). duolingo-sans: Duolingo's own web face, not licensable. Nunito is the guide's published substitute. | Baloo 2 Calibrated 2026-10-29 against the real duolingo-sans woff2 beside 9 families: Baloo 2 (variable) at the site's px sizes matches the compact DIN-rounded skeleton: hero 32/44 at 650 -0.4px is +0.3% wide, body 17/24 at 475 -0.25px +0.2%, caps 15px 650 +0.5px within +-3%, ink within +-5%. Nunito ran 10-21% wide. Load the wght@400..800 range. |
- Feather Bold: large brief headlines, left-aligned lists, sentences ending with "Duolingo"
- Feather Bold: leading 100-110% (tighter above 80px), tracking -20, kerning optical, min 30px, lowercase always, left-aligned, never justified or hyphenated, about 10 words max
- DIN Next Rounded: headlines of 10+ words, subheads, all body; leading 140% (tighter above 40px), tracking 0, min 14px, left or centred
- Pair: Feather about 150% the size of DIN; equal leading; never both faces in one sentence; DIN never bigger than Feather
- With the logotype: DIN light, ideally 1.5x the logotype x-height, max 2x
- "duolingo" lowercase in Feather (typing ~ inserts the whole logotype); "Duolingo" sentence case in DIN
- Substitute: Nunito when brand fonts are unavailable (print and documents)
- Web rebuild stand-ins (calibrated round 3 against the real faces): Mochiy Pop P One 400 for Feather at 0.885x size (42.5 for 48, 56.5 for 64, 32 for 36) with the site's em tracking; Baloo 2 variable for duolingo-sans at the same px sizes with near-zero tracking (hero 650 -0.4px, body 475 -0.25px, 700 lines 650 -0.02em, caps 650 +0.5px). See kit.spec.type. Never Nunito or Barlow for the rebuild
- Don’t combine DIN Next Rounded and Feather Bold in one sentence
- Don’t set Feather Bold in multiple secondary colors
- Don’t set Feather Bold in Eel or another neutral unless printing one-color
- Don’t let type run off the display area
- Don’t set Feather Bold in sentence or title case
- Don’t set a DIN headline the same size as the logo
| Feather leading | 100-110% |
|---|---|
| Feather tracking | -20 (-0.02em) |
| Feather min | 30px / 30pt |
| DIN leading | 140% |
| DIN min | 14px / 14pt |
| Feather : DIN | 150% |
| Site h2 | feather 700 48/60, #58CC02 (observed) |
| Site band h1 | feather 700 64/80, -1.28px (observed) |
| Site body | duolingo-sans 400 17/24 #777777 (observed) |
| Build stand-ins | display: Mochiy Pop P One 400 42.5px 0 / 56.5px -1.13px / 32px; body: Baloo 2 hero 32px 650 -0.4px, body 17px 475 -0.25px, caps 15px 650 +0.5px, footer 15px 650 -0.3px |
Two faces: Feather Bold (bespoke, headlines) and DIN Next Rounded (licensed, everything else), with Nunito published as the substitute. The site serves "feather" for section headlines and its own "duolingo-sans" for the hero sentence, body, buttons and footer.
Source: web.archive.org/web/20260711122139/https://design.duolingo.com/identity/typographyduolingo.com
Graphic elements
GET STARTED
Get started
3D "lip" buttons · every CTA on the site and in the app
stay motivated
Stay Motivated
lowercase Feather headlines in green · section headlines, campaign lines
Do flat illustrations from rounded rectangles, circles and rounded triangles; about 15 shapes per figure; expressive poses, often cropped; pill-shaped shadows darker than the base; floating accents (coins, gems, flames) above or below.
Duo and the cast, built from rounded shapes · every image slot
Do gold coins, gems, hearts, flames, chests and phones tilted in flat perspective, floating on white; the footer CTA sits on a green wave that becomes the footer.
game-reward props · feature art, anytime band, footer CTA
Specimens use sample copy, not Duolingo’s.
Characters carry emotion and story; the lip makes every action feel tactile, like the app.
Full spec
- Use Duo to express excitement, emotion or occasions; he is the most recognizable asset
- Use characters all at once, in pairs or alone, always posed with expression
- Floating accents only when they serve the illustration
- UI: 12px radius, solid lip under buttons, 2px hairlines (observed)
- Don’t use characters in a static, expressionless state
- Don’t let Duo carry signs or weapons
- Don’t make Duo nocturnal, loud or sudden
| Button radius | 12px (observed) |
|---|---|
| Primary lip | 4px #58A700 (observed) |
| Outline lip | 2px #E5E5E5 + 2px border (observed) |
No abstract graphic system: the brand's "elements" are Duo, the cast of characters and the game props (coins, gems, flames, hearts). On the web, the recurring element is the chunky 3D button with a solid lip, and 2px hairlines.
Source: web.archive.org/web/20260602063136/https://design.duolingo.com/marketing/assetsweb.archive.org/web/20250822234243/https://design.duolingo.com/marketing/elementsweb.archive.org/web/20260823212020/https://design.duolingo.com/writing/duoduolingo.com
Iconography
The guide publishes no UI icon set.
Full spec
The guide publishes no UI icon set. Its resources page lists approved emoji for notifications. The homepage uses rounded-rectangle course flag tiles, chevrons and store glyphs.
- Course flags: 36x28 rounded tiles in flat palette colors (observed)
- Emoji: pick from the approved set; one per push notification, omitted about half the time
- Don’t use sharp, pointy shapes: "pointy shapes are off-brand" (shape language)
| Icon grid | not published |
|---|---|
| Stroke | not published |
Not published: an icon grid, stroke or UI icon set.
Source: web.archive.org/web/20260823211825/https://design.duolingo.com/resourcesweb.archive.org/web/20260823212032/https://design.duolingo.com/writing/styleduolingo.com
Illustration
Simple rounded shapes scale and animate easily, and read instantly as Duolingo.
Full spec
- Only three base shapes: rounded rectangle (most used), circle, rounded triangle; every shape has rounded edges
- Rhythm: vary shape sizes like long and short notes
- Simplicity: about 15 shapes is "good"; 6 is too abstract, 30 too many
- Flat perspective; depth only along the same line of sight
- Shadows below as a pill, never an oval, always darker than the base
- Pastels from the palette as base colors; never white (apps are white) or gray
- Characters: head and body 1-2 shapes each; five eye styles (round, glasses, almond, linear, dots), always pill eyes, pupils off-centre; mouths asymmetric; hands as circles, max 4 fingers
- Duo: bends at waist, elbow, wrist; feet can separate and wiggle; no fingers; pupils never centred
- Pose characters with personality; crop to expressions
- Don’t use pointy shapes
- Don’t use oval shadows
- Don’t use gray as a base
- Don’t center pupils
- Don’t give Duo fingers
- Don’t darken Duo's wings when posed over his body
- Don’t use too many colors
| Shapes per figure | about 15 |
|---|---|
| Max fingers | 4 |
| Eye styles | 5 |
Illustration is the de-facto visual style. Everything is built from three rounded shapes, on a flat perspective, with pill shadows and floating accents, colored from a 40-color animal-named palette.
Source: web.archive.org/web/20260823212032/https://design.duolingo.com/illustration/shape-languageweb.archive.org/web/20251226082046/https://design.duolingo.com/illustrationweb.archive.org/web/20260118083116/https://design.duolingo.com/illustration/charactersweb.archive.org/web/20260711122151/https://design.duolingo.com/illustration/duoweb.archive.org/web/20260711122151/https://design.duolingo.com/identity/imagery
Photography
Shows the millions of real people learning, in their diversity.
Full spec
- People who Duolingo, with real stories
- A sense of place: commute, ordering food abroad, activities with new friends
- Portraits: authentic, worldwide, a touch of green when possible
- Landing page: none (observed)
- Don’t use stock-looking, staged imagery (our reading of "authentic, real")
| Homepage photos | none (observed) |
|---|
Secondary to illustration. Authentic portraits and real environments of real learners, ideally with green in clothing or surroundings. The homepage uses no photography.
Source: web.archive.org/web/20260711122151/https://design.duolingo.com/identity/imagery
Motion
fixed 72px white bar slides in on scroll; border-color transition 0.3s
The guide's motion page survives in the archive with no content, so no motion system is published.
Full spec
The guide's motion page survives in the archive with no content, so no motion system is published. On the homepage every illustration is a Lottie loop over a static resting frame, buttons press instantly onto their lip, and the sticky nav slides in.
- Button press: on :active the face drops by its lip (4px primary, 2px outline) and the lip disappears, with no transition (observed)
- Sticky nav: slides in over 0.4s cubic-bezier(0.22, 1, 0.36, 1) once the hero has scrolled away (observed)
- Illustration motion loops small character moves; the resting frame must read on its own (observed)
- Duo moves by bending at waist, elbow and wrist; his feet can separate and wiggle (guide, Duo page)
Not published: motion curves, durations or principles (the guide's motion page is empty in every snapshot).
Source: web.archive.org/web/20260811044101/https://design.duolingo.com/identity/motionduolingo.comweb.archive.org/web/20260711122151/https://design.duolingo.com/illustration/duo
Interface & layout
The page, band by band
Nav (transparent, 70px)
Course strip
Features x4
Learn anytime, anywhere
Closing CTA + wave
Footer
Buttons
Full spec
The homepage is one centred 988px column on white: hero split, a course strip, alternating 530px feature rows, a centred app band, one deep-navy band, a feature row, a centred closing CTA on a green wave, and a green footer.
Measured from duolingo.com's Playwright computed styles, pseudo-elements and boxes at 1440 and 390 wide, plus hover/active states, 2026-10-29; page height 7803 desktop, 8828 phone.
Spacing
| Measure | Desktop | Phone |
|---|---|---|
| Page margin | 226px | 15px |
| Section padding | 96px | 96px |
| Hero text width | max 480px, centered | full width |
| Card gap | 12px | 12px |
| Navigation | 70px | 70px |
Type, at size
Band headline, centred, #042C60 (anytime) or #58CC02 (closing). BUILD: Mochiy Pop P One 400 56.5px, line-height 80px, letter-spacing -1.13px (-0.02em); phone 32px, line-height 45px, -0.64px. Site: feather 700 64/80 -1.28px
Feather Bold (served on www.duolingo.com as "feather", weight 700) · 56.5px (phone 32) · line 1.416 · tracking -1.13px · weight 400
Feature and DET headline, lowercase, #58CC02. BUILD: Mochiy Pop P One 400 42.5px, line-height 60px, letter-spacing 0; phone 32px, line-height 45px, 0. Site: feather 700 48/60 and 36/45
Feather Bold (served on www.duolingo.com as "feather", weight 700) · 42.5px (phone 32) · line 1.412 · weight 400
Hero sentence, #4B4B4B, centred. BUILD: Baloo 2 650 32/44, letter-spacing -0.4px (-0.0125em). Site: duolingo-sans 700, 0px
DIN Next Rounded (brand law); www.duolingo.com serves its own "duolingo-sans" (variable, 100-900) · 32px · line 1.375 · tracking -0.4px · weight 650
Feature paragraph, #777777; inline link #1CB0F6 Baloo 2 650 -0.34px, no underline. BUILD: Baloo 2 475 17/24, letter-spacing -0.25px (-0.015em). Site: duolingo-sans 400, 0px
DIN Next Rounded (brand law); www.duolingo.com serves its own "duolingo-sans" (variable, 100-900) · 17px · line 1.41 · tracking -0.25px · weight 475
Button label, course-strip label, SITE LANGUAGE control: ALL CAPS. BUILD: Baloo 2 650 15px, line-height 20px, letter-spacing +0.5px (0.033em), text-transform uppercase. Site: duolingo-sans 700 +0.8px
DIN Next Rounded (brand law); www.duolingo.com serves its own "duolingo-sans" (variable, 100-900) · 15px · line 1.33 · tracking 0.5px · weight 650
App-store badge text, #4B4B4B, mixed case. BUILD: Baloo 2 650, small line 14/17 -0.28px over big line 17/20 -0.34px (-0.02em)
DIN Next Rounded (brand law); www.duolingo.com serves its own "duolingo-sans" (variable, 100-900) · 17px · line 1.18 · tracking -0.34px · weight 650
Footer column heading, #D7FFB8. BUILD: Baloo 2 650 19/26.6, letter-spacing -0.38px (-0.02em)
DIN Next Rounded (brand law); www.duolingo.com serves its own "duolingo-sans" (variable, 100-900) · 19px · line 1.4 · tracking -0.38px · weight 650
Footer link #A5ED6E; "Site language:" label same style in #D7FFB8. BUILD: Baloo 2 650 15/22, letter-spacing -0.3px (-0.02em)
DIN Next Rounded (brand law); www.duolingo.com serves its own "duolingo-sans" (variable, 100-900) · 15px · line 1.47 · tracking -0.3px · weight 650
Site-language link, #A5ED6E. BUILD: Baloo 2 650 13/16, letter-spacing -0.26px (-0.02em)
DIN Next Rounded (brand law); www.duolingo.com serves its own "duolingo-sans" (variable, 100-900) · 13px · line 1.23 · tracking -0.26px · weight 650
- Motion
- UI presses are instant (transition 0s): the face drops onto its lip; the sticky nav slides in over 0.4s cubic-bezier(0.22, 1, 0.36, 1); illustrations are Lottie loops
- Buttons
- rounded
Page anatomy
How Duolingo’s own landing pages are built, observed on duolingo.com, 2026-10-29. The full measurements are in spec.md.
- Navigation
- Desktop: a transparent 70px bar inside the 988px column (x226-x1214): green Duo-and-wordmark logo left, "SITE LANGUAGE: ENGLISH" + chevron right. No links, no CTA at the top. After scrolling past the hero a fixed white 72px bar slides in: same logo left, a compact green GET STARTED button right, 2px #E5E5E5 bottom border.
- Hero
- Two boxes inside the 988px column, pushed to the right: a 424x424 illustration box (Duo and six characters tumbling with coins and a phone) at x295-719 and a 480px centred text box at x734-1214, 15px apart (the element boxes are 15px apart; there is no 80px gap). Text: 2-line hero sentence then two stacked 330x50 buttons. The header (nav + hero + course strip) is min-height 100vh: 900px at 1440x900
- Course strip
- Full-bleed 80px strip at the bottom of the first screen: a horizontal carousel of course chips (flag + uppercase name) with prev/next chevrons.
- Feature rows (x4)
- Four 530px rows that alternate art right / art left: "free. fun. effective.", "backed by science", "stay motivated", "personalized learning". Each: lowercase green Feather headline, a gray paragraph, a 530px illustration. No buttons except one inline link.
- Learn anytime, anywhere
- Centred band: 64px navy Feather headline on 2 lines, two app-store badges side by side, floating phones and app icons scattered across the full width behind and below.
- Super Duolingo
- Full-bleed 900px deep-navy band: a 530px Super card illustration left, the "POWER UP WITH SUPER DUOLINGO" italic gradient wordmark image and a white TRY 1 WEEK FREE button right.
- Duolingo English Test
- One feature row: green Feather headline, gray paragraph and an outline CERTIFY YOUR ENGLISH button left; DET illustration right.
- Closing CTA with green wave
- Centred 64px green Feather headline on 2 lines and a GET STARTED button, above a full-bleed illustration of coins, a chest, gems, a heart and a flame floating over a Duo-in-a-phone, sitting in a white dip of a #58CC02 wave that becomes the footer.
- Footer
- Feather Green footer, no logo: five link columns, a full-bleed 2px hairline, then a "Site language:" list of 32 languages in their own scripts. No copyright line, no address, no social icons.
Source: duolingo.com
In use
Duo's five-second Super Bowl spot · 2024
Five seconds is enough when the character is the brand: the TV spot is the joke and the push turns it into a lesson started. Our reading
The death of Duo · 2025
Years of Duo as the persistent owl gave the audience the context, so one post could become a story people retold for them. Our reading
Full spec
How loud the system gets by format: the guide's rules plus the homepage as observed on 2026-10-29.
- Duo's five-second Super Bowl spot. A five-second spot built on Duo's rear end, a gag learners already engaged with, aired in several local markets during the February 2024 Super Bowl. Right after it aired, a coordinated push reached about 4 million learners, 95% of them within 3.9 seconds: "Hi, it's Duo. No buts... do a lesson now!" blog.duolingo.com/super-bowl-commercial-2024
- The death of Duo. On Feb. 11, 2025 Duolingo announced on X that Duo had died, said "authorities" were investigating, and offered to sign people up for Duolingo Max in his memory. Its social profile pictures changed to show the death; a spokesperson told KDKA it was a brand marketing campaign. wibw.com/2025/02/12/duo-duolingo-owl-has-died-company-says
| Format | What they did | Source |
|---|---|---|
| website (homepage) | One centred 988px column on white: hero split with two caps buttons, course strip of flag tiles, four alternating 530px feature rows with lowercase green Feather headlines, a deep-navy Super band, a green wave into a green footer (observed 2026-10-29). | duolingo.com |
| push notification | Notifications from Duo in a light-blue card with one emoji from the approved list, omitted about half the time; examples "Time for Dutch!" and "Hi! It's Duo." | web.archive.org/web/20260823212032/https://design.duolingo.com/writing/style |
| in-app feedback | Success and stumble copy written to the learner's state: "Correct!" and "Awesome work!" versus "Not quite correct. Try again!" | web.archive.org/web/20260823212032/https://design.duolingo.com/writing/tone |
| premium sub-brand | Duolingo Plus has its own logotype: the wordmark plus a Plus token, spaced by the width of the "o" counter; its colorways change dramatically to signal the enhanced app. | web.archive.org/web/20260711122151/https://design.duolingo.com/identity/brand-family |
| sub-brands | Generic lockup for initiatives without their own rules: wordmark plus a lighter title sharing its x-height (events, incubator, podcasts, gear, ai, push, university programs, cefr checker, community, design studio). | web.archive.org/web/20260711122151/https://design.duolingo.com/identity/brand-family |
| marketing and advertising | Duo stars to express excitement, emotion or an occasion (like Valentine's Day), on select secondary grounds only; the cast appears all at once, in pairs or alone, always posed. | web.archive.org/web/20260602063136/https://design.duolingo.com/marketing/assets |
| print, banners and merch | Logo in a corner or centred, as large as possible, at least 35mm in print; rotated 90 degrees for skyscrapers, banners and merch. | web.archive.org/web/20260823211825/https://design.duolingo.com/identity/logos |
| premium web promo | Super Duolingo band on the homepage: #100F3E ground, gradient italic wordmark image, white TRY 1 WEEK FREE button with a translucent lip (observed 2026-10-29). | duolingo.com |
Our setting for each format
| Format | Loudness | Must appear | What varies |
|---|---|---|---|
| Landing page (as www.duolingo.com builds its homepage) | Exactly kit.spec.page: transparent nav with logo + language control, hero split (art left, 32px duolingo-sans sentence + GET STARTED / I ALREADY HAVE AN ACCOUNT right), course strip, alternating 530px feature rows with lowercase green Feather headlines, centred app band, deep-navy promo band, closing CTA on the green wave, green footer with verbatim links. 3D lip buttons. Homepage voice. Here the site's centred band headlines and 48px untracked Feather are correct, not a conflict with the guide. | which features, which promo band; illustrations from the slot assets only | |
| In-app / product UI | white base, Feather Green actions, caps buttons, encouraging tone | secondary colors for states | |
| Push notification / email | Duo's voice when from Duo; one emoji at most, omitted half the time | tone by learner state | |
| Social | Duo and cast, playful voice, multilingual replies | emoji freely | |
| Print / out-of-home | logo large in a corner or centred (min 35mm), Feather headline lowercase, bold secondary ground allowed | 90° logo on tall formats | |
| Third-party / press | landscape or portrait lockup with clear space | lockup choice by space |
Ads
Rules
Do
- Feather Green leads on white; when in doubt, lean in to green
- Feather headlines lowercase, short and green; everything else in DIN Next Rounded (stand-ins: Mochiy Pop P One at 0.885x, Baloo 2)
- Buttons ALL CAPS, no punctuation, 12px radius, solid lip
- Illustration from rounded shapes with pill shadows; photography only of real learners
- "Learners", never "users"
- For a landing page follow kit.spec.page exactly: the site's centred band headlines and untracked 48px Feather are correct there
Don’t
- recolor, outline, skew or respace the logotype
- set Feather in Title Case, caps, neutrals or several colors
- use pointy shapes, oval shadows or gray as an illustration base
- use blurred drop shadows or pill-shaped buttons
- have Duo talk, narrate or carry signs
Source: web.archive.org/web/20260825155151/https://design.duolingo.comweb.archive.org/web/20260823211825/https://design.duolingo.com/identity/logosweb.archive.org/web/20260711122139/https://design.duolingo.com/identity/typographyweb.archive.org/web/20260823212032/https://design.duolingo.com/illustration/shape-languageweb.archive.org/web/20260823212032/https://design.duolingo.com/writing/styleduolingo.com
Steal this kit
Your name and logo, Duolingo’s system.
Comes with you
- Color roles and how much of each
- Type pairing, with open fonts
- Voice rules the writing check enforces
- Icon, photo, illustration and motion recipes
- The strategy frame, to fill with yours
Stays yours
- Your name and logo
- Your proof: numbers, customers, quotes
- Your purpose and claims. Theirs aren’t yours to make
Use this kit for my brand Use this brand in Claude
Hand it to a developer
- spec.mdEvery value and rule
- tokens.cssCSS variables
- tokens.jsonDesign tokens (DTCG)
- kit.jsonWhat our engines read
Your brand next
Get your brand audit Put your brand in Claude What goes in a brand book
What Duolingo doesn’t publish
- Color proportions: not published (the split in Proportion is measured on the homepage)
- Logotype clear space: pictured only, no number published
- Gray logotype file: named by the guide, not retrievable; only the green web logo and the white logotype are shown
- App-icon artwork: not published (the archived image did not load)
- Motion: not published (the guide's motion page is empty in every snapshot); all motion values are observed
- Icon grid, stroke and UI icon set: not published
- Web type scale: not published; every size in kit.spec.type is observed
- Button hover, focus and pressed states: not published; hover and pressed are observed, the focus ring was not measured
- Copyright line, address and phone: none on the homepage
- The marketing "Colors" sub-section text: not published in any snapshot
- Legal entity name: not published in the guide
- Web licences for Feather Bold, DIN Next Rounded and duolingo-sans: not available; Mochiy Pop P One and Baloo 2 are calibrated stand-ins
- Owl-only symbol (the 40x38 mark on the phone sticky bar): not published as its own file
- The guide (design.duolingo.com) now 301-redirects to blog.duolingo.com/hub/design/; every guide citation here is a Wayback Machine snapshot from 2025-08 to 2026-08
Each value is marked published, observed, our reading or our recipe, with its source. Checked 2026-10-29. Not affiliated with Duolingo.