# Infantil / livro de histórias

Também chamado de: web design infantil, UI de livro de histórias, estilo de livro ilustrado, design de app infantil, site de ilustração lúdica  
Era: contínuo; mais forte de 2015 em diante (apps infantis, sites educativos, marcas para famílias)  
Página: https://designforai.dev/pt/style/kids-storybook

## Traços

- cenas ilustradas como fundos: colinas, nuvens, florestas, personagens espiando
- paleta quente e rica com mais saturação que o pastel mas mais suave que as primárias
- tipografia grande e arredondada, às vezes títulos com lettering manual
- alvos de toque e ícones superdimensionados; pouquíssimo texto, muitas imagens
- texturas de papel, giz de cera ou aquarela nas formas
- os personagens guiam a navegação; cada seção é uma cena
- movimento: nuvens flutuando, olhos piscando, transições de página saltitantes, som opcional

Paleta: #fff7e6 céu creme, #ffb84d sol, #6bcb77 grama, #4d96ff azul-céu, #ff6b6b vermelho bochecha, #4a3728 texto marrom quente

Tipografia: Baloo 2, Fredoka, Lilita One ou Chewy para títulos (700-800 a 40-64px); Nunito ou Andika (projetada para leitores iniciantes) a 18-20px para o corpo

## Faça

- projete cada seção como uma cena com linha do horizonte, uma camada de fundo, uma camada intermediária e personagens na frente
- faça cada coisa clicável ter pelo menos 56px e dê a ela um rosto, uma forma ou um nome de cor
- use texturas SVG de aquarela ou giz de cera nas formas grandes (feTurbulence com frequência baixa)

## Evite

- não use texto pequeno nem parágrafos longos; os adultos leem a página Sobre, as crianças leem imagens
- não use dark mode, neon nem linhas finas
- não toque som automaticamente; ofereça como um toggle

Conhecido por: Khan Academy Kids, PBS Kids, Toca Boca, Sago Mini, Lingokids

## Semente CSS

```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

Construa o site como um livro de histórias infantil. Fundo de céu #fff7e6 com uma colina verde ondulada (#6bcb77, path SVG com filtro de textura de giz de cera) na base do hero, três nuvens macias (brancas, pilhas com raio 999px) derivando em loops de 30s, e um sol #ffb84d com 12 raios arredondados. Texto #4a3728. Fontes: Baloo 2 800 para títulos a 60/40/28px, Nunito 600 a 20px para o corpo, line-height 1.6, no máximo 3 linhas por bloco. Botões: pílulas grandes, 64px de altura, preenchimento #4d96ff ou #ff6b6b com texto branco e uma borda inferior 4px mais escura, quicam no hover (scale 1.06, easing de mola 350ms). Os cards são "placas" ou "janelas" com raio de 28px, contornos 3px #4a3728 e ícones ilustrados flat a 96px. Cada seção é uma cena: floresta (árvores #2d6a4f), mar (ondas #4d96ff), noite (#2b2d5c com estrelas) nessa ordem, com um personagem espiando pela borda de cada uma. Alvos de toque de 56px no mínimo. Toggle de som desligado por padrão.