# Duolingo: brand book and build spec

Duolingo runs on a green owl and a bright cartoon world. Feather Green #58CC02 leads on white; headlines are short and lowercase in the bespoke Feather Bold, everything else in DIN Next Rounded (the site serves its own duolingo-sans). Illustration, not photography, carries the brand: Duo and a diverse cast built from rounded shapes. On the web every action is a chunky ALL CAPS button with a solid lip.

From unfairly.ai/brand-guidelines/duolingo, checked 2026-10-29. Unofficial study; not affiliated with Duolingo.

Every value is labelled with where it came from: **published** (the brand says it), **observed** (measured or seen on its live site, with the date), **our reading** (inferred from the evidence) or **our recipe** (how we apply the system). Files beside this one: tokens.css, tokens.json (DTCG 2025.10), kit.json.

**Thesis (our reading):** A game you want to open: one loud green, rounded cartoon shapes and tactile buttons make learning look like play. Based on: Guide: "the power of play", rounded-shape illustration rules, Feather Green first; site: 3D lip buttons, game-reward props in every slot.

## Purpose

Mission: Develop the best language education in the world and make it available to everyone (paraphrased from the guide) (published; https://web.archive.org/web/20260823211826/https://design.duolingo.com/writing/brand-narrative)

Story: Language learning once needed tutors, textbooks and lots of money; Duolingo opened the door so anyone with a screen can learn (paraphrased) (published)

| Value | What it means in the work | Source |
|---|---|---|
| Inspiring | anything is possible when you Duolingo | published: https://web.archive.org/web/20260823211826/https://design.duolingo.com/writing/brand-narrative |
| Inclusive | language belongs to everyone; free, accessible | published: https://web.archive.org/web/20260823211826/https://design.duolingo.com/writing/brand-narrative |
| Can-do | rooting for learners, bringing the energy | published: https://web.archive.org/web/20260823211826/https://design.duolingo.com/writing/brand-narrative |
| Curious | a little language makes life richer | published: https://web.archive.org/web/20260823211826/https://design.duolingo.com/writing/brand-narrative |
| Quirky | the fun in language fundamentals; eccentric characters and sentences | published: https://web.archive.org/web/20260823211826/https://design.duolingo.com/writing/brand-narrative |

## Fixed and flexible

Never changes:
- 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.

## Positioning

- **Statement**: The world's most popular, most enjoyable way to learn a language (guide, "The Duolingo Difference") (published)
- **Category**: Language learning app (homepage now also offers chess and math courses, observed) (published)
- **Audience**: Everyone: consumers in developed and developing markets, institutions, prospective employees, volunteer community (messages by audience) (published)
- **Promise**: Everyone can Duolingo. (published)
- **Differentiators**: Free; Fun, game-like motivation (streaks, XP, Duo); Bite-sized lessons based on learning science; 35+ languages, inclusive

## Messaging

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:
- Everyone can Duolingo. (tagline, brand-narrative page)
- Go. Learn a language. (short CTA, brand-narrative page)
- free. fun. effective. (homepage feature headline (observed))

| Pillar | Claim | Proof | Label |
|---|---|---|---|
| Free and open to everyone | All you need is a screen, an internet connection and a few minutes a day (paraphrased) | Duolingo is free (guide); the homepage hero offers GET STARTED with no price | published |
| Fun, never a chore | Technology plus the power of play makes language learning a joy (paraphrased) | Bite-sized lessons based on learning science; homepage links "research shows that it works" to duolingo.com/efficacy | published |
| Effective | Bite-sized lessons based on learning science (paraphrased) | Bite-sized lessons based on learning science; homepage links "research shows that it works" to duolingo.com/efficacy | published |
| Inclusive and worldwide | Loved by people of all ages and backgrounds, 35+ languages (paraphrased) | 35+ languages to learn (guide); the homepage course strip lists 40 language courses plus Chess and Math (observed) | published |

Real lines, as they wrote them:
| Line | Channel | Source |
|---|---|---|
| "The most fun way to learn languages, chess, and more!" | homepage | https://www.duolingo.com/ |
| "free. fun. effective." | homepage | https://www.duolingo.com/ |
| "backed by science" | homepage | https://www.duolingo.com/ |
| "stay motivated" | homepage | https://www.duolingo.com/ |
| "personalized learning" | homepage | https://www.duolingo.com/ |
| "Learning with Duolingo is fun, and research shows that it works!" | homepage | https://www.duolingo.com/ |
| "learn anytime, anywhere" | homepage | https://www.duolingo.com/ |
| "POWER UP WITH SUPER DUOLINGO" | homepage | https://www.duolingo.com/ |
| "duolingo english test" | homepage | https://www.duolingo.com/ |
| "learn a language with duolingo" | homepage | https://www.duolingo.com/ |
| "GET STARTED" | homepage | https://www.duolingo.com/ |
| "I ALREADY HAVE AN ACCOUNT" | homepage | https://www.duolingo.com/ |
| "TRY 1 WEEK FREE" | homepage | https://www.duolingo.com/ |
| "CERTIFY YOUR ENGLISH" | homepage | https://www.duolingo.com/ |
| "Everyone can Duolingo." | brand tagline | https://web.archive.org/web/20260823211826/https://design.duolingo.com/writing/brand-narrative |
| "Go. Learn a language." | short call to action | https://web.archive.org/web/20260823211826/https://design.duolingo.com/writing/brand-narrative |

## Voice

Tone words: expressive, playful, embracing, worldly.

Traits:
- Expressive: brief, active, direct, excited, but not long-winded, passive, unclear, indifferent, in your face (published)
- Playful: friendly, jolly, creative, clever in quick doses, but not touchy-feely, sarcastic or smug, dry, intellectual (published)
- Embracing: supportive, gender-neutral, contractions, clear, but not aggressive, gendered, writing words out, complicated, mean-spirited (published)
- Worldly: interested, knowledgeable, universal, multilingual (English first), but not smug, a know-it-all, slang not everyone knows, English only (published)

- 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).

Rules a copy check enforces:
- 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

Their words: learners, exercises, XP, streak, lessons, skills, courses, okay, website, internet, log in (verb), login (noun), sign up, anytime, Everyone can Duolingo.
Never: users, challenges, tree, OK, Web site, Internet (capitalized), any time.

Tone by reader state, 0 (no personality) to 5 (full) (our reading): Learner succeeds: celebrate, exclamation points welcome 5, Social, push and campaigns led by Duo 4, Learner stumbles: friendly and helpful, without overdoing it 3, Homepage and landing pages (observed 2026-10-29) 2, Serious stories: tone down exuberance and exclamation points 1. 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.

## Color

| Name | Hex | Role | Use |
|---|---|---|---|
| Feather Green | #58CC02 | core 1, primary | Headlines, primary buttons, footer ground. "When in doubt, lean in to green." White labels on it for 15px bold caps buttons only (2.1:1 by the WCAG formula). |
| Mask Green | #89E219 | core 2 | Ground on which Duo can be placed. |
| Eel | #4B4B4B | core 3, type | Text color; never for Feather headlines unless printing one-color. |
| Snow | #FFFFFF | core 4, background | Primary background of every app and page. |
| Macaw | #1CB0F6 | secondary | Links, outline-button labels, full-bleed grounds, illustration. |
| Cardinal | #FF4B4B | secondary | Splashes, full-bleed grounds, errors in the app. |
| Bee | #FFC800 | secondary | Splashes, coins and rewards in art. |
| Fox | #FF9600 | secondary | Splashes, flames/streaks in art. |
| Beetle | #CE82FF | secondary | Splashes, full-bleed grounds. |
| Humpback | #2B70C9 | secondary | Splashes, full-bleed grounds. |
| Wolf | #777777 | neutral | Body copy on the site. |
| Hare | #AFAFAF | neutral | Muted controls. |
| Swan | #E5E5E5 | neutral | Hairlines, outline-button border and lip. |
| Polar | #F7F7F7 | neutral | Light surfaces. |
| Tree Frog | #58A700 | illustration palette / button lip | The 4px lip under green buttons (observed). |
| Turtle | #A5ED6E | illustration palette / footer links | Footer links and hairline on green (observed). |
| Sea Sponge | #D7FFB8 | illustration palette / footer headings | Footer headings on green (observed). |
| Super Night | #100F3E | observed only | Super Duolingo band ground. |
| Anytime Navy | #042C60 | observed only | The "learn anytime, anywhere" band headline (observed 2026-10-29; not in the published palettes). |

Proportion (observed; 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): Snow 77%, Feather Green 12%, Super Night 12%.

## Typography

| Role | Their face | Licence | Open stand-in (Google Fonts) | Fallback |
|---|---|---|---|---|
| display | feather | Proprietary and bespoke to Duolingo; not licensable. The guide publishes Nunito as its substitute for print and documents. | Mochiy Pop P One | Nunito, system-ui, sans-serif |
| body | duolingo-sans | DIN Next Rounded: commercial licence (Monotype). duolingo-sans: Duolingo's own web face, not licensable. Nunito is the guide's published substitute. | Baloo 2 | Nunito, system-ui, sans-serif |

| Role | Token | Face | Desktop | Phone | Line height | Tracking | Weight |
|---|---|---|---|---|---|---|---|
| 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 | --text-display-xl-* | display | 56.5px | 32px | 1.416 | -1.13px | 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 | --text-display-l-* | display | 42.5px | 32px | 1.412 | 0px | 400 |
| Hero sentence, #4B4B4B, centred. BUILD: Baloo 2 650 32/44, letter-spacing -0.4px (-0.0125em). Site: duolingo-sans 700, 0px | --text-hero-* | body | 32px | 32px | 1.375 | -0.4px | 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 | --text-body-* | body | 17px | 17px | 1.41 | -0.25px | 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 | --text-button-* | body | 15px | 15px | 1.33 | 0.5px | 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) | --text-badge-* | body | 17px | 17px | 1.18 | -0.34px | 650 |
| Footer column heading, #D7FFB8. BUILD: Baloo 2 650 19/26.6, letter-spacing -0.38px (-0.02em) | --text-footer-head-* | body | 19px | 19px | 1.4 | -0.38px | 650 |
| Footer link #A5ED6E; "Site language:" label same style in #D7FFB8. BUILD: Baloo 2 650 15/22, letter-spacing -0.3px (-0.02em) | --text-footer-link-* | body | 15px | 15px | 1.47 | -0.3px | 650 |
| Site-language link, #A5ED6E. BUILD: Baloo 2 650 13/16, letter-spacing -0.26px (-0.02em) | --text-footer-lang-* | body | 13px | 13px | 1.23 | -0.26px | 650 |

## Layout

Measured on https://www.duolingo.com/: 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.

| Measure | Desktop (1440) | Phone (390) |
|---|---|---|
| Page margin | 226px | 15px |
| Section padding | 96px | 96px |
| Container max width | 988px | full |
| Hero text width | max 480px | full |
| Grid columns | 2 | 1 |
| Gutter | 101px | 0px |
| Card gap | 12px | 12px |
| Navigation height | 70px | 70px |

At every width (observed, 2026-10-29):
| What | 390px | 1440px |
|---|---|---|
| band headline (site feather 700) | 36px / 45px, -0.72px; build 32px / 45px, -0.64px | 64px / 80px, -1.28px; build 56.5px / 80px, -1.13px |
| feature headline (site feather 700) | 36px / 45px, centred; build 32px / 45px | 48px / 60px, left; build 42.5px / 60px |
| hero sentence | 32px / 44px, 3 lines in 345px | 32px / 44px, 2 lines in 480px |
| body | 17px / 24px, 330px wide | 17px / 24px, max 473px |
| buttons | 330x50, stacked 12px apart, pinned to the bottom of the 100vh header | 330x50 hero and closing CTA; 133x44 in the sticky nav |
| page margin | 15px | 226px (one centred 988px column) |
| section padding | 96px | 96px |
| feature row | stacked: headline, paragraph, 345px art; 96px between rows | 530px row, text 473px + 101px gap + 530px art, alternating sides |
| course strip | hidden | 80px, 8 chips visible |
| nav | logo centred 161x38, no controls | 70px, logo 179x42 left, SITE LANGUAGE right |

Breakpoints from Duolingo's CSS: 768px.

Homepage bands, top to bottom (observed):
1. Nav (transparent, 70px)
   - Desktop: y0-70 in the 988px column
   - Phone: logo centred
   - sticky white 72px bar with GET STARTED after scroll
   - 2px #E5E5E5 bottom on the sticky bar
2. Hero
   - Desktop: y70-820; art box x295-719; text box x734-1214 (15px apart)
   - Phone: art → h1 → buttons, centred
   - h1 Baloo 2 650 32/44 -0.4px #4B4B4B (site: duolingo-sans 700)
   - buttons 330x50 12px apart
3. Course strip
   - Desktop: y820-900, 2px #E5E5E5 top/bottom
   - Phone: hidden
   - flags 36x28
   - labels 15px #777777 caps
4. Features x4
   - Desktop: y900-3212, rows 530 tall, gap 101
   - Phone: stacked centred, art below text; first headline y940 (header is 844 = 100vh)
   - Feather 48 #58CC02
   - body 17/24 #777777
5. Learn anytime, anywhere
   - Desktop: y3212-4501
   - Phone: badges stacked
   - #042C60 headline
   - badges 177/162 x63
6. Super Duolingo
   - Desktop: y4501-5401, padding 185
   - Phone: stacked, full-width button
   - button label #000437
7. Duolingo English Test
   - Desktop: y5401-6123
   - Phone: stacked centred
   - outline button #1CB0F6 label
8. Closing CTA + wave
   - Desktop: y6123-6976; art 1440x795 at y6104, #58CC02 strip y6899-6976
   - Phone: art cropped 696 wide
   - wave flows into the footer
9. Footer
   - Desktop: y6976-7803
   - Phone: single column at x40
   - #D7FFB8 headings
   - #A5ED6E links and hairline
   - no copyright line

## Page anatomy

How Duolingo's own landing pages are built, part by part (observed; https://www.duolingo.com/, 2026-10-29). A homepage pattern, not a brand law: follow it for landing pages.

**Navigation**
- summary: 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.
- ground: transparent over #FFFFFF; sticky bar #FFFFFF
- height: 70px at rest; sticky bar 72px (70 + 2px border)
- border: none at rest; sticky: 2px solid #E5E5E5 bottom
- logo: variant Feather Green #58CC02 single-color Duo silhouette + "duolingo" wordmark (site file f92d5f2f….svg); px 179x42 desktop; 161x38 phone; sticky phone shows only the owl symbol 40x38; position x226 y12 desktop (left edge of the column); phone centred x115 y14
- links: count 1 control: SITE LANGUAGE: ENGLISH (opens a language menu); size 15px; weight Baloo 2 650, uppercase, +0.5px; color #AFAFAF; alignment right edge x1214, y26; 14x14 chevron after it
- actions: none at rest; sticky bar: GET STARTED primary button 133x44 (padding 0 20px, 40px face + 4px #58A700 lip) right-aligned ending x1214, y13
- sticky: fixed white 72px bar (2px #E5E5E5 bottom border) slides in once window.scrollY > 828 (the header bottom 900 minus 72); reveal transition 0.4s cubic-bezier(0.22,1,0.36,1). Same logo left, GET STARTED 133x44 right ending x1214, y13
- phone: shows logo centred only (no language control, no menu); menu none; cta sticky bar: owl symbol 40x38 at x15 left, GET STARTED 133x44 right ending x375
- capture state: The reference screenshots show TWO nav states, and the build must reproduce both deterministically. Desktop fold (scrollY 0, 1440x900 viewport): rest bar, SITE LANGUAGE: ENGLISH + chevron at right. Desktop FULL-PAGE capture: the same transparent 70px rest bar at y0 (logo x226 y12, no border, no white fill), but the right control is the green GET STARTED button 133x44 (x1081-1214, y13) instead of SITE LANGUAGE. Phone fold AND phone full: logo only, centred, no CTA. How the screenshot is taken (scripts/brand-fidelity.mts shoot): load, scroll down the page in 700px steps, scrollTo(0,0), wait 800ms, fold screenshot, then a Playwright fullPage screenshot. During fullPage, Chromium fires a resize event and document.documentElement.clientHeight becomes the full document height while window.innerHeight stays 900 (tested). Recipe: function navState(){ const full = document.documentElement.clientHeight > window.innerHeight + 1; const desk = window.innerWidth >= 768; if (desk && full) { show the rest bar with GET STARTED in place of SITE LANGUAGE } else if (window.scrollY > 828) { show the fixed white sticky bar } else { rest bar with SITE LANGUAGE } } and call it on load, scroll and resize. Never key the swap to a timer or to scrollY alone

**Hero**
- summary: 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
- desktop: column split art box x295 to x719 (424) | 15px | text box x734 to x1214 (480). 295 + 424 + 15 = 734; vertical anchors hero box y70-y820 (padding 48px 0); art y233-657; h1 y325 (2 lines, 88px tall); GET STARTED y453; I ALREADY HAVE AN ACCOUNT y515 (12px gap); text max width 480px, centred text; media no frame, no radius, transparent PNG/Lottie on white; cta size 330x50 both, centred under the h1 (x809)
- phone: order header is min-height 100vh, display flex column, padding-top 70px (the nav); inside it one flex:1 column with padding 10px 0 20px: art 273x273 centred, then the text column (flex 1) holding the h1 (flex 1, margin-top 10px) and, at its bottom, the two buttons (margin-top 20px, 12px apart). So the BUTTONS ARE PINNED TO THE BOTTOM: GET STARTED top = 100vh - 132, I ALREADY HAVE AN ACCOUNT top = 100vh - 70, last button bottom = 100vh - 20; the art and h1 move with half the height change: art top = 179 + (100vh - 844)/2, h1 top = art bottom + 10. At 390x844: art x59 y179, h1 box x23 345px wide y462 (3 lines, 132px, ends y594), GET STARTED 330x50 y712, I ALREADY HAVE AN ACCOUNT y774, header ends y844. Checked live at 390x700 (buttons y568) and 390x1000 (buttons y868). The 118px h1-to-button gap at 844 is this flex space, not a margin; alignment centred; sizes buttons 330x50 at x30
- at rest: the static PNG composition (hero-desktop@2x.png); the Lottie loops small character motions (animation only)
- media: illustration only (Lottie with static PNG fallback); no photo, no video
- type: h1 Baloo 2 650 32/44 -0.4px #4B4B4B centred, NOT Feather (site: duolingo-sans 700). Fixed breaks: desktop "The most fun way to learn / languages, chess, and more!", phone "The most fun way to / learn languages, chess, / and more!"
- cta: primary green GET STARTED (→ /register) over outline I ALREADY HAVE AN ACCOUNT (#1CB0F6 label, opens login)
- proof: none in the hero

**Course strip**
- summary: Full-bleed 80px strip at the bottom of the first screen: a horizontal carousel of course chips (flag + uppercase name) with prev/next chevrons.
- ground: #FFFFFF with 2px #E5E5E5 top and bottom borders
- desktop: y820-900. A 1090px row centred (x175-1265): prev chevron 14x14 at x175 y853, chip track x219-1237 (overflow hidden), next chevron at x1251. Eight chips fully visible at rest: ENGLISH, CHESS, MATH, SPANISH, FRENCH, GERMAN, ITALIAN, PORTUGUESE (ends x1226); see kit.spec.components.course_chip for the arithmetic. Overflow scrolls on chevron click
- phone: hidden (display none); the hero runs straight into the first feature
- anatomy:
  - each chip: 36x28 rounded-rectangle flag, 10px gap, label Baloo 2 650 15/20 +0.5px uppercase #777777
  - 23px from one label's end to the next flag (ENGLISH x219-326, CHESS flag x349)
  - order verbatim: English, Chess, Math, Spanish, French, German, Italian, Portuguese, Dutch, Japanese, Arabic, Czech, Welsh, Danish, Greek, Esperanto, Finnish, Irish, Scottish Gaelic, Hebrew, Hindi, Haitian Creole, Hungarian, High Valyrian, Hawaiian, Indonesian, Korean, Latin, Norwegian (Bokmål), Navajo, Polish, Romanian, Russian, Swedish, Swahili, Klingon, Turkish, Ukrainian, Vietnamese, Yiddish, Chinese (Simplified), Zulu
- components:
  - course_chip

**Feature rows (x4)**
- summary: 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.
- ground: #FFFFFF (a scroll-linked #DDF4FF tint fades in behind this run as the anytime band approaches; animation only, rest state white)
- desktop: Run y900-3212, padding 96px top and bottom; four flex rows, each 530px tall, flush (no gap between rows): y996, 1526, 2056, 2586. Inside a row: art box 530x530 and a text column, 101px apart; the text block is vertically centred in the 530px row (headline 60px, 24px gap, paragraph). Row 1: text x226-699 (473), art x800-1330 (226+473+101=800); headline box y1183, paragraph y1267 (3 lines). Row 2: art x110-640, text x741-1214 (640+101=741); headline y1713, paragraph y1797 (3 lines). Row 3: text x226-699, art x800-1330; headline y2243, paragraph y2327 (3 lines). Row 4: art x80-610, text x711-1214 (503px column; the headline is 2 lines because of the forced break "personalized<br>learning", not because of the column); headline y2755 (2 lines, 120px), paragraph y2899 (2 lines)
- phone: Section starts at y844 (right after the 844px header) with 96px top padding, so the FIRST HEADLINE BOX IS AT y940 (its glyph tops land about y950). Each row: headline Mochiy Pop P One 32px / line 45px centred, max-width 340px, fixed breaks per kit.spec.type display-l -> 24px -> paragraph 330px centred (x30) -> 32px -> art 345x345 (x23); 96px between rows. Row 1: headline y940 (2 lines, 90px), paragraph y1054 (5 lines, 120px), art y1206-1551. Row 2: headline y1647 (1 line), paragraph y1716 (4 lines), art y1844-2189. Row 3: headline y2285 (1 line), paragraph y2354 (4 lines), art y2482-2827. Row 4: headline y2923 (2 lines), paragraph y3037 (3 lines), art y3141-3486. Section ends y3582 (96px bottom padding)
- anatomy:
  - headline Mochiy Pop P One 400 42.5px / line 60px, 0 tracking, #58CC02 lowercase, left-aligned on desktop (site: feather 700 48/60); fixed line breaks per kit.spec.type display-l
  - paragraph Baloo 2 475 17/24 -0.25px #777777, max-width 473px, one plain sentence-case paragraph per row naming a benefit (3/3/3/2 lines desktop, 5/4/4/3 phone). Openings as observed: (1) "Learning with Duolingo is fun, and research shows that it works!" (2) "We use a combination of research-backed teaching methods..." (3) "We make it easy to form a habit of language learning..." (4) "Combining the best of AI and language science..." Write your own copy at the same length
  - row 1 paragraph carries an inline link "research shows that it works" in #1CB0F6 Baloo 2 650 -0.34px (-> /efficacy)
  - art: the supplied SVG at 530x530 (345 phone), transparent on white, no frame
- components:

**Learn anytime, anywhere**
- summary: 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.
- ground: #FFFFFF (scroll tint #DDF4FF at full opacity while in view; animation only)
- desktop: section y3212-4501 (1289px), overflow hidden. Headline 583px box centred at y3352 (2 x 80px); badges at y3560 (48px below), 177x63 and 162x63, 25px apart, centred. Art: anytime-phones-icons-resting.svg as ONE layer, box 2000x1122 with its left edge at calc(50% - 940px) (= x-220 at 1440; NOT centred: the box sits 60px right of centre), top y3283, overflowing both edges, behind the headline and badges; the file's aspect is exactly 2000:1122, no letterbox
- phone: section y3582-4525 (943px), padding 96px 15px 0, overflow hidden; headline Mochiy Pop P One 32px / line 45px, -0.64px, 2 lines ("learn anytime," / "anywhere") at y3678; badges stacked 177x63 at y3800 and y3879 (16px gap), centred; art: the same anytime-phones-icons-resting.svg in a 1200x673 box with its left edge at calc(50% - 300px) (= x-105 at 390; not centred), top y3852, clipped at the section bottom
- anatomy:
  - headline Mochiy Pop P One 400 56.5px / line 80px, -1.13px (-0.02em), #042C60 centred, 2 lines: "learn anytime," / "anywhere"
  - app badges: outline-button box model, black glyph 34x34, two-line text; copy "Download on the" / "App Store" and "Get it on" / "Google Play"
  - floating art at rest: tilted navy/white phones (one shows a 2x2 grid of fruit icons, none shows a character) and colored gem tiles, as in the supplied file
- components:
  - app_badge

**Super Duolingo**
- summary: 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.
- ground: #100F3E
- desktop: y4501-5401: min-height 100vh (900 at 1440x900), padding 185px 0, flex row centred, gap 40px. Art: super-duolingo-art-resting.svg 530x530 at x133 y4686 (big rainbow heart with infinity, 4 sparkles); wordmark image 605x88 at x703 y4856; button 154x50 (padding 0 16px; label 118.5px) centred under the wordmark (x928 y4996, 52px below)
- phone: y4525-5369: min-height 100vh (844 at 390x844), padding 48px 15px 96px, content vertically centred: art 345x345 at x23 y4660; wordmark 339x56 (phone file) at x26 y5029 (24px below); button 330x50 at x30 y5137 (52px below)
- anatomy:
  - the headline is an IMAGE (green-to-blue-to-purple gradient italic letters), not live text
  - button white face, #000437 label, 4px rgba(255,255,255,0.5) lip
  - no body copy
- components:
  - button_on_dark

**Duolingo English Test**
- summary: One feature row: green Feather headline, gray paragraph and an outline CERTIFY YOUR ENGLISH button left; DET illustration right.
- ground: #FFFFFF
- desktop: section y5401-6123, padding 96px 0; one 530px row at y5497: text column x226-728 (502: the one-line headline "duolingo english test" is 502px wide), 101px gap, art box 530x530 at x829-1359 (226+502+101=829; it overflows the 988 column by 145px). Text block vertically centred: headline y5647 (1 line, 60px), paragraph y5731 max-width 473px (3 lines), button 330x50 at x226 y5827 (24px below). Art: det-art-resting.svg; its visible drawing occupies x926-1263 (337px wide) and y5546-5977 (432px tall) inside the 530 box: do not scale the box up
- phone: section y5369-6246, padding 96px 0; centred stack: headline Mochiy Pop P One 32px / line 45px, 2 lines ("duolingo" / "english test") at y5465 -> paragraph 330px at y5579 (5 lines, 120px) -> button 330x50 at x30 y5723 (24px below) -> art 345x345 at x23 y5805 (32px below; visible drawing about 219px wide)
- anatomy:
  - headline "duolingo english test" Mochiy Pop P One 42.5px / 60px #58CC02, one line desktop (500px in the 502 column); phone "duolingo" / "english test"
  - outline button label #1CB0F6 (→ englishtest.duolingo.com/en)
- components:
  - button_outline

**Closing CTA with green wave**
- summary: 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.
- ground: #FFFFFF above; the wave art turns into #58CC02, which continues as one uninterrupted #58CC02 ground into the footer: no seam, no hairline, no border, no shadow
- desktop: section y6123-6976 (853px). Headline 583px centred at y6163 (2 x 80: "learn a language" / "with duolingo"); GET STARTED 330x50 at x555 y6371 (48px below). Art: closing-cta-wave-duo-resting.svg (1920x1060) drawn at 1440x795, x0 y6104 to y6899, behind the headline and button (it starts inside the DET section's bottom padding). SEAMLESS JOIN: a solid #58CC02 block starts at y6891 (8px ABOVE the art's bottom edge, behind the art: z-index below it) and runs to the footer top y6976; the footer background is the same #58CC02 with no border-top, margin 0. The 8px overlap hides the anti-aliased bottom row of the SVG, which otherwise shows as a pale hairline at y6898 (round 2). Equivalent: give the section itself background linear-gradient(to bottom, transparent 768px, #58CC02 768px). (Live: a 1440x949 Lottie box from y6027 letterboxed 77px top and bottom: same result)
- phone: section y6246-6814 (568px). Headline Mochiy Pop P One 32px / line 45px, -0.64px, 2 lines ("learn a language" / "with duolingo") at y6286; button 330x50 at x30 y6424. Art: the same file drawn at 696x384, x-153 y6394 to y6778 (cropped both sides); solid #58CC02 from y6770 (8px above the art's bottom edge, behind it) to the footer top y6814, same hex as the footer, no seam
- anatomy:
  - headline Mochiy Pop P One 400 56.5px / line 80px, -1.13px (-0.02em), #58CC02 centred, 2 lines: "learn a language" / "with duolingo"
  - primary green button
  - art at rest = closing-cta-wave-duo-resting.svg: coins, chest, gems, heart, flame, dumbbell, a check-coin and Duo's head inside the central phone, over the #58CC02 wave
- components:
  - button_primary

**Footer**
- summary: 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.
- ground: #58CC02, the same hex as the closing wave strip above it: no border-top, no seam
- anatomy:
  - desktop y6976-7803; inner column 988px at x226, padding 96px 0 64px; columns at x226, 428, 630, 832, 1034 (202px pitch, 178px wide)
  - heading Baloo 2 650 19/26.6 -0.38px #D7FFB8 (site: duolingo-sans 700); first link top 40px below the heading top; links Baloo 2 650 15/22 -0.3px #A5ED6E, 32px pitch
  - About us: Courses, Mission, Approach, Efficacy, Duolingo Handbook, Research, Careers, Store, Press, Investors, Contact us
  - Products: Duolingo, Duolingo for Schools, Duolingo English Test, Podcast, Duolingo for Business, Super Duolingo, Gift Super Duolingo, Duolingo Max
  - Apps: Duolingo for Android, Duolingo for iOS
  - Help and support: Duolingo FAQs, Schools FAQs, Duolingo English Test FAQs, Status
  - Privacy and terms: Community guidelines, Terms, Privacy, Do Not Sell or Share My Personal Information (wraps to 2 lines)
  - Social (stacked under Privacy and terms in the same column, heading at y7282: 30px from the bottom of the last Privacy link's box to the Social heading top): Blog, Instagram, TikTok, Twitter, YouTube, LinkedIn
  - 2px #A5ED6E hairline, full bleed, at y7567
  - language block padding 40px 0 64px: "Site language:" on ITS OWN LINE (15/22 #D7FFB8), 20px gap, then links Baloo 2 650 13/16 -0.26px #A5ED6E, 24px apart, 36px rows, wrapping in the 988px column; footer ends y7803
  - languages verbatim, in order: العربية, বাংলা, Čeština, Deutsch, Ελληνικά, English, Español, Français, हिंदी, Magyar, Bahasa Indonesia, Italiano, 日本語, ಕನ್ನಡ, 한국어, मराठी, Nederlands, ਪੰਜਾਬੀ, Polski, Português, Română, Русский, svenska, தமிழ், తెలుగు, ภาษาไทย, Tagalog, Türkçe, Українською, اُردُو, Tiếng Việt, 中文
- phone: one column at x40; footer y6814-8828, padding-top 96px: first heading "About us" at y6910, first link at y6951 (heading top to link top 41px), links 32px pitch; 34px from the bottom edge of one group's last link box to the top of the next heading (edge to edge); hairline; language list wraps 5-6 per row; page ends y8828

**On dark grounds**
- secondary button: white face, #000437 label, rgba(255,255,255,0.5) 4px lip (Super band)
- link: none on the navy band; on the green footer links are #A5ED6E
- muted text hex: #D7FFB8 (headings on green)
- hairline hex: #A5ED6E (2px on green)
- logo variant: not shown on dark on the homepage; the guide allows the logotype in white

## Components

- **button primary** (observed): fill #58CC02, text #FFFFFF, height 50, width 330, padding x 16px; padding-bottom: 4px; letter-spacing: 0.5px; text-transform: uppercase; box-shadow: inset 0 -4px 0 #58A700; --button-padding-x: 16, radius 12, font size 15, weight 650, letter spacing 0.5px (0.033em), case uppercase, face body, lip 4px solid #58A700 (box-shadow 0 4px 0 #58A700 on a 46px face; the element is 50px with a 4px transparent bottom border), label build Baloo 2 650 15px, line-height 20px, letter-spacing +0.5px (0.033em), text-transform uppercase, box model ONE recipe, and tokens.css .button-primary already prints it: height 50px, box-sizing border-box, radius 12px, background #58CC02, box-shadow inset 0 -4px 0 #58A700 (the lip is the bottom 4px of the 50px box), padding 0 16px 4px so the label centres on the 46px face, label uppercase +0.5px. :active: translateY(4px), box-shadow none, clip-path inset(0 0 4px 0 round 12px) (the 46px face now sits on the lip line). The site draws the same thing as a ::before face with an outer shadow; either gives a 46px face + 4px lip = 50px. Sticky-nav size: 133x44, padding 0 20px 4px, 40px face + 4px lip. GET STARTED (hero, closing CTA, sticky nav). Build it from tokens.css .button-primary (or the box_model text, which is the same thing). Width 330 in the hero and closing CTA
  - hover (observed): filter brightness(1.1)
  - active (observed): transform matrix(1,0,0,1,0,4), lip removed
- **button outline** (observed): fill #FFFFFF, text #1CB0F6, height 50, width 330, padding x 16px; letter-spacing: 0.5px; text-transform: uppercase; border: 2px solid #E5E5E5; border-bottom-width: 4px; --button-padding-x: 16, radius 12, font size 15, weight 650, letter spacing 0.5px (0.033em), case uppercase, face body, lip the bottom border is 4px #E5E5E5 (2px border + 2px lip) on a 2px #E5E5E5 border elsewhere; total height 50px, label build Baloo 2 650 15px, line-height 20px, letter-spacing +0.5px (0.033em), text-transform uppercase, box model ONE box, no pseudo-element, and tokens.css .button-outline prints it: height 50px INCLUDING borders, box-sizing border-box, background #FFFFFF, border 2px solid #E5E5E5, border-bottom-width 4px (2px border + 2px lip), border-radius 12px, no box-shadow, label #1CB0F6 uppercase +0.5px. :active: translateY(2px), border-bottom-width 2px, height 48px. Never add a ::before face on top of this (round 1 did and grew to 54px). I ALREADY HAVE AN ACCOUNT, CERTIFY YOUR ENGLISH. (On the site this is drawn as a ::before face inset -2px with box-shadow 0 2px 0; the single-box recipe in box_model gives the same 50px result.)
  - hover (observed): filter brightness(0.9)
  - active (observed): transform matrix(1,0,0,1,0,2), lip removed
- **button on dark** (observed): fill button-on-dark-face, text #000437, height 50, width 154 desktop (padding 0 16px: a 122px content box; the Baloo 2 label TRY 1 WEEK FREE is 118.5px, so it fits with 1.75px spare each side and is never squeezed); 330 phone, padding x 16px; padding-bottom: 4px; letter-spacing: 0.5px; text-transform: uppercase; --color-button-on-dark-face: linear-gradient(#FFFFFF 0 46px, transparent 46px); box-shadow: inset 0 -4px 0 rgba(255,255,255,0.5); --button-padding-x: 16, radius 12, font size 15, weight 650, letter spacing 0.5px (0.033em), case uppercase, face body, lip 4px rgba(255,255,255,0.5) box-shadow under a 46px white face, label build Baloo 2 650 15px, line-height 20px, letter-spacing +0.5px (0.033em), text-transform uppercase. TRY 1 WEEK FREE on the #100F3E Super band: a 46px #FFFFFF face (fill = that white face, drawn as linear-gradient(#FFFFFF 0 46px, transparent 46px) so the bottom 4px stays clear), #000437 label, a 4px rgba(255,255,255,0.5) lip (50% white over the navy). Desktop box 154x50 at x928 y4996 with padding 0 16px; phone 330x50. tokens.css .button-on-dark prints it
  - active (our reading): transform assumed same as primary
- **app badge** (observed): fill #FFFFFF, text #4B4B4B, height 63, width 177 (App Store) / 162 (Google Play), padding 9.5px 14px, radius 12, face body, label build Baloo 2 650: 14/17 -0.28px over 17/20 -0.34px. Outline-button box model (border 2px #E5E5E5, border-bottom-width 4px, height 63px including borders, box-sizing border-box) holding a 34x34 black glyph (Apple / Google Play) then two text lines: 14/17 700 over 17/20 700, mixed case. Gap between badges 25px desktop (side by side, centred), 16px phone (stacked, 177px wide, centred)
- **course chip** (observed): text #777777, height 28, font size 15, weight 650, letter spacing 0.5px (0.033em), case uppercase, face body, label build Baloo 2 650 15px, line-height 20px, letter-spacing +0.5px (0.033em), text-transform uppercase. Desktop strip, measured: 80px tall, 2px #E5E5E5 top and bottom, full bleed. Inside it a 1090px row centred on the page (x175-1265; no 40px padding): prev chevron 14x14 #AFAFAF at x175, y853; the chip track starts at x219 and is clipped (overflow hidden) at x1237; next chevron at x1251. Each chip = 36x28 flag + 10px gap + label (Baloo 2 650 15/20 +0.5px uppercase #777777); 23px from one label's end to the next flag. Label widths (Baloo 2 / site): ENGLISH 61.6/60.8, CHESS 45.5/45.5, MATH 40.7/40.1, SPANISH 61.5/61.5, FRENCH 56.8/56.2, GERMAN 61.1/60.1, ITALIAN 55.8/55.0, PORTUGUESE 95.0/93.3. So 8 chips x (36+10) = 368 + labels 478.0 + 7 gaps x 23 = 161 = 1007px: ENGLISH starts x219, PORTUGUESE ends x1226, 11px inside the clip edge and 25px before the next chevron. ALL EIGHT courses ENGLISH to PORTUGUESE are fully visible at rest; the ninth (DUTCH) starts at x1249, entirely past the clip edge, so no partial chip ever shows. Never let a label clip. Hidden on phone
- **nav language** (observed): text #AFAFAF, font size 15, weight 650, letter spacing 0.5px (0.033em), case uppercase, face body, label build Baloo 2 650 15px, line-height 20px, letter-spacing +0.5px (0.033em), text-transform uppercase. "Site language: English" (rendered uppercase, Baloo 2 650 +0.5px, 181px) + 14x14 #AFAFAF down-chevron 8px after it; right edge of the chevron at x1214, text box x1011-1192, y26. Hover: filter brightness(0.9) assumed, transition filter 0.2s (measured). Shown only in the rest state at scrollY 0 (see kit.spec.page.nav.capture_state)
- **footer link** (observed): text #A5ED6E, font size 15, weight 650, face body, label build Baloo 2 650 15/22, letter-spacing -0.3px (-0.02em). 15/22, no underline, 32px pitch; hover not measured

## Motion tokens

| Name | Easing | Duration | Use | Label |
|---|---|---|---|---|
| button press | linear |  | on :active the face drops by the lip (4px primary/on-dark, 2px outline) and the lip disappears, instantly (the site's computed transition is "all 0s") | observed |
| sticky nav reveal | cubic-bezier(0.22, 1, 0.36, 1) | 400ms | fixed 72px white bar slides in on scroll; border-color transition 0.3s | observed |
| illustrations |  |  | every illustration is a Lottie animation; static SVG/PNG fallbacks are the resting state | observed |

## Icon tokens

Grid not published, stroke not published (observed).
| Name | Size | Use |
|---|---|---|
| chevron | 14px | carousel and language control |
| store glyph | 34px | app badges |
| course flag | 36px | 36x28 tile |

## Signature moves

### 3D "lip" buttons

Where: every CTA on the site and in the app.
Do: 12px radius, 50px tall total, ALL CAPS Baloo 2 650 15px +0.5px (stand-in for duolingo-sans 700 +0.8px); a solid darker lip under the face (4px #58A700 under #58CC02; outline buttons: 2px #E5E5E5 border with border-bottom 4px, height 50 incl. borders); pressing moves the face down onto the lip. On every call to action.
Don't: use blurred drop shadows, pill shapes, sentence-case labels or punctuation in labels.
Example: "GET STARTED".

### lowercase Feather headlines in green

Where: section headlines, campaign lines.
Do: Feather Bold (stand-in Mochiy Pop P One 400 at 0.885x size: 42.5px for 48, 56.5px -0.02em for 64) all lowercase, short (2-5 words, max about 10), Feather Green #58CC02 on white, often with a period cadence ("free. fun. effective.").
Don't: set Feather in Title Case or caps, in Eel or other neutrals, or in several secondary colors.
Example: "stay motivated".

### Duo and the cast, built from rounded shapes

Where: every image slot.
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.
Don't: use pointy shapes, ovals for shadows or eyes, gray as a base, centred pupils, or a static expressionless pose.

### game-reward props

Where: feature art, anytime band, footer CTA.
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.
Don't: add realistic 3D render or photography to these slots.

## Messaging: rules

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."

Why it works: A line that makes the brand a verb invites everyone in; the homepage proves it in four benefit rows, not slogans.

- Close with the tagline "Everyone can Duolingo." or the short CTA "Go. Learn a language."
- Lead with the benefit to the learner: free, fun, effective, for everyone
- Write per audience: consumers, institutions, recruits and the volunteer community each get their own message
- Keep proof concrete: link a claim like "research shows that it works" to its evidence (the homepage links /efficacy)
- Don't quote the dated figures in the old press boilerplate as current
- Don't call learners "users"

Real examples, to look at on Duolingo's own pages (not for reuse):
- Brand narrative: Duo with a book: https://web.archive.org/web/20260823211826/https://design.duolingo.com/writing/brand-narrative
- Brand narrative: everyone can Duolingo: https://web.archive.org/web/20260823211826/https://design.duolingo.com/writing/brand-narrative
- Brand narrative: a scooter, learning on the go: https://web.archive.org/web/20260823211826/https://design.duolingo.com/writing/brand-narrative
- Brand narrative: learners making music together: https://web.archive.org/web/20260823211826/https://design.duolingo.com/writing/brand-narrative

Sources: https://web.archive.org/web/20260823211826/https://design.duolingo.com/writing/brand-narrative, https://www.duolingo.com/

## Voice: rules

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).

Why it works: Consistent voice builds trust; tone flexes with how learners feel.

|  |  |
|---|---|
| Tagline | Everyone can Duolingo. |
| Qualities | Expressive, Playful, Embracing, Worldly |

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

Do and don't:
- Do: "Not quite correct. Try again!". When learners stumble: friendly and helpful, then straight back to it (the guide's own example).
- Don't: "Incorrect.". Cold and final: the guide's "not this".
- Do: "Correct! Awesome work!". When learners succeed, celebrate. Exclamation points are welcome here.
- Don't: "You have successfully passed this level". Flat and formal: the guide's "not this".

Real examples, to look at on Duolingo's own pages (not for reuse):
- Voice illustration: https://web.archive.org/web/20260823212032/https://design.duolingo.com/writing/voice
- Duo speaks through a bubble: https://web.archive.org/web/20260823212020/https://design.duolingo.com/writing/duo
- Push-notification emoji use: https://web.archive.org/web/20260823212032/https://design.duolingo.com/writing/style
- Tone page illustration: https://web.archive.org/web/20260823212032/https://design.duolingo.com/writing/tone

Sources: https://web.archive.org/web/20260823212032/https://design.duolingo.com/writing/voice, https://web.archive.org/web/20260823212032/https://design.duolingo.com/writing/tone, https://web.archive.org/web/20260823212020/https://design.duolingo.com/writing/duo, https://web.archive.org/web/20260823212032/https://design.duolingo.com/writing/style, https://web.archive.org/web/20260823212032/https://design.duolingo.com/writing/glossary, https://web.archive.org/web/20260823211826/https://design.duolingo.com/writing/brand-narrative

## Logo: rules

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.

Why it works: The name set in Duo-inspired curves is the brand's signature; Duo beside it adds instant recognition in third-party spaces.

|  |  |
|---|---|
| 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) |

- 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

Do and don't:
- Do: "duolingo". The logotype in white on Feather Green, one of its three colorways (green, white, gray).
- Don't: "duolingo". Recolored: don't change the logo color.

Real examples, to look at on Duolingo's own pages (not for reuse):
- Portrait lockup: Duo above the logotype: https://web.archive.org/web/20260823211825/https://design.duolingo.com/identity/logos
- Logotype clear-space diagram: https://web.archive.org/web/20260823211825/https://design.duolingo.com/identity/logos
- General positioning: logo in a corner: https://web.archive.org/web/20260823211825/https://design.duolingo.com/identity/logos
- General positioning: four corners: https://web.archive.org/web/20260823211825/https://design.duolingo.com/identity/logos
- Don't: change the logo color: https://web.archive.org/web/20260823211825/https://design.duolingo.com/identity/logos
- Don't: skew the logo: https://web.archive.org/web/20260823211825/https://design.duolingo.com/identity/logos
- Don't: fill with a gradient: https://web.archive.org/web/20260823211825/https://design.duolingo.com/identity/logos
- Landscape lockup: https://web.archive.org/web/20260823211825/https://design.duolingo.com/identity/logos
- Landscape lockup clear space: https://web.archive.org/web/20260823211825/https://design.duolingo.com/identity/logos
- Portrait lockup clear space: https://web.archive.org/web/20260823211825/https://design.duolingo.com/identity/logos
- Duolingo Plus lockup: https://web.archive.org/web/20260711122151/https://design.duolingo.com/identity/brand-family
- Sub-brand construction: https://web.archive.org/web/20260711122151/https://design.duolingo.com/identity/brand-family
- Duo icon construction drawing on Feather Green: https://web.archive.org/web/20260823211825/https://design.duolingo.com/identity/logos

Sources: https://web.archive.org/web/20260823211825/https://design.duolingo.com/identity/logos, https://web.archive.org/web/20260711122151/https://design.duolingo.com/identity/brand-family, https://www.duolingo.com/

## Color: rules

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.

Why it works: Green is the hue the world associates with Duolingo; the bright secondaries add delight without competing; neutrals give hierarchy.

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

- 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

Not published: color proportions (the homepage split in Proportion is measured, not published); the marketing "Colors" sub-section text (lost in the archive).

Do and don't:
- Do: "GET STARTED". Feather Green caps button on white with its solid #58A700 lip: the default action.
- Don't: "free. fun. effective.". Feather in a secondary color: the guide keeps Feather green, or white on color.

Real examples, to look at on Duolingo's own pages (not for reuse):
- Duo on a select background: https://web.archive.org/web/20260602063136/https://design.duolingo.com/marketing/assets
- Assigning color: illustration on a purple ground: https://web.archive.org/web/20260823212032/https://design.duolingo.com/illustration/shape-language
- Too much color: https://web.archive.org/web/20260823212032/https://design.duolingo.com/illustration/shape-language

Sources: https://web.archive.org/web/20260823211825/https://design.duolingo.com/identity/color, https://web.archive.org/web/20260823212032/https://design.duolingo.com/illustration/shape-language, https://web.archive.org/web/20260602063136/https://design.duolingo.com/marketing/assets, https://www.duolingo.com/

## Typography: rules

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.

Why it works: A language company speaks through its type: Feather is ownable and loud; DIN Next Rounded is friendly and readable at length.

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

- 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

Do and don't:
- Do: "stay motivated". Feather (stand-in Mochiy Pop P One), lowercase, short, in Feather Green.
- Don't: "Stay Motivated". Title Case in Eel: the guide rules out both for Feather.

Real examples, to look at on Duolingo's own pages (not for reuse):
- Don't: mix DIN and Feather in one sentence: https://web.archive.org/web/20260711122139/https://design.duolingo.com/identity/typography
- Don't: Feather in several secondary colors: https://web.archive.org/web/20260711122139/https://design.duolingo.com/identity/typography
- Don't: Feather in a neutral: https://web.archive.org/web/20260711122139/https://design.duolingo.com/identity/typography
- Don't: Feather in Title Case: https://web.archive.org/web/20260711122139/https://design.duolingo.com/identity/typography
- Don't: DIN headline the size of the logo: https://web.archive.org/web/20260711122139/https://design.duolingo.com/identity/typography

Sources: https://web.archive.org/web/20260711122139/https://design.duolingo.com/identity/typography, https://www.duolingo.com/

## Graphic elements: rules

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.

Why it works: Characters carry emotion and story; the lip makes every action feel tactile, like the app.

|  |  |
|---|---|
| Button radius | 12px (observed) |
| Primary lip | 4px #58A700 (observed) |
| Outline lip | 2px #E5E5E5 + 2px border (observed) |

- 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

Real examples, to look at on Duolingo's own pages (not for reuse):
- Cast of characters in marketing: https://web.archive.org/web/20260602063136/https://design.duolingo.com/marketing/assets
- Duo, expressive pose: https://web.archive.org/web/20260711122151/https://design.duolingo.com/illustration/duo

Sources: https://web.archive.org/web/20260602063136/https://design.duolingo.com/marketing/assets, https://web.archive.org/web/20250822234243/https://design.duolingo.com/marketing/elements, https://web.archive.org/web/20260823212020/https://design.duolingo.com/writing/duo, https://www.duolingo.com/

## Iconography: rules

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.

|  |  |
|---|---|
| Icon grid | not published |
| Stroke | not published |

- 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)

Not published: an icon grid, stroke or UI icon set.

Real examples, to look at on Duolingo's own pages (not for reuse):
- Course flag tile, Spanish: a 36x28 rounded rectangle: https://www.duolingo.com/
- Course tile, Chess: the same tile holding a glyph: https://www.duolingo.com/
- Course tile, Math: https://www.duolingo.com/
- 14px chevron in Hare #AFAFAF, round caps: https://www.duolingo.com/

Sources: https://web.archive.org/web/20260823211825/https://design.duolingo.com/resources, https://web.archive.org/web/20260823212032/https://design.duolingo.com/writing/style, https://www.duolingo.com/

## Illustration: rules

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.

Why it works: Simple rounded shapes scale and animate easily, and read instantly as Duolingo.

|  |  |
|---|---|
| Shapes per figure | about 15 |
| Max fingers | 4 |
| Eye styles | 5 |

- 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

Real examples, to look at on Duolingo's own pages (not for reuse):
- The three base shapes: https://web.archive.org/web/20260823212032/https://design.duolingo.com/illustration/shape-language
- Off-brand: ovals and pointy shapes: https://web.archive.org/web/20260823212032/https://design.duolingo.com/illustration/shape-language
- Simplicity: 6 shapes, too abstract: https://web.archive.org/web/20260823212032/https://design.duolingo.com/illustration/shape-language
- Simplicity: 15 shapes, good: https://web.archive.org/web/20260823212032/https://design.duolingo.com/illustration/shape-language
- Simplicity: 30 shapes, too many: https://web.archive.org/web/20260823212032/https://design.duolingo.com/illustration/shape-language
- Duo with floating accent feet: https://web.archive.org/web/20260823212032/https://design.duolingo.com/illustration/shape-language
- Characters: https://web.archive.org/web/20260118083116/https://design.duolingo.com/illustration/characters
- Body types from 1-2 shapes: https://web.archive.org/web/20260118083116/https://design.duolingo.com/illustration/characters
- Duo perspective: turning the head: https://web.archive.org/web/20260711122151/https://design.duolingo.com/illustration/duo
- Site feature art, the style applied: https://www.duolingo.com/

Sources: https://web.archive.org/web/20260823212032/https://design.duolingo.com/illustration/shape-language, https://web.archive.org/web/20251226082046/https://design.duolingo.com/illustration, https://web.archive.org/web/20260118083116/https://design.duolingo.com/illustration/characters, https://web.archive.org/web/20260711122151/https://design.duolingo.com/illustration/duo, https://web.archive.org/web/20260711122151/https://design.duolingo.com/identity/imagery

## Photography: rules

Secondary to illustration. Authentic portraits and real environments of real learners, ideally with green in clothing or surroundings. The homepage uses no photography.

Why it works: Shows the millions of real people learning, in their diversity.

|  |  |
|---|---|
| Homepage photos | none (observed) |

- 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")

Real examples, to look at on Duolingo's own pages (not for reuse):
- Authentic portrait with a touch of green: https://web.archive.org/web/20260711122151/https://design.duolingo.com/identity/imagery
- Real learner, real place: https://web.archive.org/web/20260711122151/https://design.duolingo.com/identity/imagery
- Portrait with a sense of place: https://web.archive.org/web/20260711122151/https://design.duolingo.com/identity/imagery

Sources: https://web.archive.org/web/20260711122151/https://design.duolingo.com/identity/imagery

## Motion: rules

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).

Sources: https://web.archive.org/web/20260811044101/https://design.duolingo.com/identity/motion, https://www.duolingo.com/, https://web.archive.org/web/20260711122151/https://design.duolingo.com/illustration/duo

## Interface and layout: rules

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.

Why it works: Generous white space keeps the bright art and green headlines the loudest things on the page.

|  |  |
|---|---|
| Column | 988px at x226 |
| Feature row | 530px, gap 101px |
| Section padding | 96px |
| Nav | 70px; sticky 72px |

- See kit.spec.page and kit.spec.layout for every measured value
- Logo in a corner or centred (guide); the site puts it top-left of the column
- Don't use photography in the image slots
- Don't add cards, boxes or shadows around feature art

Real examples, to look at on Duolingo's own pages (not for reuse):
- Hero art at rest: Duo and the cast tumbling with coins (424px box): https://www.duolingo.com/
- Feature row art, 530px, no frame on white: https://www.duolingo.com/
- Closing CTA art: rewards over the green wave that becomes the footer: https://www.duolingo.com/

Sources: https://www.duolingo.com/

## Rules: rules

Brand law comes from the guide; the homepage shows how it is applied, and where the two differ the book says which wins for which job.

- 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
- Don't set Feather in Title Case, caps, neutrals or several colors
- Don't use pointy shapes, oval shadows or gray as an illustration base
- Don't use blurred drop shadows or pill-shaped buttons
- Don't have Duo talk, narrate or carry signs

Sources: https://web.archive.org/web/20260825155151/https://design.duolingo.com/, https://web.archive.org/web/20260823211825/https://design.duolingo.com/identity/logos, https://web.archive.org/web/20260711122139/https://design.duolingo.com/identity/typography, https://web.archive.org/web/20260823212032/https://design.duolingo.com/illustration/shape-language, https://web.archive.org/web/20260823212032/https://design.duolingo.com/writing/style, https://www.duolingo.com/

## Campaigns

### Duo's five-second Super Bowl spot (2024)

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!"

How the system shows: Duo carries the whole spot in flat Feather Green; the push speaks only as clearly from Duo, opening "Hi, it's Duo.", the device the guide asks for whenever Duo talks.
Why it works: 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.
Channels: TV (5-second regional Super Bowl spot), push notification. Source: https://blog.duolingo.com/super-bowl-commercial-2024

### The death of Duo (2025)

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.

How the system shows: The mascot is the media: no product shot, no feature list, only Duo and the running joke that he is waiting for your lesson.
Why it works: Years of Duo as the persistent owl gave the audience the context, so one post could become a story people retold for them.
Channels: X (Twitter), social profile pictures. Source: https://www.wibw.com/2025/02/12/duo-duolingo-owl-has-died-company-says

## Applications

| Format | What | 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). | https://www.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." | https://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!" | https://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. | https://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). | https://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. | https://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. | https://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). | https://www.duolingo.com/ |

## By format

How loud the system gets by format: the guide's rules plus the homepage as observed on 2026-10-29. Loudness runs 0 (nothing but the essentials) to 5 (the signature moves at full volume).

| Format | Loudness 0–5 | Must appear | What varies |
|---|---|---|---|
| Landing page (as www.duolingo.com builds its homepage) | 3 | 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 | 3 | white base, Feather Green actions, caps buttons, encouraging tone | secondary colors for states |
| Push notification / email | 4 | Duo's voice when from Duo; one emoji at most, omitted half the time | tone by learner state |
| Social | 5 | Duo and cast, playful voice, multilingual replies | emoji freely |
| Print / out-of-home | 4 | logo large in a corner or centred (min 35mm), Feather headline lowercase, bold secondary ground allowed | 90° logo on tall formats |
| Third-party / press | 2 | landscape or portrait lockup with clear space | lockup choice by space |

## Checks before anything ships

- **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.

## Make it your own

Keep the system: color roles and proportions, type, layout, components, the signature moves, the voice traits and rules. Replace everything that is Duolingo's own: name and logo, positioning, pillars, proof, taglines, boilerplate and any real line quoted above. kit.json lists these under make_it_yours.

## Not published

- 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

Logos and reference images belong to Duolingo. Look at them on Duolingo's own pages; don't reuse them.