{
"schema": "brand-kit@2",
"palette": {
"paper": "#FFFFFF",
"surface": "#F7F7F7",
"ink": "#4B4B4B",
"ink_muted": "#777777",
"accent": "#58CC02",
"on_accent": "#FFFFFF",
"accent_secondary": "#1CB0F6",
"night": "#100F3E",
"on_night": "#FFFFFF",
"extras": [
{
"name": "Feather Green",
"hex": "#58CC02",
"role": "core 1, THE brand color (\"when in doubt, lean in to green\"); primary button fill, feature headlines, footer ground; RGB 88 204 2, CMYK 58 0 96 0, PMS 361 C / 2421 U",
"prov": "published",
"source": "https://web.archive.org/web/20260823211825/https://design.duolingo.com/identity/color"
},
{
"name": "Mask Green",
"hex": "#89E219",
"role": "core 2, secondary green on which Duo can be placed; RGB 137 226 25, PMS 368 C / 2293 U",
"prov": "published",
"source": "https://web.archive.org/web/20260823211825/https://design.duolingo.com/identity/color"
},
{
"name": "Eel",
"hex": "#4B4B4B",
"role": "core 3 and darkest neutral: typography; hero sentence and app-badge labels on the site; RGB 75 75 75, PMS 418 C / Black 6 U",
"prov": "published",
"source": "https://web.archive.org/web/20260823211825/https://design.duolingo.com/identity/color"
},
{
"name": "Snow",
"hex": "#FFFFFF",
"role": "core 4, primary background; page ground, secondary button fill",
"prov": "published",
"source": "https://web.archive.org/web/20260823211825/https://design.duolingo.com/identity/color"
},
{
"name": "Macaw",
"hex": "#1CB0F6",
"role": "secondary; splashes in UI/illustration or full-bleed grounds; on the site: secondary-button label and inline link color; PMS 306 C",
"prov": "published",
"source": "https://web.archive.org/web/20260823211825/https://design.duolingo.com/identity/color"
},
{
"name": "Cardinal",
"hex": "#FF4B4B",
"role": "secondary; PMS 1787 C",
"prov": "published",
"source": "https://web.archive.org/web/20260823211825/https://design.duolingo.com/identity/color"
},
{
"name": "Bee",
"hex": "#FFC800",
"role": "secondary; PMS 123 C",
"prov": "published",
"source": "https://web.archive.org/web/20260823211825/https://design.duolingo.com/identity/color"
},
{
"name": "Fox",
"hex": "#FF9600",
"role": "secondary; PMS 1375 C",
"prov": "published",
"source": "https://web.archive.org/web/20260823211825/https://design.duolingo.com/identity/color"
},
{
"name": "Beetle",
"hex": "#CE82FF",
"role": "secondary; PMS 2572 C",
"prov": "published",
"source": "https://web.archive.org/web/20260823211825/https://design.duolingo.com/identity/color"
},
{
"name": "Humpback",
"hex": "#2B70C9",
"role": "secondary; PMS 2144 C",
"prov": "published",
"source": "https://web.archive.org/web/20260823211825/https://design.duolingo.com/identity/color"
},
{
"name": "Wolf",
"hex": "#777777",
"role": "neutral; on the site: body copy and course-strip labels",
"prov": "published",
"source": "https://web.archive.org/web/20260823211825/https://design.duolingo.com/identity/color"
},
{
"name": "Hare",
"hex": "#AFAFAF",
"role": "neutral; on the site: \"Site language\" control and its chevron",
"prov": "published",
"source": "https://web.archive.org/web/20260823211825/https://design.duolingo.com/identity/color"
},
{
"name": "Swan",
"hex": "#E5E5E5",
"role": "neutral; on the site: 2px hairlines (course strip, sticky nav), secondary-button border and 2px lip",
"prov": "published",
"source": "https://web.archive.org/web/20260823211825/https://design.duolingo.com/identity/color"
},
{
"name": "Polar",
"hex": "#F7F7F7",
"role": "neutral; lightest gray surface",
"prov": "published",
"source": "https://web.archive.org/web/20260823211825/https://design.duolingo.com/identity/color"
},
{
"name": "Wing Overlay",
"hex": "#43C000",
"role": "Duo's palette: wing overlay",
"prov": "published",
"source": "https://web.archive.org/web/20260823211825/https://design.duolingo.com/identity/color"
},
{
"name": "Beak Inner",
"hex": "#B66E28",
"role": "Duo's palette: inside of the beak",
"prov": "published",
"source": "https://web.archive.org/web/20260823211825/https://design.duolingo.com/identity/color"
},
{
"name": "Beak Lower / Feet",
"hex": "#F49000",
"role": "Duo's palette: lower beak and feet",
"prov": "published",
"source": "https://web.archive.org/web/20260823211825/https://design.duolingo.com/identity/color"
},
{
"name": "Beak Upper",
"hex": "#FFC200",
"role": "Duo's palette: upper beak",
"prov": "published",
"source": "https://web.archive.org/web/20260823211825/https://design.duolingo.com/identity/color"
},
{
"name": "Beak Highlight",
"hex": "#FFDE00",
"role": "Duo's palette: beak highlight",
"prov": "published",
"source": "https://web.archive.org/web/20260823211825/https://design.duolingo.com/identity/color"
},
{
"name": "Tongue Pink",
"hex": "#FFCAFF",
"role": "Duo's palette: tongue",
"prov": "published",
"source": "https://web.archive.org/web/20260823211825/https://design.duolingo.com/identity/color"
},
{
"name": "Squid",
"hex": "#EBE3E3",
"role": "illustration palette (shape-language page); for illustrations only, not UI",
"prov": "published",
"source": "https://web.archive.org/web/20260823212032/https://design.duolingo.com/illustration/shape-language"
},
{
"name": "Walking Fish",
"hex": "#FFDFE0",
"role": "illustration palette (shape-language page); for illustrations only, not UI",
"prov": "published",
"source": "https://web.archive.org/web/20260823212032/https://design.duolingo.com/illustration/shape-language"
},
{
"name": "Flamingo",
"hex": "#FFB2B2",
"role": "illustration palette (shape-language page); for illustrations only, not UI",
"prov": "published",
"source": "https://web.archive.org/web/20260823212032/https://design.duolingo.com/illustration/shape-language"
},
{
"name": "Pig",
"hex": "#F5A4A4",
"role": "illustration palette (shape-language page); for illustrations only, not UI",
"prov": "published",
"source": "https://web.archive.org/web/20260823212032/https://design.duolingo.com/illustration/shape-language"
},
{
"name": "Crab",
"hex": "#FF7878",
"role": "illustration palette (shape-language page); for illustrations only, not UI",
"prov": "published",
"source": "https://web.archive.org/web/20260823212032/https://design.duolingo.com/illustration/shape-language"
},
{
"name": "Fire Ant",
"hex": "#EA2B2B",
"role": "illustration palette (shape-language page); for illustrations only, not UI",
"prov": "published",
"source": "https://web.archive.org/web/20260823212032/https://design.duolingo.com/illustration/shape-language"
},
{
"name": "Canary",
"hex": "#FFF5D3",
"role": "illustration palette (shape-language page); for illustrations only, not UI",
"prov": "published",
"source": "https://web.archive.org/web/20260823212032/https://design.duolingo.com/illustration/shape-language"
},
{
"name": "Duck",
"hex": "#FBE56D",
"role": "illustration palette (shape-language page); for illustrations only, not UI",
"prov": "published",
"source": "https://web.archive.org/web/20260823212032/https://design.duolingo.com/illustration/shape-language"
},
{
"name": "Lion",
"hex": "#FFB100",
"role": "illustration palette (shape-language page); for illustrations only, not UI",
"prov": "published",
"source": "https://web.archive.org/web/20260823212032/https://design.duolingo.com/illustration/shape-language"
},
{
"name": "Cheetah",
"hex": "#FFCE8E",
"role": "illustration palette (shape-language page); for illustrations only, not UI",
"prov": "published",
"source": "https://web.archive.org/web/20260823212032/https://design.duolingo.com/illustration/shape-language"
},
{
"name": "Monkey",
"hex": "#E5A259",
"role": "illustration palette (shape-language page); for illustrations only, not UI",
"prov": "published",
"source": "https://web.archive.org/web/20260823212032/https://design.duolingo.com/illustration/shape-language"
},
{
"name": "Camel",
"hex": "#E7A601",
"role": "illustration palette (shape-language page); for illustrations only, not UI",
"prov": "published",
"source": "https://web.archive.org/web/20260823212032/https://design.duolingo.com/illustration/shape-language"
},
{
"name": "Guinea Pig",
"hex": "#CD7900",
"role": "illustration palette (shape-language page); for illustrations only, not UI",
"prov": "published",
"source": "https://web.archive.org/web/20260823212032/https://design.duolingo.com/illustration/shape-language"
},
{
"name": "Grizzly",
"hex": "#A56644",
"role": "illustration palette (shape-language page); for illustrations only, not UI",
"prov": "published",
"source": "https://web.archive.org/web/20260823212032/https://design.duolingo.com/illustration/shape-language"
},
{
"name": "Sea Sponge",
"hex": "#D7FFB8",
"role": "illustration palette; ON THE SITE: footer column headings and \"Site language:\" label on Feather Green",
"prov": "published",
"source": "https://web.archive.org/web/20260823212032/https://design.duolingo.com/illustration/shape-language"
},
{
"name": "Turtle",
"hex": "#A5ED6E",
"role": "illustration palette; ON THE SITE: every footer link and the 2px footer hairline on Feather Green",
"prov": "published",
"source": "https://web.archive.org/web/20260823212032/https://design.duolingo.com/illustration/shape-language"
},
{
"name": "Tree Frog",
"hex": "#58A700",
"role": "illustration palette; ON THE SITE: the 4px lip (box-shadow) under every green primary button",
"prov": "published",
"source": "https://web.archive.org/web/20260823212032/https://design.duolingo.com/illustration/shape-language"
},
{
"name": "Iguana",
"hex": "#DDF4FF",
"role": "illustration palette; ON THE SITE: the scroll-linked tint behind the features/anytime run (fades in as the \"learn anytime\" band nears; animation only, rest state white)",
"prov": "published",
"source": "https://web.archive.org/web/20260823212032/https://design.duolingo.com/illustration/shape-language"
},
{
"name": "Anchovy",
"hex": "#D2E4E8",
"role": "illustration palette (shape-language page); for illustrations only, not UI",
"prov": "published",
"source": "https://web.archive.org/web/20260823212032/https://design.duolingo.com/illustration/shape-language"
},
{
"name": "Beluga",
"hex": "#BBF2FF",
"role": "illustration palette (shape-language page); for illustrations only, not UI",
"prov": "published",
"source": "https://web.archive.org/web/20260823212032/https://design.duolingo.com/illustration/shape-language"
},
{
"name": "Moon Jelly",
"hex": "#7AF0F2",
"role": "illustration palette (shape-language page); for illustrations only, not UI",
"prov": "published",
"source": "https://web.archive.org/web/20260823212032/https://design.duolingo.com/illustration/shape-language"
},
{
"name": "Blue Jay",
"hex": "#84D8FF",
"role": "illustration palette (shape-language page); for illustrations only, not UI",
"prov": "published",
"source": "https://web.archive.org/web/20260823212032/https://design.duolingo.com/illustration/shape-language"
},
{
"name": "Whale",
"hex": "#1899D6",
"role": "illustration palette (shape-language page); for illustrations only, not UI",
"prov": "published",
"source": "https://web.archive.org/web/20260823212032/https://design.duolingo.com/illustration/shape-language"
},
{
"name": "Narwhal",
"hex": "#1453A3",
"role": "illustration palette (shape-language page); for illustrations only, not UI",
"prov": "published",
"source": "https://web.archive.org/web/20260823212032/https://design.duolingo.com/illustration/shape-language"
},
{
"name": "Starfish",
"hex": "#FFAADE",
"role": "illustration palette (shape-language page); for illustrations only, not UI",
"prov": "published",
"source": "https://web.archive.org/web/20260823212032/https://design.duolingo.com/illustration/shape-language"
},
{
"name": "Betta",
"hex": "#9069CD",
"role": "illustration palette (shape-language page); for illustrations only, not UI",
"prov": "published",
"source": "https://web.archive.org/web/20260823212032/https://design.duolingo.com/illustration/shape-language"
},
{
"name": "Butterfly",
"hex": "#6F4EA1",
"role": "illustration palette (shape-language page); for illustrations only, not UI",
"prov": "published",
"source": "https://web.archive.org/web/20260823212032/https://design.duolingo.com/illustration/shape-language"
},
{
"name": "Owl (illustration name for Feather Green)",
"hex": "#58CC02",
"role": "the illustration palette lists #58CC02 as \"Owl\"",
"prov": "published",
"source": "https://web.archive.org/web/20260823212032/https://design.duolingo.com/illustration/shape-language"
},
{
"name": "Anytime Navy",
"hex": "#042C60",
"role": "observed only: the \"learn anytime, anywhere\" headline (Feather 64). Not in the published palettes",
"prov": "observed",
"source": "https://www.duolingo.com/",
"date": "2026-10-29"
},
{
"name": "Super Night",
"hex": "#100F3E",
"role": "observed only: full-bleed ground of the Super Duolingo band (900px). Not in the published palettes",
"prov": "observed",
"source": "https://www.duolingo.com/",
"date": "2026-10-29"
},
{
"name": "Super Ink",
"hex": "#000437",
"role": "observed only: label of the white \"TRY 1 WEEK FREE\" button on the Super band. Not in the published palettes",
"prov": "observed",
"source": "https://www.duolingo.com/",
"date": "2026-10-29"
},
{
"name": "Black",
"hex": "#000000",
"role": "observed only: app-store glyphs (Apple, Google Play) inside the badge buttons",
"prov": "observed",
"source": "https://www.duolingo.com/",
"date": "2026-10-29"
}
]
},
"typography": {
"display": {
"family": "Mochiy Pop P One",
"weight": 400,
"weights": [
400
],
"real_face": "Feather Bold, bespoke and proprietary to Duolingo (served on www.duolingo.com as font-family \"feather\", weight 700). Not licensable; Mochiy Pop P One (Google Fonts, SIL OFL) is the calibrated web stand-in; Nunito is the guide's own published substitute for print and docs",
"style_note": "Lowercase always (capitals only for names of people and places), left-aligned by law (the site centres the big 64px band headlines and phone headlines), leading 100-110% by law (this homepage uses 1.25: 48/60, 64/80, 36/45), tracking -20 (=-0.02em; the site uses -0.02em at 64px and normal at 48/36px), never under 30px, at most about 10 words, never hyphenated or justified, set in Feather Green (or white on color); never in a neutral like Eel, never multicolored",
"fallback_stack": "Nunito, system-ui, sans-serif",
"licence": "Feather Bold: proprietary, bespoke to Duolingo, \"no one else can use it\" (typography page). Mochiy Pop P One: SIL OFL, Google Fonts. Nunito: SIL OFL, named by the guide as the substitute font",
"stand_in": true,
"stand_in_tracking": "Mochiy Pop P One is drawn wider than Feather per em, so it is set SMALLER, not tracked: 0.885x the site size with the site's own tracking in em. 48px roles -> 42.5px, 0px. 64px roles -> 56.5px, -1.13px (-0.02em). 36px phone roles -> 32px, 0px on features, -0.64px (-0.02em) on bands. Line boxes stay the site's px: 60 / 80 / 45. Never add positive tracking; never use Nunito 900 for the rebuild (round 2: 4-7% narrow and generic)",
"calibration": "Calibration round 3, 2026-10-29: the real \"feather\" woff2 loaded on a www.duolingo.com page beside 16 Google Fonts candidates, DOM width + canvas ink + glyph comparison (side-by-side crops at 2x, read by eye). Feather's character: single-storey a, hooked foot on l, round open bowls, curved y tail, heavy even stroke, tall x-height (24.48px at 48). Chosen Mochiy Pop P One 400 at 42.5px (= feather 48px): \"stay motivated\" 372.8 vs 373.6 (-0.2%); \"personalized learning\" 522.5 vs 522.9 (-0.1%); \"backed by science\" 433.2 vs 435.2 (-0.5%); \"duolingo english test\" 500.2 vs 501.0 (-0.2%); \"free. fun. effective.\" 472.1 vs 457.1 (+3.3%); ink -0.7% to +6.9%; x-height 24.23 vs 24.48; baseline within 0.5px in a 60px box. At 56.5px -1.13px (= 64px -1.28px): \"learn a language\" 516.4 vs 521.2 (-0.9%), \"learn anytime, anywhere\" 762.8 vs 788.2 (-3.2%), ink -0.7%. At 32px (= 36px): \"backed by science\" 326.2 vs 326.4, \"learn a language\" (-0.64px) 292.5 vs 293.2. It is the only candidate with Feather's single-storey a AND hooked l, so it carries the character, not just the width. Rejected: Nunito 900 (-4 to -7% wide, double-storey shapes read generic; the round-2 grade's main typography loss); Rubik 700 (width within 1-4% but square-shouldered, double-storey a, straight l); Grandstander 800 (width matches, too hand-drawn and uneven); M PLUS Rounded 1c 900 (inconsistent: 0% to +9.4%); Paytone One (close but 9% heavier, double-storey a); Poppins 700 (geometric, +1 to +6%); Fredoka, Baloo 2, Gabarito, Outfit, Varela Round, Dosis, Concert One (9-19% narrow); DynaPuff, Sniglet (far too heavy).",
"scopes": {
"brand_law": "Feather Bold for large, brief headlines, left-aligned lists and phrases ending with \"Duolingo\"; the guide publishes Nunito as the substitute when the brand fonts are unavailable (print, documents)",
"landing_page_rebuild_of_the_live_site": "Mochiy Pop P One 400, Feather Green #58CC02 (or #042C60 on the anytime band). Sizes x0.885: 42.5px for the site's 48 (0px), 56.5px for 64 (-1.13px = -0.02em), 32px for 36 (0px features, -0.64px bands). Line height in px: 60, 80, 45 (the site's boxes). Line breaks are fixed per headline: see kit.spec.type display-l/display-xl notes"
},
"prov": "published",
"source": "https://web.archive.org/web/20260711122139/https://design.duolingo.com/identity/typography",
"load": " (one request loads both stand-ins; Mochiy Pop P One has a single weight, 400: never set font-weight 700/900 on it, the browser would fake-bold it)",
"google_fonts": "Mochiy+Pop+P+One",
"line_height": 1.41,
"tracking": 0
},
"body": {
"family": "Baloo 2",
"weight": 475,
"weights": [
475,
650
],
"real_face": "DIN Next Rounded by brand law (licensed, Monotype); the site serves its own variable face \"duolingo-sans\" (weights 100-900) for every non-Feather line. Neither is supplied. Baloo 2 (Google Fonts, SIL OFL, variable 400-800) is the calibrated web stand-in",
"style_note": "Sentence case for headers and subheads; leading 140% by law (the site: 17/24 = 1.41 body); never under 14px (the site goes to 13px only in the footer language list); left or centered, never justified; button labels ALL CAPS",
"fallback_stack": "Nunito, system-ui, sans-serif",
"licence": "DIN Next Rounded: commercial (Monotype), not supplied. duolingo-sans: Duolingo's own web font, not licensable. Baloo 2: SIL OFL, Google Fonts (variable wght 400-800; also covers Devanagari for the footer's Hindi and Marathi). Nunito: the guide's published substitute for print and docs",
"stand_in": true,
"calibration": "Calibration round 3, 2026-10-29: the real \"duolingo-sans\" variable woff2 loaded on a www.duolingo.com page beside 9 Google Fonts families at 3-6 weights each, DOM width + canvas ink + side-by-side crops read by eye. duolingo-sans character: compact, upright, DIN-like with rounded ends, hooked foot on l, heavy at 700, caps compact and dense. Chosen Baloo 2 (same compact DIN-rounded skeleton, hooked l), at the site's px sizes, near-zero tracking: hero 32/44 650 -0.4px: \"The most fun way to learn languages, chess, and more!\" 752.0 vs 750.0 (+0.3%), ink -2.4%; body 17/24 475 -0.25px: \"Learning with Duolingo is fun, and research shows that it works! With quick,\" 533.0 vs 531.8 (+0.2%), ink +1.8%; paragraph 4 line 816.8 vs 817.4; inline link 650 -0.34px 208.5 vs 210.1; caps 15/20 650 +0.5px: \"I ALREADY HAVE AN ACCOUNT\" 210.2 vs 205.8 (+2.1%, ink +4.6%), GET STARTED 94.2 vs 93.0, TRY 1 WEEK FREE 118.5 vs 122.0, CERTIFY YOUR ENGLISH 166.3 vs 164.7, SITE LANGUAGE: ENGLISH 181.0 vs 178.5; the eight course labels 478.0 vs 472.5 (+1.2%); footer heading 19px 650 -0.38px \"Help and support\" 139.4 vs 140.6; footer link 15px 650 -0.3px 172.8 vs 174.4; footer language 13px 650 -0.26px 97.7 vs 98.8; badge 17px 650 -0.34px 85.5 vs 86.1, 14px -0.28px 101.5 vs 101.3. Ink within +-5% everywhere. Caps cap-height 9.2 vs 10.1px (Baloo caps are a little smaller; do not enlarge them, the width already matches). Baseline sits 1-1.5px higher in the same line box: accept it. Rejected: Nunito 500/700 (round 2: +10-21% wide, needed -0.04em to -0.05em squeeze and +0.8px caps that read stretched); M PLUS Rounded 1c (+12-18%, wide-set); Zen Maru Gothic (+3% but light and Japanese-proportioned); Rubik (+11-17%, square); Varela Round (one light weight, +11-23%); Kosugi Maru (monospaced caps); Fredoka, Quicksand (+5-15%, soft); Barlow (round 1, straight-sided).",
"scopes": {
"brand_law": "DIN Next Rounded for headlines of 10+ words, subheads and all body copy; light weight when paired with the logotype; the guide publishes Nunito as the substitute when brand fonts are unavailable",
"landing_page_rebuild_of_the_live_site": "Baloo 2 (variable), same px sizes and line heights as the site: hero 32/44 650 -0.4px #4B4B4B; body 17/24 475 -0.25px #777777; inline link 650 -0.34px #1CB0F6; every site-700 mixed-case line (footer, badges) 650 at -0.02em; uppercase labels 15/20 650 +0.5px uppercase. Never Nunito or Barlow for the rebuild",
"guide_led_piece": "Nunito 400/700, the guide's published substitute"
},
"prov": "published",
"source": "https://web.archive.org/web/20260711122139/https://design.duolingo.com/identity/typography",
"load": ": request the RANGE wght@400..800 (variable), because the recipe uses 475 and 650; a static 400;700 request snaps them to the wrong weights",
"google_fonts": "Baloo+2:wght@400..800",
"line_height": 1.41,
"scale": 1
},
"calibration": "Calibrated 2026-10-29 by loading the real faces from www.duolingo.com (\"feather\" and the variable \"duolingo-sans\" woff2) beside Google Fonts candidates and comparing DOM width, canvas ink and glyph crops. Display: Mochiy Pop P One 400 at 0.885x the site size (42.5px for 48, 56.5px with -1.13px for 64, 32px for 36), line boxes kept at the site px (60/80/45); widths -0.1% to -0.9% on most headlines (+3.3% on \"free. fun. effective.\", -3.2% on \"learn anytime, anywhere\"), x-height 24.23 vs 24.48px. Body: Baloo 2 variable at the site px sizes with near-zero tracking: hero 32/44 650 -0.4px (+0.3% wide), body 17/24 475 -0.25px (+0.2%), caps 15/20 650 +0.5px (within +-3%); ink within +-5% everywhere. Load wght@400..800 as a range (475 and 650 snap wrong on a static request) and never set Mochiy Pop P One above 400. The guide's own published substitute is Nunito (print and documents); on screen it ran 4-7% narrow as display and 10-21% wide as body, so it is not the web stand-in."
},
"style": {
"button_shape": "rounded",
"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",
"concept": "A cartoon world of rounded shapes: Duo and a diverse cast, built from rounded rectangles, circles and rounded triangles, bright flat color, pill-shaped shadows, floating accents; UI with chunky 3D buttons and lowercase Feather headlines on white.",
"concept_prov": "inferred",
"concept_source": "https://web.archive.org/web/20260823212032/https://design.duolingo.com/illustration/shape-language ; https://www.duolingo.com/",
"mood": [
"playful",
"bright",
"friendly",
"quirky",
"confident"
],
"mood_prov": "published (voice qualities and brand personality)",
"corners": "rounded everywhere: \"pointy shapes are off-brand\" (shape language); UI radius 12px on every button and badge (observed); course flags are rounded rectangles",
"shadows": "illustration: pill-shaped flat shadows under characters, darker than the base (published). UI: no blur shadows; the 3D button \"lip\" is a solid 4px (primary) or 2px (outline) offset box-shadow (observed)",
"texture": "none; flat color only. No gradients in the logo (published)",
"lines": "2px hairlines: #E5E5E5 on white (course strip, sticky nav), #A5ED6E on the green footer (observed)",
"imagery": "illustration first (\"the de-facto visual style\"); photography only of real learners, authentic portraits, ideally with a touch of green (imagery page)"
},
"voice": {
"tone": [
"expressive",
"playful",
"embracing",
"worldly"
],
"tone_prov": "published",
"tone_source": "https://web.archive.org/web/20260823212032/https://design.duolingo.com/writing/voice",
"notes": [
"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": [
{
"kind": "guidance",
"text": "Button copy in ALL CAPS, no punctuation in buttons (\"NO THANKS\", not \"NO, THANKS\")",
"prov": "published",
"source": "https://web.archive.org/web/20260823212032/https://design.duolingo.com/writing/style"
},
{
"kind": "guidance",
"text": "Sentence case for headers, subheads, page and blog titles; Feather Bold headlines fully lowercase",
"prov": "published",
"source": "https://web.archive.org/web/20260823212032/https://design.duolingo.com/writing/style"
},
{
"kind": "guidance",
"text": "No period at the end of headlines or subheads; an exclamation point is allowed",
"prov": "published",
"source": "https://web.archive.org/web/20260823212032/https://design.duolingo.com/writing/style"
},
{
"kind": "guidance",
"text": "Avoid em dashes and semicolons: prefer two short sentences; if an em dash is unavoidable, space both sides",
"prov": "published",
"source": "https://web.archive.org/web/20260823212032/https://design.duolingo.com/writing/style"
},
{
"kind": "guidance",
"text": "Serial (Oxford) comma; en dash without spaces for ranges; ellipses with no spaces",
"prov": "published",
"source": "https://web.archive.org/web/20260823212032/https://design.duolingo.com/writing/style"
},
{
"kind": "guidance",
"text": "Numerals for all numbers, even under 10, except at the start of a sentence; commas over 999 except XP/currency totals in product; % symbol",
"prov": "published",
"source": "https://web.archive.org/web/20260823212032/https://design.duolingo.com/writing/style"
},
{
"kind": "guidance",
"text": "Contractions encouraged; gender-neutral (they/them); no \"&\" for \"and\" when there is room",
"prov": "published",
"source": "https://web.archive.org/web/20260823212032/https://design.duolingo.com/writing/voice"
},
{
"kind": "guidance",
"text": "Feather Bold lines of more than about 10 words move to the body face",
"prov": "published",
"source": "https://web.archive.org/web/20260711122139/https://design.duolingo.com/identity/typography"
},
{
"kind": "guidance",
"text": "Do not combine the two typefaces in the same sentence",
"prov": "published",
"source": "https://web.archive.org/web/20260711122139/https://design.duolingo.com/identity/typography"
},
{
"kind": "guidance",
"text": "URLs without http:// or www., lowercase (duolingo.com); emails lowercase",
"prov": "published",
"source": "https://web.archive.org/web/20260823212032/https://design.duolingo.com/writing/style"
},
{
"kind": "guidance",
"text": "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",
"prov": "observed",
"source": "https://www.duolingo.com/",
"date": "2026-10-29"
}
],
"approved": {
"words": [
"learners",
"exercises",
"XP",
"streak",
"lessons",
"skills",
"courses",
"okay",
"website",
"internet",
"log in (verb)",
"login (noun)",
"sign up",
"anytime",
"Everyone can Duolingo"
],
"prov": "published",
"source": "https://web.archive.org/web/20260823212032/https://design.duolingo.com/writing/glossary"
},
"banned": [
"users",
"challenges",
"tree",
"OK",
"Web site",
"Internet (capitalized)",
"any time"
],
"banned_note": "Glossary \"words to avoid\" and spelling rules; \"users\" and \"tree\" are fine internally only",
"prov": "published",
"source": "https://web.archive.org/web/20260823212032/https://design.duolingo.com/writing/voice"
},
"spec": {
"source": "https://www.duolingo.com/",
"how": "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",
"layout": {
"page_margin": {
"desktop": 226,
"phone": 15
},
"section_padding": {
"desktop": 96,
"phone": 96
},
"container_max": 988,
"hero_text_max": 480,
"columns": 2,
"columns_phone": 1,
"gutter": 101,
"gutter_phone": 0,
"card_gap": 12,
"nav_height": 70,
"note": "One centred 988px column (margin 0 226px at 1440; content x226-x1214). Feature rows: flex row, gap 101px, 530x530 art beside a 473px text column, alternating sides (row / row-reverse); the 530px art overflows the column (x800-1330 when right, x80-110 start when left). Phone: 15px nav padding, text column 330px (x30-x360), art 345px (x23-x368), everything centred. Button stack gap 12px. Section rhythm: 96px top/bottom padding on the features run and DET; features run rows sit flush (530px each).",
"prov": "observed",
"source": "https://www.duolingo.com/",
"date": "2026-10-29"
},
"breakpoints": {
"phone_max": 767,
"all": [
768
],
"note": "Phone layout up to 767px (@media (max-width: 767px)); desktop layout from 768px (the Super wordmark and hero art switch at (min-width: 768px)). Same breakpoint, two ways of writing it. Other breakpoints were not read from the CSS."
},
"type": [
{
"id": "display-xl",
"role": "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",
"face": "display",
"size": {
"desktop": 56.5,
"phone": 32
},
"line_height": 1.416,
"weight": 400,
"tracking_px": -1.13,
"tracking_phone_px": -0.64,
"stand_in": "Mochiy Pop P One 400 at 0.885x the site size (56.5 / 32px), -0.02em, line box 80 / 45px",
"prov": "observed",
"source": "https://www.duolingo.com/ (Playwright, 1440 and 390, 2026-10-29)",
"note": "Line breaks are FIXED, both widths: \"learn anytime, anywhere\" and \"learn a language with duolingo\" (2 lines x 80px = 160px desktop in a 583px box; 2 x 45px = 90px phone in a 330px box). Set each line as a nowrap span; never let the stand-in rewrap"
},
{
"id": "display-l",
"role": "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",
"face": "display",
"size": {
"desktop": 42.5,
"phone": 32
},
"line_height": 1.412,
"weight": 400,
"tracking_px": 0,
"stand_in": "Mochiy Pop P One 400 at 0.885x the site size (42.5 / 32px), 0 tracking, line box 60 / 45px",
"prov": "observed",
"source": "https://www.duolingo.com/ (Playwright, 1440 and 390, 2026-10-29)",
"note": "Left-aligned on desktop, centred on phone (phone max-width 340px). Line breaks are FIXED (nowrap line spans; only where shown). Desktop: \"free. fun. effective.\" 1 line; \"backed by science\" 1; \"stay motivated\" 1; \"personalized learning\" 2 lines (120px); \"duolingo english test\" 1 line (500px wide, fits its 502px column). Phone: \"free. fun. effective.\" 2 lines (90px); \"backed by science\" 1; \"stay motivated\" 1; \"personalized learning\" 2; \"duolingo english test\" 2. The break positions, not the column width, decide the line count"
},
{
"id": "hero",
"role": "Hero sentence, #4B4B4B, centred. BUILD: Baloo 2 650 32/44, letter-spacing -0.4px (-0.0125em). Site: duolingo-sans 700, 0px",
"face": "body",
"size": {
"desktop": 32,
"phone": 32
},
"line_height": 1.375,
"weight": 650,
"tracking_px": -0.4,
"stand_in": "Baloo 2 650, -0.4px",
"prov": "observed",
"source": "https://www.duolingo.com/ (Playwright, 1440 and 390, 2026-10-29)",
"note": "NOT Feather (10-word sentence). FIXED breaks: desktop \"The most fun way to learn languages, chess, and more!\" (2 lines, 480px box, 88px tall); phone \"The most fun way to learn languages, chess, and more!\" (3 lines, 345px box, 132px tall)"
},
{
"id": "body",
"role": "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",
"face": "body",
"size": {
"desktop": 17,
"phone": 17
},
"line_height": 1.41,
"weight": 475,
"tracking_px": -0.25,
"stand_in": "Baloo 2 475, -0.25px",
"prov": "observed",
"source": "https://www.duolingo.com/ (Playwright, 1440 and 390, 2026-10-29)",
"note": "17/24, max-width 473px desktop, 330px phone centred; line counts 3/3/3/2 desktop, 5/4/4/3 phone"
},
{
"id": "button",
"role": "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",
"face": "body",
"size": {
"desktop": 15,
"phone": 15
},
"line_height": 1.33,
"weight": 650,
"tracking_px": 0.5,
"stand_in": "Baloo 2 650 15/20 +0.5px uppercase (widths within +-3% of the site's labels)",
"prov": "observed",
"source": "https://www.duolingo.com/ (Playwright, 1440 and 390, 2026-10-29)",
"note": "buttons #FFFFFF / #1CB0F6 / #000437 by variant; course labels #777777; SITE LANGUAGE: ENGLISH #AFAFAF"
},
{
"id": "badge",
"role": "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)",
"face": "body",
"size": {
"desktop": 17,
"phone": 17
},
"line_height": 1.18,
"weight": 650,
"tracking_px": -0.34,
"prov": "observed",
"source": "https://www.duolingo.com/ (Playwright, 1440 and 390, 2026-10-29)",
"stand_in": "Baloo 2 650, -0.02em"
},
{
"id": "footer-head",
"role": "Footer column heading, #D7FFB8. BUILD: Baloo 2 650 19/26.6, letter-spacing -0.38px (-0.02em)",
"face": "body",
"size": {
"desktop": 19,
"phone": 19
},
"line_height": 1.4,
"weight": 650,
"tracking_px": -0.38,
"prov": "observed",
"source": "https://www.duolingo.com/ (Playwright, 1440 and 390, 2026-10-29)",
"note": "19/26.6",
"stand_in": "Baloo 2 650, -0.38px"
},
{
"id": "footer-link",
"role": "Footer link #A5ED6E; \"Site language:\" label same style in #D7FFB8. BUILD: Baloo 2 650 15/22, letter-spacing -0.3px (-0.02em)",
"face": "body",
"size": {
"desktop": 15,
"phone": 15
},
"line_height": 1.47,
"weight": 650,
"tracking_px": -0.3,
"stand_in": "Baloo 2 650, -0.3px",
"prov": "observed",
"source": "https://www.duolingo.com/ (Playwright, 1440 and 390, 2026-10-29)",
"note": "15/22, 32px pitch"
},
{
"id": "footer-lang",
"role": "Site-language link, #A5ED6E. BUILD: Baloo 2 650 13/16, letter-spacing -0.26px (-0.02em)",
"face": "body",
"size": {
"desktop": 13,
"phone": 13
},
"line_height": 1.23,
"weight": 650,
"tracking_px": -0.26,
"prov": "observed",
"source": "https://www.duolingo.com/ (Playwright, 1440 and 390, 2026-10-29)",
"note": "13/16, 24px between items, 36px row pitch",
"stand_in": "Baloo 2 650, -0.26px"
}
],
"components": {
"button_primary": {
"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)",
"states": {
"hover": {
"css": {
"filter": "brightness(1.1)"
},
"measured": {
"filter": "brightness(1.1)"
},
"prov": "observed"
},
"active": {
"css": {
"transform": "translateY(4px)",
"box-shadow": "none",
"clip-path": "inset(0 0 4px 0 round 12px)",
"filter": "brightness(1.1)"
},
"measured": {
"transform": "matrix(1,0,0,1,0,4)",
"lip": "removed"
},
"prov": "observed"
}
},
"note": "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",
"prov": "observed",
"source": "https://www.duolingo.com/ (Playwright, 1440 and 390, 2026-10-29)",
"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"
},
"button_outline": {
"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",
"states": {
"hover": {
"css": {
"filter": "brightness(0.9)"
},
"measured": {
"filter": "brightness(0.9)"
},
"prov": "observed"
},
"active": {
"css": {
"transform": "translateY(2px)",
"border-bottom-width": "2px",
"height": "48px"
},
"measured": {
"transform": "matrix(1,0,0,1,0,2)",
"lip": "removed"
},
"prov": "observed"
}
},
"note": "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.)",
"prov": "observed",
"source": "https://www.duolingo.com/ (Playwright, 1440 and 390, 2026-10-29)",
"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)"
},
"button_on_dark": {
"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",
"note": "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",
"prov": "observed",
"source": "https://www.duolingo.com/ (Playwright, 1440 and 390, 2026-10-29)",
"label_build": "Baloo 2 650 15px, line-height 20px, letter-spacing +0.5px (0.033em), text-transform uppercase",
"states": {
"active": {
"css": {
"transform": "translateY(4px)",
"box-shadow": "none",
"clip-path": "inset(0 0 4px 0 round 12px)"
},
"measured": {
"transform": "assumed same as primary"
},
"prov": "inferred"
}
}
},
"app_badge": {
"fill": "#FFFFFF",
"text": "#4B4B4B",
"height": 63,
"width": "177 (App Store) / 162 (Google Play)",
"padding": "9.5px 14px",
"radius": 12,
"face": "body",
"note": "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)",
"prov": "observed",
"source": "https://www.duolingo.com/ (Playwright, 1440 and 390, 2026-10-29)",
"label_build": "Baloo 2 650: 14/17 -0.28px over 17/20 -0.34px"
},
"course_chip": {
"text": "#777777",
"height": 28,
"font_size": 15,
"weight": 650,
"letter_spacing": "0.5px (0.033em)",
"case": "uppercase",
"face": "body",
"note": "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",
"prov": "observed",
"source": "https://www.duolingo.com/ (Playwright, 1440 and 390, 2026-10-29)",
"label_build": "Baloo 2 650 15px, line-height 20px, letter-spacing +0.5px (0.033em), text-transform uppercase"
},
"nav_language": {
"text": "#AFAFAF",
"font_size": 15,
"weight": 650,
"letter_spacing": "0.5px (0.033em)",
"case": "uppercase",
"face": "body",
"note": "\"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)",
"prov": "observed",
"source": "https://www.duolingo.com/ (Playwright, 1440 and 390, 2026-10-29)",
"label_build": "Baloo 2 650 15px, line-height 20px, letter-spacing +0.5px (0.033em), text-transform uppercase"
},
"footer_link": {
"text": "#A5ED6E",
"font_size": 15,
"weight": 650,
"face": "body",
"note": "15/22, no underline, 32px pitch; hover not measured",
"prov": "observed",
"source": "https://www.duolingo.com/ (Playwright, 1440 and 390, 2026-10-29)",
"label_build": "Baloo 2 650 15/22, letter-spacing -0.3px (-0.02em)"
}
},
"motion": [
{
"name": "button press",
"easing": "linear",
"use": "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\")",
"prov": "observed",
"source": "https://www.duolingo.com/ (Playwright, 1440 and 390, 2026-10-29)",
"duration_ms": 0
},
{
"name": "sticky nav reveal",
"easing": "cubic-bezier(0.22, 1, 0.36, 1)",
"duration_ms": 400,
"use": "fixed 72px white bar slides in on scroll; border-color transition 0.3s",
"prov": "observed",
"source": "https://www.duolingo.com/ (Playwright, 1440 and 390, 2026-10-29)"
},
{
"name": "illustrations",
"use": "every illustration is a Lottie animation; static SVG/PNG fallbacks are the resting state",
"prov": "observed",
"source": "https://www.duolingo.com/ (Playwright, 1440 and 390, 2026-10-29)"
}
],
"signature": [
{
"name": "3D \"lip\" buttons",
"where": "every CTA on the site and in the app",
"spec": "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",
"dont": "use blurred drop shadows, pill shapes, sentence-case labels or punctuation in labels",
"prov": "observed",
"source": "https://www.duolingo.com/",
"date": "2026-10-29",
"id": "lip-buttons",
"example": {
"ground": "paper",
"text": "GET STARTED",
"button": true
},
"dont_example": {
"ground": "paper",
"text": "Get started",
"button": true,
"button_fill": "#1CB0F6"
},
"once": "on every call to action"
},
{
"name": "lowercase Feather headlines in green",
"where": "section headlines, campaign lines",
"spec": "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.\")",
"dont": "set Feather in Title Case or caps, in Eel or other neutrals, or in several secondary colors",
"prov": "published",
"source": "https://web.archive.org/web/20260711122139/https://design.duolingo.com/identity/typography",
"id": "lowercase-green-feather",
"example": {
"ground": "paper",
"text": "stay motivated",
"ink": "accent"
},
"dont_example": {
"ground": "paper",
"text": "Stay Motivated",
"ink": "ink"
}
},
{
"name": "Duo and the cast, built from rounded shapes",
"where": "every image slot",
"spec": "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",
"dont": "use pointy shapes, ovals for shadows or eyes, gray as a base, centred pupils, or a static expressionless pose",
"prov": "published",
"source": "https://web.archive.org/web/20260823212032/https://design.duolingo.com/illustration/shape-language",
"id": "rounded-shape-cast"
},
{
"name": "game-reward props",
"where": "feature art, anytime band, footer CTA",
"spec": "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",
"dont": "add realistic 3D render or photography to these slots",
"prov": "observed",
"source": "https://www.duolingo.com/",
"date": "2026-10-29",
"id": "game-reward-props"
}
],
"page": {
"source": "https://www.duolingo.com/",
"date": "2026-10-29",
"prov": "observed",
"nav": {
"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"
},
"sections": [
{
"name": "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"
]
},
{
"name": "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 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": []
},
{
"name": "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"
]
},
{
"name": "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"
]
},
{
"name": "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"
]
},
{
"name": "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"
},
"dark_ground": {
"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"
}
},
"bands": [
{
"label": "Nav (transparent, 70px)",
"ground": "#FFFFFF",
"content": "green logo left; SITE LANGUAGE: ENGLISH right",
"desktop": "y0-70 in the 988px column",
"phone": "logo centred",
"anatomy": [
"sticky white 72px bar with GET STARTED after scroll",
"2px #E5E5E5 bottom on the sticky bar"
]
},
{
"label": "Hero",
"ground": "#FFFFFF",
"content": "illustration left, hero sentence + 2 buttons right",
"desktop": "y70-820; art box x295-719; text box x734-1214 (15px apart)",
"phone": "art → h1 → buttons, centred",
"anatomy": [
"h1 Baloo 2 650 32/44 -0.4px #4B4B4B (site: duolingo-sans 700)",
"buttons 330x50 12px apart"
]
},
{
"label": "Course strip",
"ground": "#FFFFFF",
"content": "flag + course chips carousel",
"desktop": "y820-900, 2px #E5E5E5 top/bottom",
"phone": "hidden",
"anatomy": [
"flags 36x28",
"labels 15px #777777 caps"
]
},
{
"label": "Features x4",
"ground": "#FFFFFF",
"content": "alternating headline+paragraph / 530px art",
"desktop": "y900-3212, rows 530 tall, gap 101",
"phone": "stacked centred, art below text; first headline y940 (header is 844 = 100vh)",
"anatomy": [
"Feather 48 #58CC02",
"body 17/24 #777777"
]
},
{
"label": "Learn anytime, anywhere",
"ground": "#FFFFFF",
"content": "navy 64px headline, 2 app badges, floating phones",
"desktop": "y3212-4501",
"phone": "badges stacked",
"anatomy": [
"#042C60 headline",
"badges 177/162 x63"
]
},
{
"label": "Super Duolingo",
"ground": "#100F3E",
"content": "Super card art left, wordmark image + white button right",
"desktop": "y4501-5401, padding 185",
"phone": "stacked, full-width button",
"anatomy": [
"button label #000437"
]
},
{
"label": "Duolingo English Test",
"ground": "#FFFFFF",
"content": "headline, paragraph, outline button / art",
"desktop": "y5401-6123",
"phone": "stacked centred",
"anatomy": [
"outline button #1CB0F6 label"
]
},
{
"label": "Closing CTA + wave",
"ground": "#FFFFFF → #58CC02",
"content": "64px green headline, GET STARTED, coins-and-wave art",
"desktop": "y6123-6976; art 1440x795 at y6104, #58CC02 strip y6899-6976",
"phone": "art cropped 696 wide",
"anatomy": [
"wave flows into the footer"
]
},
{
"label": "Footer",
"ground": "#58CC02",
"content": "5 link columns, hairline, site-language list",
"desktop": "y6976-7803",
"phone": "single column at x40",
"anatomy": [
"#D7FFB8 headings",
"#A5ED6E links and hairline",
"no copyright line"
]
}
],
"icons": {
"style": "no UI icon set on the homepage beyond chevrons and store glyphs; course \"flags\" are rounded-rectangle tiles",
"grid": "not published",
"stroke": "not published",
"sizes": [
{
"name": "chevron",
"px": 14,
"use": "carousel and language control"
},
{
"name": "store glyph",
"px": 34,
"use": "app badges"
},
{
"name": "course flag",
"px": 36,
"use": "36x28 tile"
}
],
"prov": "observed",
"source": "https://www.duolingo.com/",
"date": "2026-10-29"
},
"provenance": "observed",
"responsive": {
"measured_at": [
390,
1440
],
"source": "https://www.duolingo.com/",
"date": "2026-10-29",
"prov": "observed",
"rows": [
{
"what": "band headline (site feather 700)",
"values": {
"390": "36px / 45px, -0.72px; build 32px / 45px, -0.64px",
"1440": "64px / 80px, -1.28px; build 56.5px / 80px, -1.13px"
}
},
{
"what": "feature headline (site feather 700)",
"values": {
"390": "36px / 45px, centred; build 32px / 45px",
"1440": "48px / 60px, left; build 42.5px / 60px"
}
},
{
"what": "hero sentence",
"values": {
"390": "32px / 44px, 3 lines in 345px",
"1440": "32px / 44px, 2 lines in 480px"
}
},
{
"what": "body",
"values": {
"390": "17px / 24px, 330px wide",
"1440": "17px / 24px, max 473px"
}
},
{
"what": "buttons",
"values": {
"390": "330x50, stacked 12px apart, pinned to the bottom of the 100vh header",
"1440": "330x50 hero and closing CTA; 133x44 in the sticky nav"
}
},
{
"what": "page margin",
"values": {
"390": "15px",
"1440": "226px (one centred 988px column)"
}
},
{
"what": "section padding",
"values": {
"390": "96px",
"1440": "96px"
}
},
{
"what": "feature row",
"values": {
"390": "stacked: headline, paragraph, 345px art; 96px between rows",
"1440": "530px row, text 473px + 101px gap + 530px art, alternating sides"
}
},
{
"what": "course strip",
"values": {
"390": "hidden",
"1440": "80px, 8 chips visible"
}
},
{
"what": "nav",
"values": {
"390": "logo centred 161x38, no controls",
"1440": "70px, logo 179x42 left, SITE LANGUAGE right"
}
}
]
}
},
"system": {
"fixed": [
"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\""
],
"flex": "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.",
"traits": [
{
"is": "Expressive: brief, active, direct, excited",
"not": "long-winded, passive, unclear, indifferent, in your face",
"prov": "published",
"source": "https://web.archive.org/web/20260823212032/https://design.duolingo.com/writing/voice"
},
{
"is": "Playful: friendly, jolly, creative, clever in quick doses",
"not": "touchy-feely, sarcastic or smug, dry, intellectual",
"prov": "published",
"source": "https://web.archive.org/web/20260823212032/https://design.duolingo.com/writing/voice"
},
{
"is": "Embracing: supportive, gender-neutral, contractions, clear",
"not": "aggressive, gendered, writing words out, complicated, mean-spirited",
"prov": "published",
"source": "https://web.archive.org/web/20260823212032/https://design.duolingo.com/writing/voice"
},
{
"is": "Worldly: interested, knowledgeable, universal, multilingual (English first)",
"not": "smug, a know-it-all, slang not everyone knows, English only",
"prov": "published",
"source": "https://web.archive.org/web/20260823212032/https://design.duolingo.com/writing/voice"
}
]
},
"proportion": {
"note": "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",
"source": "https://www.duolingo.com/",
"prov": "observed",
"parts": [
{
"name": "Snow",
"hex": "#FFFFFF",
"n": 5999
},
{
"name": "Feather Green",
"hex": "#58CC02",
"n": 904
},
{
"name": "Super Night",
"hex": "#100F3E",
"n": 900
}
]
},
"tone_by_state": {
"note": "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.",
"source": "https://web.archive.org/web/20260823212032/https://design.duolingo.com/writing/tone",
"prov": "inferred",
"states": [
{
"state": "Learner succeeds: celebrate, exclamation points welcome",
"level": 5
},
{
"state": "Social, push and campaigns led by Duo",
"level": 4
},
{
"state": "Learner stumbles: friendly and helpful, without overdoing it",
"level": 3
},
{
"state": "Homepage and landing pages (observed 2026-10-29)",
"level": 2
},
{
"state": "Serious stories: tone down exuberance and exclamation points",
"level": 1
}
]
},
"formats": [
{
"format": "Landing page (as www.duolingo.com builds its homepage)",
"level": 3,
"must": "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.",
"flex": "which features, which promo band; illustrations from the slot assets only"
},
{
"format": "In-app / product UI",
"level": 3,
"must": "white base, Feather Green actions, caps buttons, encouraging tone",
"flex": "secondary colors for states"
},
{
"format": "Push notification / email",
"level": 4,
"must": "Duo's voice when from Duo; one emoji at most, omitted half the time",
"flex": "tone by learner state"
},
{
"format": "Social",
"level": 5,
"must": "Duo and cast, playful voice, multilingual replies",
"flex": "emoji freely"
},
{
"format": "Print / out-of-home",
"level": 4,
"must": "logo large in a corner or centred (min 35mm), Feather headline lowercase, bold secondary ground allowed",
"flex": "90° logo on tall formats"
},
{
"format": "Third-party / press",
"level": 2,
"must": "landscape or portrait lockup with clear space",
"flex": "lockup choice by space"
}
],
"checks": [
{
"name": "Logo hidden",
"text": "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."
},
{
"name": "Swap test",
"text": "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."
},
{
"name": "Copy check",
"text": "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."
}
],
"examples": [
{
"chapter": "voice",
"do": {
"ground": "paper",
"text": "Not quite correct. Try again!",
"font": "body",
"weight": 650
},
"do_caption": "When learners stumble: friendly and helpful, then straight back to it (the guide's own example).",
"dont": {
"ground": "paper",
"text": "Incorrect.",
"font": "body",
"weight": 650
},
"dont_caption": "Cold and final: the guide's \"not this\"."
},
{
"chapter": "voice",
"do": {
"ground": "paper",
"text": "Correct! Awesome work!",
"font": "body",
"weight": 650
},
"do_caption": "When learners succeed, celebrate. Exclamation points are welcome here.",
"dont": {
"ground": "paper",
"text": "You have successfully passed this level",
"font": "body",
"weight": 650
},
"dont_caption": "Flat and formal: the guide's \"not this\"."
},
{
"chapter": "type",
"do": {
"ground": "paper",
"text": "stay motivated",
"ink": "accent"
},
"do_caption": "Feather (stand-in Mochiy Pop P One), lowercase, short, in Feather Green.",
"dont": {
"ground": "paper",
"text": "Stay Motivated",
"ink": "ink"
},
"dont_caption": "Title Case in Eel: the guide rules out both for Feather."
},
{
"chapter": "color",
"do": {
"ground": "paper",
"text": "GET STARTED",
"button": true
},
"do_caption": "Feather Green caps button on white with its solid #58A700 lip: the default action.",
"dont": {
"ground": "paper",
"text": "free. fun. effective.",
"mark": [
"free.",
"fun.",
"effective."
],
"mark_style": "color",
"ink": "#CE82FF"
},
"dont_caption": "Feather in a secondary color: the guide keeps Feather green, or white on color."
},
{
"chapter": "logo",
"do": {
"ground": "accent",
"text": "duolingo",
"ink": "on_accent"
},
"do_caption": "The logotype in white on Feather Green, one of its three colorways (green, white, gray).",
"dont": {
"ground": "paper",
"text": "duolingo",
"ink": "#FF9600"
},
"dont_caption": "Recolored: don't change the logo color."
}
],
"make_it_yours": {
"note": "Everything above transfers. These are Duolingo's own and must be replaced with yours: name and logo, purpose, positioning, messaging pillars, proof, taglines and boilerplate.",
"replace": [
"identity",
"purpose",
"positioning",
"messaging.pillars",
"messaging.proof_points",
"messaging.taglines",
"messaging.boilerplate"
],
"reference": {
"purpose": {
"mission": {
"label": "Mission",
"text": "Develop the best language education in the world and make it available to everyone (paraphrased from the guide)",
"prov": "published",
"source": "https://web.archive.org/web/20260823211826/https://design.duolingo.com/writing/brand-narrative"
},
"story": {
"text": "Language learning once needed tutors, textbooks and lots of money; Duolingo opened the door so anyone with a screen can learn (paraphrased)",
"prov": "published",
"source": "https://web.archive.org/web/20260823211826/https://design.duolingo.com/writing/brand-narrative"
},
"values": [
{
"name": "Inspiring",
"means": "anything is possible when you Duolingo",
"prov": "published",
"source": "https://web.archive.org/web/20260823211826/https://design.duolingo.com/writing/brand-narrative"
},
{
"name": "Inclusive",
"means": "language belongs to everyone; free, accessible",
"prov": "published",
"source": "https://web.archive.org/web/20260823211826/https://design.duolingo.com/writing/brand-narrative"
},
{
"name": "Can-do",
"means": "rooting for learners, bringing the energy",
"prov": "published",
"source": "https://web.archive.org/web/20260823211826/https://design.duolingo.com/writing/brand-narrative"
},
{
"name": "Curious",
"means": "a little language makes life richer",
"prov": "published",
"source": "https://web.archive.org/web/20260823211826/https://design.duolingo.com/writing/brand-narrative"
},
{
"name": "Quirky",
"means": "the fun in language fundamentals; eccentric characters and sentences",
"prov": "published",
"source": "https://web.archive.org/web/20260823211826/https://design.duolingo.com/writing/brand-narrative"
}
]
},
"positioning": {
"statement": {
"text": "The world's most popular, most enjoyable way to learn a language (guide, \"The Duolingo Difference\")",
"prov": "published",
"source": "https://web.archive.org/web/20260823211826/https://design.duolingo.com/writing/brand-narrative"
},
"category": {
"text": "Language learning app (homepage now also offers chess and math courses, observed)",
"prov": "published",
"source": "https://web.archive.org/web/20260823211826/https://design.duolingo.com/writing/brand-narrative"
},
"audience": {
"text": "Everyone: consumers in developed and developing markets, institutions, prospective employees, volunteer community (messages by audience)",
"prov": "published",
"source": "https://web.archive.org/web/20260823211826/https://design.duolingo.com/writing/brand-narrative"
},
"promise": {
"text": "Everyone can Duolingo.",
"prov": "published",
"source": "https://web.archive.org/web/20260823211826/https://design.duolingo.com/writing/brand-narrative"
},
"differentiators": [
"Free",
"Fun, game-like motivation (streaks, XP, Duo)",
"Bite-sized lessons based on learning science",
"35+ languages, inclusive"
]
},
"messaging": {
"essence": {
"text": "Everyone can Duolingo.",
"prov": "published",
"source": "https://web.archive.org/web/20260823211826/https://design.duolingo.com/writing/brand-narrative"
},
"pillars": [
{
"name": "Free and open to everyone",
"claim": "All you need is a screen, an internet connection and a few minutes a day (paraphrased)",
"proof_ids": [
"free"
],
"prov": "published",
"source": "https://web.archive.org/web/20260823211826/https://design.duolingo.com/writing/brand-narrative"
},
{
"name": "Fun, never a chore",
"claim": "Technology plus the power of play makes language learning a joy (paraphrased)",
"proof_ids": [
"bite"
],
"prov": "published",
"source": "https://web.archive.org/web/20260823211826/https://design.duolingo.com/writing/brand-narrative"
},
{
"name": "Effective",
"claim": "Bite-sized lessons based on learning science (paraphrased)",
"proof_ids": [
"bite"
],
"prov": "published",
"source": "https://web.archive.org/web/20260823211826/https://design.duolingo.com/writing/brand-narrative"
},
{
"name": "Inclusive and worldwide",
"claim": "Loved by people of all ages and backgrounds, 35+ languages (paraphrased)",
"proof_ids": [
"langs"
],
"prov": "published",
"source": "https://web.archive.org/web/20260823211826/https://design.duolingo.com/writing/brand-narrative"
}
],
"proof_points": [
{
"id": "free",
"text": "Duolingo is free (guide); the homepage hero offers GET STARTED with no price",
"prov": "published",
"source": "https://web.archive.org/web/20260823211826/https://design.duolingo.com/writing/brand-narrative"
},
{
"id": "bite",
"text": "Bite-sized lessons based on learning science; homepage links \"research shows that it works\" to duolingo.com/efficacy",
"prov": "published",
"source": "https://web.archive.org/web/20260823211826/https://design.duolingo.com/writing/brand-narrative"
},
{
"id": "langs",
"text": "35+ languages to learn (guide); the homepage course strip lists 40 language courses plus Chess and Math (observed)",
"prov": "published",
"source": "https://web.archive.org/web/20260823211826/https://design.duolingo.com/writing/brand-narrative"
}
],
"taglines": [
{
"text": "Everyone can Duolingo.",
"where": "tagline, brand-narrative page",
"prov": "published",
"source": "https://web.archive.org/web/20260823211826/https://design.duolingo.com/writing/brand-narrative"
},
{
"text": "Go. Learn a language.",
"where": "short CTA, brand-narrative page",
"prov": "published",
"source": "https://web.archive.org/web/20260823211826/https://design.duolingo.com/writing/brand-narrative"
},
{
"text": "free. fun. effective.",
"where": "homepage feature headline (observed)",
"prov": "observed",
"source": "https://www.duolingo.com/",
"date": "2026-10-29"
}
],
"boilerplate": {
"text": "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)",
"prov": "published",
"source": "https://web.archive.org/web/20260823211826/https://design.duolingo.com/writing/brand-narrative"
}
}
}
}
}