Design for AI

Kids / storybook: UI design prompt

Palette, type rules and a pasteable prompt for kids / storybook. Also called children's website design, storybook UI, picture book style, kids app design, whimsical illustration site. ongoing; strongest 2015 onward (kids apps, educational sites, family brands).

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
: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.
For design.md, .cursorrules or AGENTS.md
## Design direction
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.

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

Keep hover and focus-visible states on every interactive element. Do not add a CSS framework.