63 lines
2.6 KiB
Markdown
63 lines
2.6 KiB
Markdown
# 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.
|