Duolingo
Mapaglarong maskot ng klase sa puting papel
Ang interface ng Duolingo ay dinisenyo na parang isang picture book ng mga bata: isang puting papel na canvas, makapal at bilugan na font, at isang iisang matingkad na berdeng kulay na agad na pumupukaw sa "tamang sagot." Ang pangunahing teksto ay isang nakapapawi na mid-grey na tono, na nagpapahintulot sa berde at sa asul na accent nito na gawin ang lahat ng emosyonal na gawain—berde para sa progreso at mga heading, asul para sa mga naki-click na link at karagdagang mga aksyon. Ang mga bahagi ay hugis pildoras o malalaki at bilugan na sulok na may makapal na itim o may kulay na mga border, na ginagawang mas parang sticker na nakadikit sa pahina ang bawat button kaysa sa isang patag na kontrol ng UI.
Ang mga seksyon ay sumasakop sa buong lapad ng pahina at nakaayos nang patayo sa isang hanay, bawat isa ay humigit-kumulang 800 pixel ang taas. Ang pinakamataas na lapad ng nilalaman ay humigit-kumulang 1 pixel sa gitna. Ang teksto sa kaliwa at mga ilustrasyon sa kanan ay nagpapalitan, na nagbibigay ng sapat na patayong espasyo (80 pixel sa pagitan ng mga seksyon). Walang mga grid card o mga layout na may maraming hanay—ang bawat seksyon ay isang bloke ng teksto na ipinares sa isang ilustrasyon. Ang nabigasyon ay isang minimalistang top bar na may logo at tagapili ng wika, na lumilitaw bilang isang nakapirming bar sa pagitan ng mga seksyon. Ang footer ay isang berdeng guhit na sumasaklaw sa buong lapad ng pahina. Ang ritmo ay editoryal: heading, talata, panawagan sa aksyon, ilustrasyon, pag-uulit.
Ang naglalarawang wika ng libro ay nagtatampok ng mga patag, dalawang-dimensyonal na karakter ng maskot (Duet ang kuwago at iba't ibang pigura ng tao) na may mga bilugan at heometrikong hugis, matingkad na itim na balangkas, at isang komplementaryong paleta ng kulay ng rosas, lila, dilaw, kahel, at asul na hindi kailanman lumilitaw sa mismong interface. Ang mga ilustrasyon ay nakaposisyon sa tabi ng teksto sa kanang bahagi ng bawat seksyon, laban sa isang purong puting background, walang mga lalagyan o background. Walang mga litrato—ang mga karakter ang nagsisilbing biswal na nilalaman. Ang ikonograpiya ay gumagamit ng makakapal na balangkas, na naaayon sa estilo ng mga maskot. Katamtaman ang densidad ng imahe: ang bawat seksyon ay nagtatampok ng isang malaking ilustrasyon ng karakter, habang ang natitirang bahagi ng pahina ay nakatuon sa tipograpiya at puting espasyo.
Paleta
Tatak
- Eager Green
#58cc02— Ginagamit ang berde upang i-highlight ang mga link, tag, at maiikling parirala. Hindi ito dapat gamitin bilang pangunahing kulay para sa mga panawagan para sa aksyon. - Storybook Green
#d7ffb8— Malambot na mga highlight sa mga mapusyaw na ibabaw, mga banayad na kulay sa likod ng mga label ng nabigasyon sa footer.
Neutral
- Spark Blue
#1cb0f6— Ginagamit ang asul upang i-highlight ang mga link, tag, at maiikling parirala. Hindi ito dapat gamitin bilang pangunahing kulay para sa mga panawagan para sa aksyon. - Fresh Leaf
#a5ed6e— Ginagamit ang berde upang i-highlight ang mga link, tag, at maiikling parirala. Hindi ito dapat gamitin bilang pangunahing kulay para sa mga panawagan para sa aksyon. - Night Ink
#000437— Ang mga link, tag, at maiikling naka-highlight na parirala ay naka-highlight sa kulay lila. - Paper White
#ffffff— Kanbas ng pahina, mga ibabaw na karton, teksto ng buton sa berde/madilim na background. - Charcoal
#4b4b4b— Mga Header at Body Text ng Hero - Universal dark text na nagbibigay-daan sa mga may kulay na headline na mapansin. - Pencil Gray
#777777— Ang mga pangunahing talata ng teksto ay binibigyang-diin ng mga hindi kapansin-pansing letra, at ang pangalawang naglalarawang teksto ay napapaatras sa likuran, kaya't ang mga may-kulay na elemento ay napapansin.
Tipograpiya
mula 13 hanggang 64px · 7 hakbang
- feather — kapalit: Inter · mga balangkas 700 · Ang mga heading ng seksyon, tulad ng "Libre. Masaya. Epektibo" at "Duolingo English Test," ay ipinapakita gamit ang isang pasadyang bilugan na font, na nagbibigay sa brand ng mapaglaro, palakaibigan, at mala-maskot na istilo. Palitan ng "Feather Bold" o "Nunito Black" sa naaangkop na bigat. Pagitan ng mga titik: -0.0200em
- duolingo-sans — kapalit: Inter · mga balangkas 500 · Mga pangunahing talata at mga link sa nabigasyon sa 17px/500—isang heometrikong sans-serif na font na nananatiling nababasa, na nagpapahintulot sa 700 line weight na i-highlight ang mahahalagang punto. Palitan ng 'DIN Next', 'Inter', o 'Nunito Sans'.
- duolingo-sans — kapalit: Inter · mga balangkas 700 · Ginagamit ang lahat ng value na weight-700: ang malalaking titik sa mga navigation label ay 15px (ls 0.0530em), ang mga subheading ay 19px at 32px, at ang link emphasis ay 13px. Pareho ang font gaya ng pangunahing teksto—ang visual na pagkakaiba ay nasa bigat, hindi sa pagbabago ng font. Pagitan ng mga titik: 0.0530em para sa malalaking titik sa mga navigation label.
Mga pagitan at anyo
| Layunin | Kahulugan |
|---|---|
| Densidad | siksik |
| Pangunahing hakbang | 12px |
| Radius ng buton | 12px |
| Radius ng card | 12px |
| Mga anino | walang - mga hangganan sa halip na mga anino |
| Sa pagitan ng mga seksyon | 80-120px |
| Lapad ng pahina | 1200px |
Gagawa ang AI ng website mo sa estilong Duolingo at pupunuin ito
- Punuin ng mga produkto at post gamit ang link - Instagram, TikTok, Facebook.
- Maglipat ng nilalaman mula sa iyong lumang site—tukuyin lamang ang address.
- Modernong disenyo gamit ang pinakamahusay na engine: React ( Next.js) na may kasamang server rendering at SEO optimization na agad-agad.
- Ganap na awtomatikong pag-optimize ng SEO para sa mga resulta ng paghahanap at mga rekomendasyon sa neural network.
Mga katulad na estilo
- Family — Isang pagkalat mula sa isang kuwentong engkanto sa cream parchment
- Say Briefly — Sketchbook ng creative agency sa kremang papel
- Flying Papers — Pagtatapat sa isang Cartoon ng Sabado ng Umaga
- Portrait — Isang pader ng mga alaala, na nakunan ng Polaroids sa kulay kremang papel. Isang matingkad at kulay kremang scrapbook kung saan ang maitim na asul na tinta ang nagsisilbing tanging teksto, tanging mga linya ng istruktura, at tanging kulay ng frame—na may iisang iginuhit na bahaghari na lumilitaw nang isang beses, sa buton na "Magrehistro" at sa naka-italiko na salitang "magpakailanman," at hindi na muling lilitaw.
- Karl — Isang 3D pop-up na diorama na parang libro sa isang maaraw na araw
- Navigate — Isang malaking set ng mga sticker na nakakabit sa isang board: malaking grotesque na font, lahat ay nasa anyo ng mga tablet at limang icon na may iba't ibang kulay, na paulit-ulit na parang isang logo
- Monte — Umaga sa baybayin na may kalawangin na kulay
- MotherDuck — Ang terminal ay naka-code gamit ang mga colored pencil sa cream paper
- Wise Design — Isang neon market stall sa isang pandaigdigang kalye—isang matingkad na berdeng karatula na sumisigaw sa mataong pamilihan, habang sa likod nito, isang makintab na user interface ng produkto ang palihim na lumilitaw.
- Hatch — Isang disenyong iginuhit ng kamay na istilong samizdat na hinaluan ng mga pastel na mangkok ng kendi. Isang kremang canvas na papel na pinalamutian ng mga mint accents, mga tuldok ng confetti, at mga panawagan para sa aksyon na hugis tableta, kung saan ang isang malaki at naka-bold na serif font ay nagpapahiwatig ng kasiyahan, at isang asul na maskot ang kumikislap sa sulok.
- Superr — Isang mainit na kuwaderno sa paaralan sa ilalim ng malambot na liwanag ng hapon. Isang pahinang kulay krema, isang orange na marker na walang takip, at isang tumpok ng mga nakalamina na sticker ng pangalan na naghihintay na tanggalin.
- Mews — Isang sentro ng pamamahala ng hospitality sa bukang-liwayway, nababalutan ng kulay rosas. Isang puting-pader at naliliwanagan ng araw na workspace kung saan ang matingkad na itim na letra, mainit na kremang kard, at isang hot pink na action button ang nagbibigay-kahulugan sa bawat screen—isang mapaglarong kumpiyansa sa halip na isang pagpipigil sa sarili sa korporasyon.