# Kids / storybook

Also called: children's website design, storybook UI, picture book style, kids app design, whimsical illustration site  
Era: ongoing; strongest 2015 onward (kids apps, educational sites, family brands)  
Page: https://designforai.dev/style/kids-storybook

## Traits

- illustrated scenes as backgrounds: hills, clouds, forests, characters peeking in
- warm, rich palette with more saturation than pastel but softer than primary
- big rounded type, sometimes hand-lettered headings
- oversized touch targets and icons; very little text, lots of pictures
- paper, crayon or watercolour textures on shapes
- characters guide the navigation; each section is a scene
- motion: floating clouds, blinking eyes, bouncy page transitions, sound-optional

Palette: #fff7e6 cream sky, #ffb84d sun, #6bcb77 grass, #4d96ff sky blue, #ff6b6b cheek red, #4a3728 warm brown text

Type: Baloo 2, Fredoka, Lilita One or Chewy for headings (700-800 at 40-64px); Nunito or Andika (designed for early readers) at 18-20px for body

## Do

- design each section as a scene with a horizon line, a background layer, a mid layer and characters in front
- make every clickable thing at least 56px and give it a face, a shape or a colour name
- use watercolour or crayon SVG textures on the big shapes (feTurbulence with low frequency)

## Don't

- do not use small text or long paragraphs; adults read the About page, kids read pictures
- do not use dark mode, neon or thin lines
- do not autoplay sound; offer it as a toggle

Known for it: 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

Build the site as a kids storybook. Sky background #fff7e6 with a rolling green hill (#6bcb77, SVG path with a crayon texture filter) across the bottom of the hero, three soft clouds (white, radius 999px stacks) drifting on 30s loops, and a sun #ffb84d with 12 rounded rays. Text #4a3728. Fonts: Baloo 2 800 for headings at 60/40/28px, Nunito 600 at 20px for body, line-height 1.6, max 3 lines per block. Buttons: big pills, 64px tall, #4d96ff or #ff6b6b fill with white text and a 4px darker bottom edge, bounce on hover (scale 1.06, spring easing 350ms). Cards are 28px-radius "signposts" or "windows" with 3px #4a3728 outlines and flat illustrated icons at 96px. Each section is a scene: forest (#2d6a4f trees), sea (#4d96ff waves), night (#2b2d5c with stars) in that order, with a character peeking from the edge of each. Touch targets 56px minimum. Sound toggle off by default.