Children's Playful

---
name: childrens-playful
description: Apply the Children's Playful visual design system when building or restyling websites and UI. Use whenever the user asks to build, theme, restyle, or "make it look like" Children's Playful, mentions kids design, kid-friendly UI, playful children's, or describes saturated rainbow primaries, big rounded bold type, 20–32px chunky corners — even if they don't name the style explicitly. Do NOT use for non-visual tasks or when another named design system is requested.
license: MIT
---

# Children's Playful Design System

Bright, friendly, kid-first design: high-saturation rainbow primaries on warm white, big rounded Fredoka type, chunky 20–32px corners, oversized touch targets, mascots and bouncy feedback everywhere. Built for small hands and short attention spans.

Apply this system holistically: colors, type, spacing, radius, borders, shadows, and motion together produce the look. Token values are representative interpretations of the aesthetic, not an official spec. When in doubt, match the reference sites listed at the end.

## When to use

- Building a new page or component that should read as Children's Playful.
- Restyling existing UI to this aesthetic.
- The user names the style, an alias (kids design, kid-friendly UI, playful children's, edu-game style), or describes its traits: saturated rainbow primaries; big rounded bold type; 20–32px chunky corners; oversized touch targets; mascot illustrations; bouncy reward animations.

## Design tokens

### Color palette

- Warm white page background: `#fff9ec` (--color-bg)
- Card background: `#ffffff` (--color-surface)
- Deep navy primary text — softer than black: `#2b2d42` (--color-text)
- Secondary text and captions: `#5a5f7a` (--color-text-muted)
- Crayon blue — primary buttons, links, and focus: `#4361ee` (--color-accent)
- Cherry red — playful fills and mascot details: `#ef476f` (--color-red)
- Sunshine yellow — stars, rewards, highlight fills: `#ffd166` (--color-yellow)
- Spring green — success and go states: `#06d6a0` (--color-green)
- Grape purple — variety in cards and avatars: `#9b5de5` (--color-purple)
- Tangerine — energy accents and streak flames: `#ff8f3f` (--color-orange)

### Typography

- Display / headings: Fredoka (fallback: Arial Rounded MT Bold, sans-serif)
- Body: Nunito (fallback: Verdana, sans-serif)
- Type scale: 1.25 ratio, base 18px — computed steps: 18px / 23px / 28px / 35px / 44px / 55px (body / h5 / h4 / h3 / h2 / h1; scale further for display sizes)
- Headings: weight 600, line-height 1.2, letter-spacing 0
- Body: line-height 1.5, letter-spacing 0.01em

### Spacing, radius, border

- Spacing scale (px): 8, 12, 16, 24, 32, 48, 64, 96 — Big and forgiving: minimum 56px touch targets, wide gaps so small fingers cannot mis-tap, one idea per screen region.
- Border radius: md 20px, lg 28px, xl 32px, pill 999px — Everything chunky-rounded; cards are 24–32px, buttons are pills, images get 20px minimum.
- Border treatment: none — Color blocks do the structural work; when outlining (e.g. selected state) use a thick 3px border in the element's own color family.

### Shadows

- chunky: `0 4px 0 rgba(43, 45, 66, 0.15)` — Candy-button bottom edge — the signature pressed-sweet look
- chunky-press: `0 1px 0 rgba(43, 45, 66, 0.15)` — Pressed state — element translates down 3px
- float: `0 8px 20px rgba(43, 45, 66, 0.12)` — Cards and modals

### Layout

- Max content width: 1140px
- One clear activity per screen; navigation as big colorful picture buttons
- Mascot guide anchored in a consistent corner, reacting to progress
- Reward layer: stars, confetti, and progress bars always visible in learning flows
- Icons and pictures carry meaning first; text supports (pre-readers)

### Effects

- Star-burst and confetti particle rewards on success
- Blob and cloud shapes floating gently in backgrounds
- Character avatars with unlockable accessories
- Audio-cue pairing with visual feedback (tap sounds, cheers)

### Motion

- Easing: cubic-bezier(0.34, 1.56, 0.64, 1); durations 150ms / 300ms / 550ms
- Buttons squash on press and bounce back with overshoot
- Correct answers trigger a star burst and mascot celebration
- Elements enter with a springy pop, staggered so kids can track them
- Idle mascot breathes and blinks on a slow loop

## CSS variables (drop-in)

```css
:root {
  --color-bg: #fff9ec;
  --color-surface: #ffffff;
  --color-text: #2b2d42;
  --color-text-muted: #5a5f7a;
  --color-accent: #4361ee;
  --color-red: #ef476f;
  --color-yellow: #ffd166;
  --color-green: #06d6a0;
  --color-purple: #9b5de5;
  --color-orange: #ff8f3f;
  --radius-md: 20px;
  --radius-lg: 28px;
  --radius-xl: 32px;
  --radius-pill: 999px;
  --shadow-chunky: 0 4px 0 rgba(43, 45, 66, 0.15);
  --shadow-chunky-press: 0 1px 0 rgba(43, 45, 66, 0.15);
  --shadow-float: 0 8px 20px rgba(43, 45, 66, 0.12);
  --border-default: none;
  --font-display: Fredoka, "Arial Rounded MT Bold", sans-serif;
  --font-body: Nunito, Verdana, sans-serif;
  --text-base: 18px;
  --leading-heading: 1.2;
  --leading-body: 1.5;
  --tracking-heading: 0;
  --tracking-body: 0.01em;
  --ease: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast: 150ms;
  --duration-base: 300ms;
  --duration-slow: 550ms;
}
```

Google Fonts: `<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Fredoka:wght@500;600;700&family=Nunito:wght@400;700;800&display=swap" rel="stylesheet">`

## Component recipes

- **Nav:** Chunky bar of large pill buttons, each a different rainbow color with an icon and label; active button is bigger and bounces once
- **Hero:** Mascot waving beside a giant Fredoka headline, cloud shapes drifting behind, one enormous candy-button CTA in crayon blue
- **Card:** White card, 28px radius, float shadow, big illustration on top, short Fredoka title, colored progress bar; whole card is the tap target
- **Button (primary):** Crayon-blue pill with white Fredoka text, chunky bottom-edge shadow; squashes down 3px on press
- **Button (secondary):** Sunshine-yellow pill with navy text, same chunky edge treatment
- **Form fields:** White fill, 3px border in crayon blue at 30% strength, 20px radius, 18px+ text; focus thickens the border and pops gently

Where this spec is silent (footers, responsive breakpoints, empty states), derive the treatment from the tokens above and the Do/Don't rules — never fall back to generic defaults. Every interactive element needs a visible keyboard focus state consistent with the style (use the accent color or the border treatment, not the browser default).

## Signature element

Chunky candy-button interface: oversized pill buttons with a darker bottom edge (like a pressed sweet), each nav item a different rainbow color, everything responding with a squash-and-bounce and a burst of stars. Spend boldness here; keep everything else quiet.

## Do

- Make every tappable thing huge (56px+) and obviously pressable
- Reward generously: stars, confetti, and mascot cheers on every success
- Give each nav destination its own consistent color and icon
- Design for pre-readers: icon + color + optional audio before text

## Don't

- No harsh black, thin fonts, or tiny tap targets
- Never punish visually — wrong answers get a gentle wobble, not a red slam
- Don't put ads or external links inside the child's reach — gate them behind parent checks
- Avoid dense text; if a sentence needs a comma, it is too long for the UI

## Accessibility notes

- Navy #2b2d42 on warm white is ~13:1 and crayon blue #4361ee ~4.8:1 — both pass; the rainbow fills (yellow, green, red) are backgrounds for navy text, never text colors themselves
- Pair every color-coded meaning with an icon and (ideally) audio — young users include many who are pre-literate or color-blind
- Bounce and confetti effects must honor prefers-reduced-motion, and reward sounds need a mute control for sensory-sensitive children

## Reference sites

- PBS KIDS: https://pbskids.org
- Toca Boca: https://tocaboca.com
- Khan Academy Kids: https://learn.khanacademy.org/khan-academy-kids/

For the exhaustive machine-readable spec, see references/tokens.md and tokens.json in this skill folder.

Install this skill

unzip childrens-playful.zip -d ~/.claude/skills/

npx shadcn add https://claude-design-skills.convoke.software/r/childrens-playful.json

Settings → Capabilities → Skills → Upload skill → childrens-playful.zip