# Style Family: playful

**Signature**: Rounded, saturated, bouncy motion, illustrative, friendly.
**Reference products**: Duolingo, MailChimp, Slack early, Notion early, Headspace.
**Best for**: education, consumer apps with onboarding, kids products, gamification, habit/lifestyle apps.

## Token defaults

### Color
- **Primary**: saturated and friendly — coral, teal, sunny yellow, grass green. Avoid muted enterprise blues.
- **Palette**: 2–3 accent colors are encouraged (the "single primary" rule from other families is relaxed).
- **Background**: warm off-white or soft tinted background; pure white feels sterile here.
- **Avoid in this family**: cool grays, navy/charcoal, monochrome palettes.

### Typography
- **Heading**: friendly humanist sans or rounded sans — Nunito, Quicksand, Poppins, Fraunces (soft serif), Inter Display (rounded variant).
- **Body**: rounded humanist sans — Nunito, DM Sans, Manrope, Open Sans (yes, even this one).
- **Weight**: medium-to-bold for headings (600+). Light weights look fragile.

### Radius
- **Generous**: 12 / 16 / 24 px. Pills and full-rounded buttons are common and *correct* here.

### Spacing
- 4px base, scale 4 / 8 / 16 / 24 / 32 / 48.
- Density: balanced. Generous touch targets (mobile-friendly).

### Shadow
- **Soft and tinted**: shadows often inherit a hint of the surface or primary color, not pure black.
- Multiple elevation tiers welcome.

### Motion
- **Bounce is encouraged.** Spring physics, elastic easing, micro-celebrations on success.
- Lottie illustrations are in family.
- Empty states and 404 pages are opportunities for character, not minimalism.

## Anti-patterns *within this family*

- Sharp corners (0–4px) on primary surfaces.
- Pure black or pure gray text on white. Use a slightly warm dark color.
- Geometric sans like Geist or Inter as body — too cold.
- Flat illustrations with no character.
- Skipping the empty state — playful family thrives on personality in edge cases.
- Rigid grid alignment with no asymmetry.

## Typical surfaces

This family does well on:
- Onboarding flows
- Consumer mobile apps
- Education products
- Streak / progress / gamification surfaces
- Marketing for B2C

This family does poorly on:
- B2B dashboards used 8 hours a day (the personality wears)
- High-stakes interfaces (medical, financial trades)
- Enterprise procurement processes
- Long-form reading (rounded body fonts fatigue)

## Notes

There's a cliff between "friendly" and "infantilizing". For adult-targeted products in serious domains (finance, healthcare), `playful` is usually the wrong family — but `warm-content` may give the same warmth without the gamification feel.