Duolingo
Lekfull klassmaskot på vitt papper
Duolingos gränssnitt är utformat som en bilderbok för barn: en vit duk, fylligt, runt teckensnitt och en enda, fyllig grön färg som omedelbart frammanar "rätt svar". Huvudtexten är i lugnande mellangrå toner, vilket gör att det gröna och dess accentblå gör allt det emotionella arbetet – grönt för framsteg och rubriker, blått för klickbara länkar och ytterligare åtgärder. Komponenterna är formade som piller eller tjocka, rundade hörn med tjocka svarta eller färgade kanter, vilket gör att varje knapp känns mer som ett klistermärke som sitter på sidan än en platt UI-kontroll.
Avsnitten upptar hela sidans bredd och är ordnade vertikalt i en enda kolumn, vardera cirka 800 pixlar hög. Den maximala innehållsbredden är cirka 1 pixel centrerad. Text till vänster och illustrationer till höger varvas, vilket ger gott om vertikalt utrymme (80 pixlar mellan avsnitten). Det finns inga rutnät eller layouter med flera kolumner – varje avsnitt är ett enda textblock i kombination med en enda illustration. Navigeringen är en minimalistisk övre fält med en logotyp och språkväljare, som visas som ett fast fält mellan avsnitten. Sidfoten är en grön rand som sträcker sig över hela sidans bredd. Rytmen är redaktionell: rubrik, stycke, uppmaning till handling, illustration, upprepning.
Bokens illustrativa språk har platta, tvådimensionella maskotkaraktärer (ugglan Duet och olika mänskliga figurer) med rundade geometriska former, djärva svarta konturer och en komplementär färgpalett av rosa, lila, gult, orange och blått som aldrig dyker upp i själva gränssnittet. Illustrationerna är placerade bredvid texten på höger sida av varje avsnitt, mot en ren vit bakgrund, utan behållare eller bakgrunder. Det finns inga fotografier – karaktärerna fungerar som visuellt innehåll. Ikonografin använder tjocka konturer, vilket överensstämmer med maskoternas stil. Bildtätheten är måttlig: varje avsnitt har en stor illustration av karaktären, medan resten av sidan ägnas åt typografi och vitt utrymme.
Palett
Stämpla
- Eager Green
#58cc02— Grönt används för att markera länkar, taggar och korta fraser. Det bör inte användas som primärfärg för uppmaningar till handling. - Storybook Green
#d7ffb8— Mjuka högdagrar på ljusa ytor, subtila bakgrundstoner bakom navigeringsetiketterna i sidfoten.
Neutral
- Spark Blue
#1cb0f6— Blått används för att markera länkar, taggar och korta fraser. Det bör inte användas som primärfärg för uppmaningar till handling. - Fresh Leaf
#a5ed6e— Grönt används för att markera länkar, taggar och korta fraser. Det bör inte användas som primärfärg för uppmaningar till handling. - Night Ink
#000437— Länkar, taggar och korta markerade fraser är markerade i lila. - Paper White
#ffffff— Sidduk, kartongytor, knapptext på grön/mörk bakgrund. - Charcoal
#4b4b4b— Huvudrubriker och brödtext – Universell mörk text som gör att färgade rubriker framträder. - Pencil Gray
#777777— De viktigaste textstycken är markerade med diskreta bokstäver, och sekundär beskrivande text skjuter undan i bakgrunden, så att de färgade elementen kommer i förgrunden.
Typografi
från 13 till 64px · 7 steg
- feather — ersättning: Inter · konturer 700 · Avsnittsrubriker, som "Gratis. Roligt. Effektivt" och "Duolingo engelsktest", visas med ett anpassat rundat teckensnitt, vilket ger varumärket dess lekfulla, vänliga och maskotliknande stil. Ersätt med "Feather Bold" eller "Nunito Black" med lämplig vikt. Bokstavsavstånd: -0,0200 em
- duolingo-sans — ersättning: Inter · konturer 500 · Huvudstycken och navigeringslänkar med 17px/500 – ett geometriskt sans-serif-teckensnitt som förblir läsbart, vilket gör att linjetjockleken på 700 kan framhäva viktiga punkter. Ersätt med 'DIN Next', 'Inter' eller 'Nunito Sans'.
- duolingo-sans — ersättning: Inter · konturer 700 · Alla vikt-700-värden används: versaler i navigeringsetiketter är 15px (ls 0.0530em), underrubriker är 19px och 32px, och länkbetoning är 13px. Samma teckensnitt som huvudtexten – den visuella skillnaden ligger i vikten, inte i teckensnittsändringen. Bokstavsavstånd: 0.0530em för versaler i navigeringsetiketter.
Intervaller och form
| Ändamål | Menande |
|---|---|
| Densitet | tät |
| Grundläggande steg | 12px |
| Knappradie | 12px |
| Kortradie | 12px |
| Skuggor | inga gränser istället för skuggor |
| Mellan sektioner | 80-120px |
| Sidbredd | 1200px |
AI kommer att bygga din webbplats i Duolingo -stil och fylla den
- Fyll på med produkter och inlägg via länken - Instagram, TikTok, Facebook.
- Överför innehåll från din gamla webbplats – ange bara adressen.
- Modern design på den bästa sökmotorn: React ( Next.js) med serverrendering och SEO-optimering direkt ur lådan.
- Helautomatisk SEO-optimering för sökresultat och rekommendationer för neurala nätverk.
Liknande stilar
- Family — Ett uppslag från en saga på gräddepergament
- Say Briefly — Skissblock för kreativ byrå på krämfärgat papper
- Flying Papers — Bekännelse på en lördagsmorgon-tecknad film
- Portrait — En vägg av minnen, fångad i Polaroidbilder på krämfärgat papper. En ljus, krämfärgad scrapbooking där mörkblått bläck fungerar som enda text, enda strukturlinjer och enda ramfärg – med en enda handritad regnbåge som visas en gång, på knappen "Registrera" och på det kursiverade ordet "för alltid", och aldrig mer.
- Karl — Ett 3D-diorama i popup-boksstil på en solig dag
- Navigate — En stor uppsättning klistermärken fästa på en bräda: stort groteskt typsnitt, alla i form av surfplattor och fem flerfärgade ikoner, upprepade som en logotyp
- Monte — Morgon vid kusten med en rostig nyans
- MotherDuck — Terminal kodad med färgpennor på krämpapper
- Wise Design — Ett neonfärgat marknadsstånd på en global gata – en klargrön skylt som skriker genom den trånga marknadsplatsen, medan bakom den dyker ett polerat användargränssnitt diskret upp.
- Hatch — En handritad design i samizdat-stil blandad med pastellfärgade godisskålar. En krämig pappersduk prydd med mintgrönt accenter, konfettiprickar och pillerformade uppmaningar till handling, där ett stort, djärvt serif-typsnitt antyder skoj och en blå maskot blinkar i hörnet.
- Superr — En varm skolbok i det mjuka eftermiddagsljuset. En krämfärgad sida, en orange tuschpenna utan kork och en bunt laminerade namnklistermärken som väntar på att skalas av.
- Mews — Ett kontrollcenter för hotell och restaurang i gryningen, dränkt i rosa. En vitväggig, solig arbetsyta där djärv svart text, varma krämfärgade kort och en enda knallrosa funktionsknapp definierar varje skärm – en lekfull självsäkerhet snarare än företagsmässig återhållsamhet.