> From [PageWeave Design](https://pageweave-design.pageweave.site) — a working library for agentic web development. Full index: [llms.txt](https://pageweave-design.pageweave.site/llms.txt)

# Playful

Controlled joy — bold hues, rounded shapes, springy motion

- Category: Styles
- Palette: #fff6ec #241a3d #ff6b6b #4ecdc4 #ffd93d
- Type pairing: Baloo 2 · Nunito
- Tags: bold colorful rounded springy fun

## Philosophy

Playful design takes joy seriously. Bold saturated color, rounded geometry, oversized shapes, and micro-interactions that reward curiosity. The craft is in *control*: playfulness collapses into chaos without a firm underlying grid and consistent rules (same corner radius everywhere, same shadow language, one animation personality).

Right for: kids' products, creative tools, food, community apps, anything that wants to lower the user's guard.

## Typography

- **Display**: Baloo 2, Fredoka, or Bricolage Grotesque at heavy weights — chunky, warm, slightly imperfect.
- **Body**: Nunito or Figtree; rounded terminals keep the register friendly at small sizes.
- Handwritten accents (Caveat, Gochi Hand) for annotations and arrows only — never body text.
- Type can rotate ±2°, overlap shapes, and sit on colored blobs. Line-height can be tighter than usual because the voice is casual.

## Color

High-chroma multi-hue palettes are allowed here — the one aesthetic where 3–5 saturated colors coexist. Anchor with a warm off-white (`oklch(0.97 0.02 85)`) or go bold with a colored ground. In OKLCH keep chroma 0.15–0.22 and vary hue widely but lightness narrowly so nothing dominates. Every color needs a tested `-content` counterpart.

## Surfaces & backgrounds

Blobby SVG shapes, wavy section dividers, sticker-style cards with thick borders and hard shadows (`box-shadow: 0 6px 0 rgb(0 0 0 / .9)`), confetti patterns, oversized emoji-as-illustration. Depth is cartoon depth: outlines + offset shadows, not blurs.

## Layout grammar

Generous border radius (1–2rem), pill buttons, floating tilted elements, bento grids with mixed cell sizes. Centered compositions work well. Icons should be filled, not stroked. Illustration beats photography; if photos appear, frame them like polaroids.

## Motion

The signature category. Spring easings (`cubic-bezier(.34,1.56,.64,1)`), hover squishes (`scale(0.96)` then overshoot), wiggle on attention, confetti bursts on conversion. One orchestrated load sequence with staggered pops. Respect `prefers-reduced-motion` by replacing springs with simple fades.

## Reference theme

```css
[data-theme="confetti"] {
  color-scheme: light;
  --color-base-100: oklch(0.97 0.02 85);
  --color-base-200: oklch(0.93 0.04 85);
  --color-base-content: oklch(0.25 0.06 300);
  --color-primary: oklch(0.62 0.22 25);
  --color-primary-content: oklch(0.98 0.01 85);
  --color-secondary: oklch(0.72 0.14 195);
  --color-secondary-content: oklch(0.2 0.05 195);
  --color-accent: oklch(0.85 0.17 95);
  --color-accent-content: oklch(0.25 0.06 95);
  --color-neutral: oklch(0.35 0.05 300);
  --color-neutral-content: oklch(0.97 0.02 85);
  --radius-box: 1rem;
  --radius-field: 999rem;
  --radius-selector: 1rem;
  --border: 2px;
  --depth: 1;
}
```

Headings in `"Baloo 2"` 700, body in `"Nunito"` 500.

## Pitfalls

- **Don't** animate everything — pick three signature interactions and repeat them.
- **Don't** put pastel text on pastel grounds; playful still means AA contrast.
- **Don't** mix outline and filled icon sets; pick one world.