Playful

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

[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.