# Kinder / Bilderbuch

Auch bekannt als: Kinder-Website-Design, Bilderbuch-UI, Picture-Book-Stil, Kinder-App-Design, verspielte Illustrationsseite  
Ära: anhaltend; am stärksten ab 2015 (Kinder-Apps, Bildungsseiten, Familienmarken)  
Seite: https://designforai.dev/de/style/kids-storybook

## Merkmale

- illustrierte Szenen als Hintergründe: Hügel, Wolken, Wälder, Figuren, die hereinlugen
- warme, satte Palette mit mehr Sättigung als Pastell, aber weicher als Primärfarben
- große runde Schrift, manchmal handgeletterte Überschriften
- überdimensionierte Touch-Ziele und Icons; sehr wenig Text, viele Bilder
- Papier-, Wachsmal- oder Aquarelltexturen auf Formen
- Figuren leiten durch die Navigation; jeder Abschnitt ist eine Szene
- Motion: schwebende Wolken, blinzelnde Augen, hüpfende Seitenübergänge, Sound optional

Palette: #fff7e6 Cremehimmel, #ffb84d Sonne, #6bcb77 Gras, #4d96ff Himmelblau, #ff6b6b Wangenrot, #4a3728 warmbrauner Text

Schrift: Baloo 2, Fredoka, Lilita One oder Chewy für Überschriften (700-800 bei 40-64px); Nunito oder Andika (für Leseanfänger entworfen) bei 18-20px für Fließtext

## Do

- gestalte jeden Abschnitt als Szene mit Horizontlinie, einer Hintergrundebene, einer Mittelebene und Figuren davor
- mach alles Klickbare mindestens 56px groß und gib ihm ein Gesicht, eine Form oder einen Farbnamen
- nutze Aquarell- oder Wachsmal-SVG-Texturen auf den großen Formen (feTurbulence mit niedriger Frequenz)

## Don't

- nutze keinen kleinen Text oder lange Absätze; Erwachsene lesen die Über-uns-Seite, Kinder lesen Bilder
- nutze keinen Dark Mode, kein Neon, keine dünnen Linien
- spiele keinen Sound automatisch ab; biete ihn als Toggle an

Bekannt dafür: Khan Academy Kids, PBS Kids, Toca Boca, Sago Mini, Lingokids

## CSS-Seed

```css
:root{--bg:#fff7e6; --fg:#4a3728; --accent:#ffb84d; --accent2:#6bcb77; --accent3:#4d96ff; --accent4:#ff6b6b; --radius:28px; --font:'Nunito',sans-serif; --font-display:'Baloo 2',cursive}
```

## Prompt

Baue die Seite als Kinder-Bilderbuch. Himmelshintergrund #fff7e6 mit einem sanft geschwungenen grünen Hügel (#6bcb77, SVG-Pfad mit Wachsmal-Texturfilter) am unteren Rand des Hero, drei weichen Wolken (weiß, Stapel mit Radius 999px), die in 30s Loops driften, und einer Sonne #ffb84d mit 12 runden Strahlen. Text #4a3728. Schriften: Baloo 2 800 für Überschriften bei 60/40/28px, Nunito 600 bei 20px für Fließtext, line-height 1.6, maximal 3 Zeilen pro Block. Buttons: große Pillen, 64px hoch, #4d96ff oder #ff6b6b Füllung mit weißem Text und einer 4px dunkleren Unterkante, hüpfen bei Hover (scale 1.06, Spring-Easing 350ms). Karten sind "Wegweiser" oder "Fenster" mit 28px Radius, 3px #4a3728 Outlines und flachen illustrierten Icons bei 96px. Jeder Abschnitt ist eine Szene: Wald (#2d6a4f Bäume), Meer (#4d96ff Wellen), Nacht (#2b2d5c mit Sternen) in dieser Reihenfolge, mit einer Figur, die am Rand jeder Szene hervorlugt. Touch-Ziele mindestens 56px. Sound-Toggle standardmäßig aus.