Die Kernästhetik ist ein Lernspiel: freundlich, niedlich, hochmotivational und durchgehend mit Fortschrittssignalen versehen. Weißraum hält die lauten Illustrationen ruhig.
Duolingo nutzt keine schweren Feature-Cards. Der wiedererkennbare Container ist der zweispaltige Abschnitt: große Illustration plus kurze grüne Aussage plus graue Erklärung.
Grün ist Aktion, Fortschritt und Footer. Blau ist Link und Sekundäraktion. Navy markiert App-/Premium-Kontext. Grau hält die Copy ruhig.
Display: 64px, 700, Navy, feather-artige Rundschrift.
Headline: 48px, 700, Grün, kurze Zeilen.
Hero: 32px, 700, dunkelgrau, zentriert.
Body: 17px, 500, 24px Line-Height. Erklärungstexte bleiben schmal und ruhig, damit Illustrationen die emotionale Arbeit übernehmen.
Grün, weiß, 4px Unterkante.
Weiß, blaue Schrift, graue Kante.
Rail-Pfeil: rund, grau, ruhig.
Starker grüner Fortschritt.
Orange belohnt Gewohnheit.
Reward-Währung als bunte UI.
Grünes Siegel für Vertrauen.
Duo erklärt den nächsten Schritt.
Maskottchen ersetzt abstrakte Hero-Icons und nimmt der Lernaufgabe Schwere.
Münzen, Gems, Hearts und Streaks machen Lernfortschritt sichtbar.
Flaggenchips zeigen globale Kursbreite ohne Menükomplexität.
Dunkler Full-Bleed-Bereich mit Neon-Gradient differenziert Premium.
Jede Behauptung wird mit einer Produkt-/Figurenszene belegt.
Der finale CTA kippt in eine grüne Landschaft statt in einen neutralen Footer.
Fehler: Bitte wähle ein Ziel.
Feature-Sektionen bleiben ohne Box. Tiefe sitzt in Buttons, Badges und Illustrationskarten.
header.height = 72px content.maxWidth = 988px courseRail.maxWidth = 1090px hero.padding = 48px 0 hero.columns = 424px 480px feature.sectionPadding = 96px 0 feature.columns = 503px 530px button.height = 50px button.radius = 12px button.primary.bg = #58CC02 button.primary.bottomShadow = 0 4px 0 #58A700 button.secondary.text = #1CB0F6 button.secondary.border = #E5E5E5 body.font = din-round, sans-serif headline.font = feather, sans-serif featureHeadline.size = 48px appHeadline.size = 64px body.size = 17px / 24px super.background = #100F3E footer.background = #58CC02
Farben, Schriften, CTA-Stile, Kursrail, Layoutbreiten, H1/H2-Größen, App- und Super-Sektionen, Footerstruktur.
Interne Produktkarten wie Streak, Lesson Path, Modal und Error-State aus sichtbarer Duolingo-Produktsemantik.
Exakte proprietäre Fontdateien, Live-Animationskurven und Original-Illustrationsassets wurden nicht kopiert.