Design for AI

Stil Verspielt rund: UI-Design-Prompt

Palette, Schriftregeln und ein einfügbarer Prompt für verspielt rund. Auch bekannt als Duolingo-Stil, klobiges verspieltes UI, 3D-Button-UI, gamifiziertes UI, freundliches rundes Design. ab 2019 (Duolingo-Redesign 2019, Headspace, Notion-Maskottchen).

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
: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.
Für design.md, .cursorrules oder AGENTS.md
## Designrichtung
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.

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

Hover- und focus-visible-Zustände auf jedem interaktiven Element beibehalten. Kein CSS-Framework hinzufügen.