# Verspielt rund (Duolingo-artig)

Auch bekannt als: Duolingo-Stil, klobiges verspieltes UI, 3D-Button-UI, gamifiziertes UI, freundliches rundes Design  
Ära: ab 2019 (Duolingo-Redesign 2019, Headspace, Notion-Maskottchen)  
Seite: https://designforai.dev/de/style/playful-rounded

## Merkmale

- komplett runde Formen: Pillen-Buttons, 16-24px Kartenradius, runde Avatare und Badges
- klobige "drückbare" Buttons mit solider Unterkante (border-bottom 4px in einem dunkleren Ton), die beim Drücken einsinkt
- helle, gesättigte, fröhliche Palette: Grün, Blau, Gelb, Rot, Lila auf Weiß
- fette runde Sans in schweren Schnitten; große freundliche Headlines
- Maskottchen und flach illustrierte Figuren mit ausdrucksstarken Gesichtern
- Fortschrittsbalken, Streaks, XP, Badges: Spielmechaniken als UI
- hüpfende Motion: Spring-Easings, Wackeln, Konfetti bei Erfolg

Palette: #ffffff Seite, #4b4b4b Text, #58cc02 Grün, #1cb0f6 Blau, #ffc800 Gelb, #ff4b4b Rot, #ce82ff Lila, #e5e5e5 Linie

Schrift: Nunito (800-900 für Überschriften, 700 für Buttons), Fredoka, Baloo 2 oder Varela Round; Überschriften 800 bei 32-56px, Fließtext 500 bei 17px, Buttons 700 Versalien bei 15px mit 0.05em Tracking

## Do

- baue Buttons mit solider Farbe, border-bottom 4px in einem 20 % dunkleren Ton, Radius 16px; bei aktiv den unteren Rand entfernen und translateY(4px)
- gib jedem Zustand eine Farbe und ein Icon: richtig ist grün, falsch ist rot, gesperrt ist grau
- nutze ein Maskottchen in drei Posen (neutral, fröhlich, traurig) und setze es konsistent ein

## Don't

- nutze keine dünnen Schriften oder grauen Text unter #777; der Stil ist energiegeladen
- nutze keine Drop-Shadows für Tiefe; nutze die 3D-Unterkante
- misch nirgends scharfe Ecken hinein, auch nicht bei Eingabefeldern und Bildern

Bekannt dafür: Duolingo, Headspace (teilweise), Khan Academy Kids, Kahoot

## CSS-Seed

```css
:root{--bg:#ffffff; --fg:#4b4b4b; --accent:#58cc02; --accent-dark:#58a700; --accent2:#1cb0f6; --accent3:#ffc800; --line:#e5e5e5; --radius:16px; --font:'Nunito',sans-serif}
```

## Prompt

Baue die Seite im verspielt-runden Duolingo-artigen Stil. Hintergrund #ffffff, Text #4b4b4b, gedämpft #afafaf, Linien #e5e5e5. Farben: Grün #58cc02 (dunkel #58a700), Blau #1cb0f6 (dunkel #1899d6), Gelb #ffc800 (dunkel #e5a800), Rot #ff4b4b, Lila #ce82ff. Schrift Nunito: Überschriften 800 bei 52/36/26px, Fließtext 500 bei 17px line-height 1.5, Buttons 700 Versalien 15px mit 0.05em Tracking. Buttons: solide Füllung, weißer Text, border-radius 16px, 50px hoch, border-bottom 4px solid im dunkleren Ton; bei aktiv border-bottom 0 und translateY(4px), 80ms. Sekundärbuttons: weiß mit 2px #e5e5e5 Rand und 4px Unterkante. Karten: 2px #e5e5e5 Rand, Radius 16px, 24px Padding, kein Schatten. Fortschrittsbalken: 16px hohe Pille, #e5e5e5 Spur, #58cc02 Füllung mit einem helleren 4px Glanzstreifen oben. Badges sind 64px Kreise mit flachen Icons. Ergänze eine freundliche Maskottchen-Illustration (flach, rund, große Augen) neben der Hero-Headline. Motion: Spring (cubic-bezier(0.34,1.56,0.64,1)) bei 300ms beim Erscheinen; das Maskottchen wackelt bei Hover um 3deg; Konfetti-Explosion bei Formularerfolg.